Generate Highchart with Ajax request

Bar Chart

Recently i have to create a dashboard. And a dashboard should have a graphical interface that showing chart.

I look for the alternative solution from Flotr , goggle chart, and Highchart. After some search, i conclude to use highchart.

Some criteria i made in the search are :

1. Running in javascript
2. Work in any web browser
3. Can use ajax to load data
4. Have multiple chart options
5. Good documentation
6. Full feature and basic needs for display report chart with data

The most important one is, i need to generate the chart via ajax and load json data. so here some of my documentation to generate highchart with ajax loading json data. Many other way to generate the chart in the net, you can found others in the net.

var myAjaxChart;

$(document).ready(function () {

    monthlyChart = new Highcharts.Chart({
       chart: {
            renderTo: 'monthlyChart',
            type: 'column'
            },
       title: {
            text: 'Profit per month'
            }, 
       xAxis: {
            categories: ['Jan','Feb','Mar']
            }, 
       yAxis: {
            title: {
                text: 'USD'
                 }
            }
      });

 
  setIntervalAndExecute(function(){

    $.getJSON('/Ajax/profit-per-month', function(data) {
         monthlyChart.clearSeries();
         $.each(data, function (key, value) {
             monthlyChart.addSeries({
                name: value.Name,
                data: value.Values
             }); ;
          });
     });
  }, 5000);

});

You will have the code to have data from the ajax url /Ajax/profit-per-month

For the json generation, will be on other blog page discussion i guess.

Hope this help you with highchart coding.

Read More