amCharts Unbalanced

Question

Я пытаюсь создать диаграмму amCharts на основе трех значений, но результат полностью испорчен: диаграмма полностью левее, не связывает все результаты узла или показывает все данные.

Пожалуйста, помогите

var chart = AmCharts.makeChart("chartdiv", { 
     "type": "serial", 
     "theme": "none", 
     "pathToImages": "http://www.amcharts.com/lib/3/images/", 
     "dataDateFormat": "YYYY-MM-DD", 
     "valueAxes": [{ 
      "id":"v1", 
      "axisAlpha": 0, 
      "position": "left" 
     }], 
     "graphs": [{ 
      "id": "g1", 
      "bullet": "round", 
      "bulletBorderAlpha": 1, 
      "bulletColor": "#FFFFFF", 
      "bulletSize": 5, 
      "hideBulletsCount": 50, 
      "lineThickness": 2, 
      "title": "red line", 
      "useLineColorForBulletBorder": true, 
      "valueField": "Tweets" 
     }, 
        { 
      "id": "g2", 
      "bullet": "round", 
      "bulletBorderAlpha": 1, 
      "bulletColor": "#00FF00", 
      "bulletSize": 5, 
      "hideBulletsCount": 50, 
      "lineThickness": 2, 
      "title": "green line", 
      "useLineColorForBulletBorder": true, 
      "valueField": "Retweets" 
     }], 
     "chartScrollbar": { 
      "graph": "g1", 
      "scrollbarHeight": 30 
     }, 
     "chartCursor": { 
      "cursorPosition": "mouse", 
      "pan": true, 
      "valueLineEnabled":true, 
      "valueLineBalloonEnabled":true 
     }, 
     "categoryField": "date", 
     "categoryAxis": { 
      "parseDates": true, 
      "dashLength": 1, 
      "minorGridEnabled": true, 
      "position": "top" 
     }, 
     exportConfig:{ 
      menuRight: '20px', 
      menuBottom: '50px', 
      menuItems: [{ 
      icon: 'http://www.amcharts.com/lib/3/images/export.png', 
      format: 'png' 
      }] 
     }, 
     "dataProvider": 
        [{"date":"2016-03-11","Tweets":96,"Exposure":633286,"Retweets":73},{"date":"2016-03-10","Tweets":235,"Exposure":1637137,"Retweets":48},{"date":"2016-03-09","Tweets":116,"Exposure":657912,"Retweets":30},{"date":"2016-03-08","Tweets":98,"Exposure":510558,"Retweets":129},{"date":"2016-03-07","Tweets":91,"Exposure":930904,"Retweets":58},{"date":"2016-03-06","Tweets":20,"Exposure":56490,"Retweets":6},{"date":"2016-03-05","Tweets":22,"Exposure":134128,"Retweets":13},{"date":"2016-03-04","Tweets":40,"Exposure":263687,"Retweets":60},{"date":"2016-03-03","Tweets":35,"Exposure":477493,"Retweets":17},{"date":"2016-03-02","Tweets":39,"Exposure":541723,"Retweets":70}] 

    } 
); 

chart.addListener("rendered", zoomChart); 

zoomChart(); 
function zoomChart(){ 
    //chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1); 
    chart.zoomToIndexes(0, 10); 
} 

http://jsfiddle.net/srp8313j/52/

Answer 1

Порядок точек данных имеет важное значение. Для графиков, основанных на дате, точки данных должны поступать в порядке возрастания, от самого старого до самого нового. Пока в ваших данных они бегут назад. Чтобы это исправить, просто изменить порядок точек данных:

"dataProvider": [ 
    {"date":"2016-03-02","Tweets":39,"Exposure":541723,"Retweets":70}, 
    {"date":"2016-03-03","Tweets":35,"Exposure":477493,"Retweets":17}, 
    {"date":"2016-03-04","Tweets":40,"Exposure":263687,"Retweets":60}, 
    {"date":"2016-03-05","Tweets":22,"Exposure":134128,"Retweets":13}, 
    {"date":"2016-03-06","Tweets":20,"Exposure":56490,"Retweets":6}, 
    {"date":"2016-03-07","Tweets":91,"Exposure":930904,"Retweets":58}, 
    {"date":"2016-03-08","Tweets":98,"Exposure":510558,"Retweets":129}, 
    {"date":"2016-03-09","Tweets":116,"Exposure":657912,"Retweets":30}, 
    {"date":"2016-03-10","Tweets":235,"Exposure":1637137,"Retweets":48}, 
    {"date":"2016-03-11","Tweets":96,"Exposure":633286,"Retweets":73} 
] 

Updated fiddle.