Dynamic Data push for date based fields - amcharts

Question

I'm trying to push data dynamically to the dataProvider of XY charts in amcharts but I'm not able to achieve that.
My chart is not being drawn.
My x axis would be month and the y axis would be a numeric value.
I tried something like this
all the month and total arrays are declared . My obj looks something like this:
dataProviderObj{(date : 2015-Jan , y :80 , value :80 ),(date : 2015-Feb , y :70 , value :70)};
dataProviderObj={};
I'm trying to push like this
for(i=0;i<=month.length;i++){
dataProviderObj.push{(
"date" : month[i],
"y" : total[i],
"value" : total[i]
)}
}
dataprovider.push(dataProviderObj);
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"theme": "light",
"marginRight": 80,
"dataDateFormat": "YYYY-MMM",
"startDuration": 1.5,
"trendLines": [],
"balloon": {
"adjustBorderColor": false,
"shadowAlpha": 0,
"fixedPosition":true
},
"graphs": [{
"balloonText": "<div style='margin:5px;'><b>[[x]]</b><br>y:<b>[[y]]</b><br>value:<b>[[value]]</b></div>",
"bullet": "diamond",
"id": "AmGraph-1",
"lineAlpha": 0,
"lineColor": "#b0de09",
"fillAlphas": 0,
"valueField": "value",
"xField": "date",
"yField": "y"
}, {
"balloonText": "<div style='margin:5px;'><b>[[x]]</b><br>y:<b>[[y]]</b><br>value:<b>[[value]]</b></div>",
"bullet": "round",
"id": "AmGraph-2",
"lineAlpha": 0,
"lineColor": "#fcd202",
"fillAlphas": 0,
"valueField": "bValue",
"xField": "date",
"yField": "by"
}],
"valueAxes": [{
"id": "ValueAxis-1",
"axisAlpha": 0
}, {
"id": "ValueAxis-2",
"axisAlpha": 0,
"position": "bottom",
"type": "date",
"minimumDate": new Date(2015, 0, 01),
"maximumDate": new Date(2015, 12, 13)
}],
"allLabels": [],
"titles": [],
"dataProvider": dataprovider,
"export": {
"enabled": true
},
"chartScrollbar": {
"offset": 15,
"scrollbarHeight": 5
},
"chartCursor":{
"pan":true,
"cursorAlpha":0,
"valueLineAlpha":0
}
});
I want to get dynamic Date in x axis and dynamic numeric value in y axis with a value . Kindly help me draw such a xy Chart in amcharts

Answer 1

There are two issues -
1) Your logic for populating the dataprovider isn't right. You need to push directly to the dataprovider array in the loop. The logic should be:
var dataprovider = [];
for(i=0;i<=month.length;i++){
dataProvider.push({
"date" : month[i],
"y" : total[i],
"value" : total[i]
});
}
Note the placement of the parentheses and curly braces - you're calling the dataprovider array's push function with the parentheses and you're pushing an object ({ ... }) containing your data into the array.
2) "MMM" is not a supported in dataDateFormat. As you can see in AmCharts' formatting dates documentation, any format with an asterisk is not supported. Your data/dates should look like this in the resulting dataprovider array:
dataprovider = [{
"date": "2015-01",
"y": 19,
"value": 19
},
{
"date": "2015-02",
"y": 18,
"value": 18
},
// etc
]
Here's a demo with correctly formatted data
//dummy data:
var month = [ "2015-01", "2015-02", "2015-03", "2015-04", "2015-05", "2015-06", "2015-07", "2015-08", "2015-09", "2015-10", "2015-11", "2015-12"];
var total = [ 17, 16, 15, 16, 19, 20, 17, 20, 16, 19, 16, 18 ];
var dataprovider = [];
for(var i=0;i<=month.length;i++){
dataprovider.push({
"date" : month[i],
"y" : total[i],
"value" : total[i]
});
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"theme": "light",
"marginRight": 80,
"dataDateFormat": "YYYY-MM",
"startDuration": 1.5,
"trendLines": [],
"balloon": {
"adjustBorderColor": false,
"shadowAlpha": 0,
"fixedPosition": true
},
"graphs": [{
"balloonText": "<div style='margin:5px;'><b>[[x]]</b><br>y:<b>[[y]]</b><br>value:<b>[[value]]</b></div>",
"bullet": "diamond",
"id": "AmGraph-1",
"lineAlpha": 0,
"lineColor": "#b0de09",
"fillAlphas": 0,
"valueField": "value",
"xField": "date",
"yField": "y"
}, {
"balloonText": "<div style='margin:5px;'><b>[[x]]</b><br>y:<b>[[y]]</b><br>value:<b>[[value]]</b></div>",
"bullet": "round",
"id": "AmGraph-2",
"lineAlpha": 0,
"lineColor": "#fcd202",
"fillAlphas": 0,
"valueField": "bValue",
"xField": "date",
"yField": "by"
}],
"valueAxes": [{
"id": "ValueAxis-1",
"axisAlpha": 0
}, {
"id": "ValueAxis-2",
"axisAlpha": 0,
"position": "bottom",
"type": "date",
"minimumDate": new Date(2014, 11, 1),
"maximumDate": new Date(2016, 0, 1)
}],
"allLabels": [],
"titles": [],
"dataProvider": dataprovider,
"export": {
"enabled": true
},
"chartScrollbar": {
"offset": 15,
"scrollbarHeight": 5
},
"chartCursor": {
"pan": true,
"cursorAlpha": 0,
"valueLineAlpha": 0
}
});
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/xy.js"></script>
<div id="chartdiv" style="width 100%; height: 400px"></div>