Scarlett72
asked on
Can't see json data in ajax call to Highcharts
Hi, trying to pass data from a json file into a Highchart, there is no data in the series. Am very new to this, can anyone tell me why?
Thank you!
<json>
[{"data":[326978158],"name ":"Excl_Sp lash","tim e":"2016-0 3-01"},{"d ata":[5479 6390],"nam e":"Splash ","time":" 2016-03-01 "},{"data" :[34479833 0],"name": "Excl_Spla sh","time" :"2016-04- 01"},{"dat a":[597783 09],"name" :"Splash", "time":"20 16-04-01"} ,{"data":[ 358185573] ,"name":"E xcl_Splash ","time":" 2016-05-01 "},{"data" :[63700566 ],"name":" Splash","t ime":"2016 -05-01"},{ "data":[35 2688360]," name":"Exc l_Splash", "time":"20 16-06-01"} ,{"data":[ 68822877], "name":"Sp lash","tim e":"2016-0 6-01"},{"d ata":[3536 99748],"na me":"Excl_ Splash","t ime":"2016 -07-01"},{ "data":[75 092301],"n ame":"Spla sh","time" :"2016-07- 01"},{"dat a":[342876 795],"name ":"Excl_Sp lash","tim e":"2016-0 8-01"},{"d ata":[8055 3501],"nam e":"Splash ","time":" 2016-08-01 "},{"data" :[32954323 2],"name": "Excl_Spla sh","time" :"2016-09- 01"},{"dat a":[845712 45],"name" :"Splash", "time":"20 16-09-01"} ,{"data":[ 333080061] ,"name":"E xcl_Splash ","time":" 2016-10-01 "},{"data" :[92084128 ],"name":" Splash","t ime":"2016 -10-01"},{ "data":[31 9192787]," name":"Exc l_Splash", "time":"20 16-11-01"} ,{"data":[ 92971575], "name":"Sp lash","tim e":"2016-1 1-01"},{"d ata":[3476 71803],"na me":"Excl_ Splash","t ime":"2016 -12-01"},{ "data":[97 767328],"n ame":"Spla sh","time" :"2016-12- 01"},{"dat a":[286103 288],"name ":"Excl_Sp lash","tim e":"2017-0 1-01"},{"d ata":[9291 2586],"nam e":"Splash ","time":" 2017-01-01 "},{"data" :[26779663 3],"name": "Excl_Spla sh","time" :"2017-02- 01"},{"dat a":[927679 94],"name" :"Splash", "time":"20 17-02-01"} ,{"data":[ 302103577] ,"name":"E xcl_Splash ","time":" 2017-03-01 "},{"data" :[10934391 1],"name": "Splash"," time":"201 7-03-01"}]
</json>
<!-- jQuery -->
<script src="{% static "js/jquery.js" %}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{% static "js/bootstrap.min.js" %}"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!-- Additional files for the Highslide popup effect -->
<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />
<style>
body{
margin: 30px;
margin-left:40px;
}
</style>
<script type="text/javascript">
$(function () {
var processed_json = new Array();
$.getJSON('http://191.0.0.0:8000/api/monthlyytd', function(data) {
// Populate series
for (i = 0; i < data.length; i++){
processed_json.push([data[ i].key, data[i].value]);
}
// draw chart
$('#container').highcharts ({
chart: {
type: "column"
},
title: {
text: "SPLASH TRANSACTIONS"
},
xAxis: {
type: 'category',
allowDecimals: false,
title: {
text: "time"
}
},
yAxis: {
title: {
text: "name"
}
},
series: [{
name: 'data',
data: processed_json
}]
});
});
});
console.log(data[1]);
</script>
<div id="container"></div>
Thank you!
<json>
[{"data":[326978158],"name
</json>
<!-- jQuery -->
<script src="{% static "js/jquery.js" %}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{% static "js/bootstrap.min.js" %}"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!-- Additional files for the Highslide popup effect -->
<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />
<style>
body{
margin: 30px;
margin-left:40px;
}
</style>
<script type="text/javascript">
$(function () {
var processed_json = new Array();
$.getJSON('http://191.0.0.0:8000/api/monthlyytd', function(data) {
// Populate series
for (i = 0; i < data.length; i++){
processed_json.push([data[
}
// draw chart
$('#container').highcharts
chart: {
type: "column"
},
title: {
text: "SPLASH TRANSACTIONS"
},
xAxis: {
type: 'category',
allowDecimals: false,
title: {
text: "time"
}
},
yAxis: {
title: {
text: "name"
}
},
series: [{
name: 'data',
data: processed_json
}]
});
});
});
console.log(data[1]);
</script>
<div id="container"></div>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.