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>