Amcharts - Line Chart not getting displayed properly

Question

Its been a while since I'm trying this piece of amcharts code. It was working fine till like a week back but I made a few changes to my old code and things weren't working as expected. This is the code that I'm trying. The chart that is getting generated from this code is screwed up.

    var chartData1 = generateChartData();
    for ( var i = 0; i < chartData1.length; i++) {
      alert(chartData1[i].visits + " --- " + chartData1[i].date);
    }
    var chart = AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "theme": "none",
        "pathToImages": "http://www.amcharts.com/lib/3/images/",
        "dataProvider": chartData1,
        "valueAxes": [{
            "axisAlpha": 0.2,
            "dashLength": 1,
            "position": "left"
        }],
        "graphs": [{
            "id":"g1",
            "balloonText": "[[category]]<br /><b><span style='font-size:14px;'>value: [[value]]</span></b>",
            "bullet": "round",
            "bulletBorderAlpha": 1,
                    "bulletColor":"#FFFFFF",
            "hideBulletsCount": 50,
            "title": "red line",
            "valueField": "visits",
                    "useLineColorForBulletBorder":true
        }],
        "chartScrollbar": {
            "autoGridCount": true,
            "graph": "g1",
            "scrollbarHeight": 40
        },
        "chartCursor": {
            "cursorPosition": "mouse"
        },
        "categoryField": "date",
        "categoryAxis": {
            "parseDates": true,
            "axisColor": "#DADADA",
            "dashLength": 1,
            "minorGridEnabled": true,
             "minPeriod": "ss"
        },
            "exportConfig":{
              menuRight: '20px',
          menuBottom: '30px',
          menuItems: [{
          icon: 'http://www.amcharts.com/lib/3/images/export.png',
          format: 'png'
          }]
            }
    });

    chart.addListener("rendered", zoomChart);
    zoomChart();

    // this method is called when chart is first inited as we listen for "dataUpdated" event
    function zoomChart() {
        // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
        chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
    }


    // generate some random data, quite different range
    function generateChartData() {

      var chartData1 = [];
      var chartData =
                         [{"visits":"145","date":"1394139116"},{"visits":"195","date":"1394138636"},{"visits":"103","date":"1394137411"},{"visits":"147","date":"1394138156"},{"visits":"146","date":"1394139113"}];

      for ( var i = 0; i < chartData.length; i++) {
                    var utcSeconds = chartData[i].date;
                    var d = new Date(0); // The 0 there is the key, which sets the date to the epoch
                    d.setUTCSeconds(utcSeconds);
                            var login = parseInt(chartData[i].visits);
                     chartData1.push({
                            date : d,
                            visits : login
                        });
      }

        return chartData1;
    }

I see that the I'm passing a Value as Integer type and the date time in date datatype. But I'm not sure where I'm going wrong. Can you please help me out with this and let me know if I'm missing something.

This is the jsFiddle link.

Thanks a lot in advance for your help.

Answer 1

My time was not sorted ascendingly rather I had random time order and that was the cause of my problem. Now my issue is resolved.