amcharts / amcharts3

JavaScript Charts V3
Other
395 stars 129 forks source link

Display only last 2 months data in amcharts when page loads #142

Open apoorva-shah opened 7 years ago

apoorva-shah commented 7 years ago

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>
martynasma commented 7 years ago

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.