javascript - Highchart is not getting populated using external json data -
i trying reload data highcharts
chart via json
. have html
file, when hard code categories
, series
in html highchart
working, when trying load data using json
not working.
html file
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>highcharts example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="c:\users\global soft\desktop\highchart\js\highcharts.js" type="text/javascript"></script> <script src="http://code.highcharts.com/modules/exporting.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { var options = { chart: { renderto: 'container', type: 'line', marginright: 130, marginbottom: 25 }, title: { text: 'revenue vs. overhead', x: -20 //center }, subtitle: { text: 'json example', x: -20 }, xaxis: { categories: [] }, yaxis: { title: { text: 'amount' }, plotlines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y; } }, legend: { layout: 'vertical', align: 'right', verticalalign: 'top', x: -10, y: 100, borderwidth: 0 }, series: [] } $.getjson("c:\users\global soft\desktop\highchart\zmy design\data.json", function(json) { options.xaxis.categories = json[0]['data']; options.series[0] = json[1]; options.series[1] = json[2]; chart = new highcharts.chart(options); }); }); </script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> </head> <body> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> </body> </html>
data.json
[{ "name": "month", "data": ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"] }, { "name": "revenue", "data": [23987, 24784, 25899, 25569, 25897, 25668, 24114, 23899, 24987, 25111, 25899, 23221] }, { "name": "overhead", "data": [21990, 22365, 21987, 22369, 22558, 22987, 23521, 23003, 22756, 23112, 22987, 22897] }]
the problem code loading js files twice , make sure file path correct. try :
$(document).ready(function() { var options = { chart: { renderto: 'container', type: 'line', marginright: 130, marginbottom: 25 }, title: { text: 'revenue vs. overhead', x: -20 //center }, subtitle: { text: 'json example', x: -20 }, xaxis: { categories: [] }, yaxis: { title: { text: 'amount' }, plotlines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y; } }, legend: { layout: 'vertical', align: 'right', verticalalign: 'top', x: -10, y: 100, borderwidth: 0 }, series: [] } $.getjson("https://googledrive.com/host/0b3_2apwxzw1lmgzmblnbcvbzcjg", function(json) {//https aaddress file options.xaxis.categories = json[0]['data']; options.series[0] = json[1]; options.series[1] = json[2]; chart = new highcharts.chart(options); }); });
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>highcharts example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <script type="text/javascript"> </script> </head> <body> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> </body> </html>
Comments
Post a Comment