amcharts3
amcharts3 copied to clipboard
Display only last 2 months data in amcharts when page loads
I want to display only last 2 months data in amcharts. If user want previous data then he should scroll..
How can i do that? Display only last 2 months in amcharts. See image. So i want data of only Nov, Oct and Sep or half september, Not till March. Please guide.
see image you can see data from march to nov i want only last 2 months data. (Means till 11 sep 2017 to 11 nov 2017) to see other data user need to do scroll. thats no issue. https://i.stack.imgur.com/YCbsZ.png
I have tried dataDateFormat and minimumDate in valueAxes. I have also tried duration and durationUnits. Did not understand what should i write in duration so i see 2 months in chart. Thanks in advance!
<script>
var chartSleep = AmCharts.makeChart("{{ div }}", {
"type": "serial",
"theme": "light",
"dataProvider": {{ data.json|raw }},
"creditsPosition": "top-right",
"synchronizeGrid":true,
"valueAxes": [
{
"id":"v_hours",
//"title": "Bodyweight in kg",
//"title": "Körpergewicht in kg",
"axisColor": "#2A3B55",
"axisThickness": 1,
"gridAlpha": 0.1,
"offset": 0,
"axisAlpha": 1,
"position": "right",
"labelsEnabled": true,
"dataDateFormat": 'YYYY-MM-DD',
"minimumDate": "2017-09-11"
}
],
"mouseWheelZoomEnabled": true,
"graphs": [
{
"valueAxis": "v_hours",
"lineColor": "#2A3B55",
"title": "At time Waking-up time (7 days)",
"valueField": "hSleep7d",
"fillAlphas": 0,
"balloonText": "Waking-up time (7 days): [[hSleep7d_hour_format]]h"
},
{
"valueAxis": "v_hours",
"lineColor": "#80B3FF",
"title": "At time Waking-up (60 days)",
"valueField": "hSleep60d",
"fillAlphas": 0,
"balloonText": "Waking-up time (60 days): [[hSleep60d_hour_format]]h"
}
],
"chartCursor": {
"cursorPosition": "mouse"
},
"chartScrollbar": {
"offset":0
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisColor": "#DADADA",
"minorGridEnabled": true,
"startOnAxis": true,
"gridAlpha": 0.07,
},
"export": {
"enabled": false,
}
});
chartSleep.addListener("dataUpdated", zoomChart);
zoomChart();
function zoomChart(){
chartSleep.zoomToIndexes(chartSleep.dataProvider.length - 30, chartSleep.dataProvider.length);
}
</script>
I suggest you use maxSelectedTime
instead.
This way you can set a number of milliseconds that can be zoomed out at most. This will also affect initial zoom.
So for 2 months selection you'd set it to 5270400000
:
"maxSelectedTime": 5270400000
I hope you find this useful.