I am encountering an issue with plotting data in a bar highchart. Despite having values when I alert them, they do not appear on the barchart. I am using the following code snippet:
chart.series[i].addPoint(data[i]['total_check']);function getbarseries(month) {
$.ajax({
url: siteurl+"patients_report/bardataclinic/"+month,
type: "POST",
dataType: "JSON",
success: function(data) {
for(var i in data) {
chart.series[i].addPoint(data[i]['total_check']);
//alert(data[i]['total_check']);
}
}
});
}
I am dynamically plotting a bar highchart by recursively obtaining categories (months) and then plotting the data. The main part of my code is as follows:
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"]);
}
loadChart(categories);
getallclinics();
var arrayLength = categories.length;
for(var loop = 0;loop<arrayLength;loop++) {
getbarseries(categories[loop]);
}
}
});
}
To initiate the process, I first retrieve the categories (months) before invoking the loadChart(categories); function to plot the categories.
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'
}
},
plotOptions: {
series: {
stacking: 'normal'
}
}
});
}
Once the categories are plotted, the next step involves fetching the series data names. This is handled by the getallclinics(); function, which queries the database and plots all the data series names.
function getallclinics() {
$.ajax ({
url: siteurl+"patients_report/seriesclinics",
type: "POST",
async: false,
dataType: "JSON",
success: function(data) {
for(var i in data) {
chart.addSeries({
name: data[i]['clinic_name']
});
}
}
});
}
After retrieving the clinic names, the final part involves plotting the data for each series name. This is where I am facing difficulty, specifically with the getbarseries function and
chart.series[i].addPoint(data[i]['total_check']);Below is the complete code snippet for my getbarseries function:
function getbarseries(month) {
$.ajax({
url: siteurl+"patients_report/bardataclinic/"+month,
type: "POST",
dataType: "JSON",
success: function(data) {
for(var i in data) {
chart.series[i].addPoint(data[i]['total_check']);
//alert(data[i]['total_check']);
}
}
});
}
For each month, the getbarseries function retrieves the total checkup data. The console output below shows the results for the two recursive loops:
First recursive loop:
[{"clinic_name":"Clinic 1","total_check":"0"},{"clinic_name":"Clinic 2","total_check":"1"},{"clinic_name":"Clinic 3","total_check":"0"},{"clinic_name":"Clinic 4","total_check":"0"}]Second recursive loop:
[{"clinic_name":"Clinic 1","total_check":"2"},{"clinic_name":"Clinic 2","total_check":"0"},{"clinic_name":"Clinic 3","total_check":"0"},{"clinic_name":"Clinic 4","total_check":"0"}]