Reputation: 3
I am calling the return of a function to amchart dataloader. The function is called on the click of a button. and the chart is also called on the click of that button. But the issue is that I am not getting the chart.
function myFunction() {
var edited = "[{";
for(var i=0;i<3;i++) {
var one = document.getElementById("testid"+i).value;
var two = document.getElementById("testavg"+i).value;
edited += '"'+"Test_Id"+'":"'+one+'",'+'"Test_Average"'+':'+two+'},{';
}
edited = edited.slice(0,-2);
edited += "]";
alert(edited);
return edited;
}
function charts(){
var chartDataa = myFunction();
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": chartDataa,
"valueAxes": [ {
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
} ],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [ {
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "Test_Average"
} ],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "Test_Id",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20
},
"export": {
"enabled": true
}
});
}
The chart that I am getting right now looks like this
Upvotes: 0
Views: 149
Reputation: 713
Your function myFunction
returns a JSON string. amCharts dataProvider
prop needs an array of objects (a JS object, not a JSON string). Try changing your myFunction to a function that creates an array with data object in it. (I'd also suggest to rename it into something more descriptive). Here's how you could do it:
function getChartData() {
var dataprovider = [];
for(var i = 0; i < 3; i++) {
dataprovider.push({
"Test_Id": document.getElementById("testid"+i).value,
"Test_Average": document.getElementById("testavg"+i).value
});
}
return dataprovider;
}
function charts(){
var chartData = getChartData();
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": chartData,
"valueAxes": [ {
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
} ],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [ {
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "Test_Average"
} ],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "Test_Id",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20
},
"export": {
"enabled": true
}
});
}
You could also keep you code the way it is, and change the last line of your myFunction
to: return JSON.parse(edited);
Upvotes: 1