CODEWITHSUNDEEP
javascriptajaxhighchartsbar-chart
Jc John
Jc John

Reputation: 1859

making highchart to be a dynamic data driven

i have a problem regarding marking my highchart bar to be a dynamic data driven from my database. I want to make a dynamic data in the X-Axis and the Series part of the highchart.

Here i have a query with an output of months from my database and what i want is to put this data to my highchart categories, the result of my query is these a JSON OBJECT:

[{"datemonths":"February"},{"datemonths":"April"}]

Here is what i did or i was trying to did to make it dynamic but it sounds like error?

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

Here is the format of Highchart data's to be followed from the sample:

//     Highcharts.chart('container', {
//     chart: {
//         type: 'bar'
//     },
//     title: {
//         text: ''
//     },
//     xAxis: {
//         categories: ['January', 'February', 'March', 'April', 'May', 'June']
//     },
//     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: 0

Views: 70

Answers (1)

Liviu Boboia
Liviu Boboia

Reputation: 1754

You can't load categories via ajax, what you can do is put process your json into an array which the xaxis categories expects and make a function that loads your chart, which you will call on the ajax success

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

function loadChart(categories) {
   Highcharts.chart('container', {
     ...
     xAxis: {
       categories: categories
     },
     ...
   });
}

Full fiddle here http://jsfiddle.net/gbdfL4ra/1/ you'll have to click run to see the result

I had to override the data object that is sent back to your ajax call since i don't have access to your url

Upvotes: 1

Related Questions