I'm trying to create a simple chart in a page using mysql data retrieved using a mysql script
I don't understand how to integrate the ajax call with the data required for the chart. I don;t know enough about the various charting plugins to make my life easy and am currently trialing highchart.
My php script returns the following json:
[{"name":"golfers"},{"data":[5.7879,6.6286,6.1724,5.3125,7.1481,6.1333,4.5769]}]
My chart script is:
$(function () {
visitorData(function(data) {
console.info(data);
$('#chart1').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Average Visitors'
},
xAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
},
yAxis: {
title: {
text: 'Number of visitors'
}
},
series: data,
});
});
});
my function to make the ajax call:
$.ajax({
url: '/visitdata',
type: 'GET',
async: true,
dataType: "json",
success: function (data) {
console.warn(data);
return data;
}
});
But at the moment nothing is being displayed.
I'm not sure how to effectively make the ajax call and integrate it into the chart function. I decided on a callback based on earlier attempts and posts to ensure data is returned before creating the chart - is this bit correct?
I'm not 100% sure the json data is structured correctly
I'm not sure i;ve applied the data variable to the series correctly
Basically - need a tutorial on this so I can get it working and experiment
All help appreciated
Thanks
//parse json response
var chartSeriesData = [];
var chartCategory = [];
$.each(response, function() {
if(this.name!="TOTAL" && this.no!="0") {
var series_name = this.name;
var series_data = this.no;
var series = [
series_name,
parseFloat(series_data)
];
chartSeriesData.push(series);
}
});
//initialize options for highchart
var options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'SalesOrder '
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
center:['60%','60%'],
size:150
,
dataLabels: {
enabled: true,
color: '#000000',
distance: 40,
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.y} '
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data:chartSeriesData //load array created from json
}]
}
//options.series[0].setData(datavaluejson);
var chart= $('#container').highcharts(options);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With