CODEWITHSUNDEEP
javascriptphpjqueryajaxhighcharts
Jc John
Jc John

Reputation: 1859

populating highchart series by looping my query every month

i want to populate my series data from highchart . What i was doing here is i am getting my x-axis with my first ajax (returns months), and it gives me months, and every month i was getting, i loop it every month i got to get my another data for my series ..

Here is my first ajax : it gives me an output of these: [{"datemonths":"February"},{"datemonths":"April"}]

function getbarxAxis() {
 $.ajax({
   url: siteurl+"patients_report/bardata_date",
   type: "POST",
   dataType: "JSON",
   success: function(data) {
     var categories = new Array();
     for (var i in data) {
       categories.push(data[i]["datemonths"]);
       getbarseries(data[i]["datemonths"]);
     }
    loadChart(categories);
   }
 });
}

i am very confused, how can i form my series data and pass my data to series, how can i do these? here is my second code from the function that was inside the loop in my first ajax: in these ajax it gives me two JSON data's because the first ajax gives me two months

First loop: [{"clinic_name":"Clinic 1","total_checked_up":"4"}]

Second loop: [{"clinic_name":"Clinic 2","total_checked_up":"1"},{"clinic_name":"Clinic 3","total_checked_up":"1"}]

function getbarseries(month) {
    $.ajax({
      url: siteurl+"patients_report/bardataclinic/"+month,
      type: "POST",
      dataType: "JSON",
        success: function(data) {
          alert(data);
        }
    });
}

Here is the function where i want to modify it from the above code, now i manage to change the x Axis and now i am confused how can i do to also change the series default data to make it dynamic based on my data from the database. Here it is:

function loadChart(categories) {
    Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: categories
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Detailed patient per clinic'
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 3, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 4, 2]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 1, 3]
        }]
    });
}

Upvotes: 1

Views: 584

Answers (1)

Vladimir M
Vladimir M

Reputation: 4489

One possible approach is:

1) have a global variable that hosts the reference to highcharts chart that you create:

var chart;
function loadChart(categories) {
    chart = Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: categories
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Detailed patient per clinic'
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        }
    });
}

Then, when you done loading data from your 2nd ajax call you can use the following API to add series data: http://api.highcharts.com/highcharts/Chart.addSeries

(That is why you needed variable to reference the chart instance)

// data should be in correct form for highcharts series
function populate_data( data ){
    chart.addSeries(data);
};

As a side note, your code needs structure, since "boiler plate" becomes hard to manage really fast.

Example on how do add series data in different calls: http://jsfiddle.net/gpusx8ze/

var chart;
function doAxis( axis ){
    chart = Highcharts.chart('container', {
        xAxis: {
            categories:axis
        },

        plotOptions: {
            series: {
                stacking: 'normal'
            }
        }
    });
}

function doData( data ){
chart.addSeries({
            data: data
        })
}


doAxis( ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
doData( [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]);
doData( [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]);

Upvotes: 1

Related Questions