Bar graph from json response using Jquery

Question

I have an AJAX call which on success gets a JSON response in the below format. Where the number of JSON array columns does not change but the number of entries can increase. Need help in plotting this as a bar chart using jQuery.

[
   {
      "amount": XX,
      "instanceId": "XXX",
      "timeStamp": XXX
   },
   {
      "amount": XX,
      "instanceId": "XX",
      "timeStamp": XX
   }
]

Answer 1

You should show code of what you have tried so far and ask a specific question about an issue you are having. Without this information it's hard to provide a suitable answer. That being said, I will provide one way of creating a dynamic bar chart with JavaScript.

This approach uses Chart.js which is a responsive HTML5 charting library that uses the <canvas> element. They provide a bar chart implementation and you can find the documentation for it here. . The first thing to do is include the library into your HTML file (download it and put it in a directory on your server first):

<script src="Chart.js"></script>

Then, in your HTML add a canvas element where the chart will be displayed:

<canvas id="myChart" width="400" height="400"></canvas>

Now, in your JavaScript file, create the chart object using the canvas context:

var ctx = document.getElementById("myChart").getContext("2d");
var chartObject = new Chart(ctx);

Then, using the chart object we created, we can call the Bar(data, options) factory method on it to create the bar chart. The Bar() method takes two arguments: a data object and a options object. The options object allows you to alter certain default functionality. The data object is where you will add your values retrieved from your AJAX call.

The data object contains two direct properties: labels and datasets; each of which are arrays. The labels will be what displays on the bottom of the graph going horizontally, such as dates. Each object in the datasets array will contain a data property which will be the y-value of that particular bar graph corresponding to the label at the same index. They may sound confusing but it's really not once you have a look:

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

Where the first index of both objects data arrays will correspond to the first index in the label array: bar one was at 65 in January and bar two was at 28 in January.

Since now we have our data object, we can now create the bar graph:

var barChart = chartObject.Bar(data); 

Now, whenever you get more data you can add it with the following method:

// The values array passed into addData should be one for each dataset in the chart
barChart.addData([40, 60], "August");
// The new data will now animate at the end of the chart.

And you can even add more datasets:

barChart.datasets.push("data to push");

That should give you enough of a start. You just need to provide some alterations to fit your scenario.