PHP - amcharts.js:34 Uncaught TypeError:无法读取属性' call'未定义的

时间:2018-02-04 17:15:42

标签: javascript jquery json html5 amcharts

请清除此错误我不知道如何处理此错误?我真的不知道错误在哪里?我想创建一个这样的图,但是     我给出的价值不起作用。我给的JSON值没有     plotte

  

我希望结果为绘制的图形,包含json格式朋友的实时数据集的所有滚动和缩放选项。这里我使用的是amchart js和普通的javascript。



    var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "marginRight": 40,
    "marginLeft": 40,
    "autoMarginOffset": 20,
    "mouseWheelZoomEnabled":true,
    "dataDateFormat": "YYYY-MM-DD",
    "valueAxes": [{
        "id": "v1",
        "axisAlpha": 0,
        "position": "left",
        "ignoreAxisWidth":true
    }],
    "balloon": {
        "borderThickness": 1,
        "shadowAlpha": 0
    },
    "graphs": [{
        "id": "g1",
        "balloon":{
          "drop":true,
          "adjustBorderColor":false,
          "color":"#ffffff"
        },
        "bullet": "round",
        "bulletBorderAlpha": 1,
        "bulletColor": "#FFFFFF",
        "bulletSize": 5,
        "hideBulletsCount": 50,
        "lineThickness": 2,
        "title": "red line",
        "useLineColorForBulletBorder": true,
        "valueField": "value",
        "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
    }],
    "chartScrollbar": {
        "graph": "g1",
        "oppositeAxis":false,
        "offset":30,
        "scrollbarHeight": 80,
        "backgroundAlpha": 0,
        "selectedBackgroundAlpha": 0.1,
        "selectedBackgroundColor": "#888888",
        "graphFillAlpha": 0,
        "graphLineAlpha": 0.5,
        "selectedGraphFillAlpha": 0,
        "selectedGraphLineAlpha": 1,
        "autoGridCount":true,
        "color":"#AAAAAA"
    },
    "chartCursor": {
        "pan": true,
        "valueLineEnabled": true,
        "valueLineBalloonEnabled": true,
        "cursorAlpha":1,
        "cursorColor":"#258cbb",
        "limitToGraph":"g1",
        "valueLineAlpha":0.2,
        "valueZoomable":true
    },
    "valueScrollbar":{
      "oppositeAxis":false,
      "offset":50,
      "scrollbarHeight":10
    },
    "categoryField": "date",
    "categoryAxis": {
        "parseDates": true,
        "dashLength": 1,
        "minorGridEnabled": true
    },
    "export": {
        "enabled": true
    },
    "dataProvider": [  
   {  
      "date":"2017-08-08",
      "value":28
   },
   {  
      "date":"2017-08-07",
      "value":26
   },
   {  
      "date":"2017-08-06",
      "value":36
   },
   {  
      "date":"2017-08-05",
      "value":31
   },
   {  
      "date":"2017-08-04",
      "value":30
   },
   {  
      "date":"2017-08-03",
      "value":27
   },
   {  
      "date":"2017-08-02",
      "value":28
   },
   {  
      "date":"2017-08-01",
      "value":25
   },
   {  
      "date":"2017-07-31",
      "value":27
   },
   {  
      "date":"2017-07-30",
      "value":27
   },
   {  
      "date":"2017-07-29",
      "value":36
   },
   {  
      "date":"2017-07-28",
      "value":30
   },
   {  
      "date":"2017-07-27",
      "value":39
   },
   {  
      "date":"2017-07-26",
      "value":36
   },
   {  
      "date":"2017-07-25",
      "value":32
   },
   {  
      "date":"2017-08-09",
      "value":33
   },
   {  
      "date":"2017-08-09",
      "value":40
   },
   {  
      "date":"2017-08-09",
      "value":33
   },
   {  
      "date":"2017-08-09",
      "value":25
   },
   {  
      "date":"2017-08-09",
      "value":33
   },
   {  
      "date":"2017-08-09",
      "value":26
   },
   {  
      "date":"2017-07-24",
      "value":38
   },
   {  
      "date":"2017-07-23",
      "value":33
   },
   {  
      "date":"2017-07-22",
      "value":37
   },
   {  
      "date":"2017-07-21",
      "value":35
   },
   {  
      "date":"2017-07-20",
      "value":39
   },
   {  
      "date":"2017-07-19",
      "value":26
   },
   {  
      "date":"2017-07-18",
      "value":29
   },
   {  
      "date":"2017-07-17",
      "value":40
   },
   {  
      "date":"2017-07-16",
      "value":40
   },
   {  
      "date":"2017-07-15",
      "value":37
   },
   {  
      "date":"2017-07-14",
      "value":28
   },
   {  
      "date":"2017-07-13",
      "value":26
   },
   {  
      "date":"2017-07-12",
      "value":32
   },
   {  
      "date":"2017-07-11",
      "value":34
   },
   {  
      "date":"2017-07-10",
      "value":31
   },
   {  
      "date":"2017-07-09",
      "value":34
   },
   {  
      "date":"2017-07-08",
      "value":37
   },
   {  
      "date":"2017-07-07",
      "value":31
   },
   {  
      "date":"2017-07-06",
      "value":36
   },
   {  
      "date":"2017-07-05",
      "value":40
   },
   {  
      "date":"2017-07-04",
      "value":27
   },
   {  
      "date":"2017-07-03",
      "value":26
   },
   {  
      "date":"2017-07-02",
      "value":38
   },
   {  
      "date":"2017-07-01",
      "value":39
   },
   {  
      "date":"2017-06-30",
      "value":33
   },
   {  
      "date":"2017-06-29",
      "value":31
   },
   {  
      "date":"2017-06-28",
      "value":38
   },
   {  
      "date":"2017-06-27",
      "value":26
   },
   {  
      "date":"2017-06-26",
      "value":32
   },
   {  
      "date":"2017-06-25",
      "value":30
   },
   {  
      "date":"2017-06-24",
      "value":27
   },
   {  
      "date":"2017-06-23",
      "value":29
   },
   {  
      "date":"2017-06-22",
      "value":39
   },
   {  
      "date":"2017-06-21",
      "value":40
   },
   {  
      "date":"2017-06-20",
      "value":39
   },
   {  
      "date":"2017-06-19",
      "value":38
   },
   {  
      "date":"2017-06-18",
      "value":25
   },
   {  
      "date":"2017-06-17",
      "value":28
   },
   {  
      "date":"2017-06-16",
      "value":37
   },
   {  
      "date":"2017-06-15",
      "value":40
   },
   {  
      "date":"2017-06-14",
      "value":40
   },
   {  
      "date":"2017-06-13",
      "value":40
   },
   {  
      "date":"2017-06-12",
      "value":25
   },
   {  
      "date":"2017-06-11",
      "value":32
   },
   {  
      "date":"2017-06-10",
      "value":34
   },
   {  
      "date":"2017-06-09",
      "value":32
   },
   {  
      "date":"2017-06-08",
      "value":25
   },
   {  
      "date":"2017-06-07",
      "value":31
   },
   {  
      "date":"2017-06-06",
      "value":39
   },
   {  
      "date":"2017-06-05",
      "value":37
   },
   {  
      "date":"2017-06-04",
      "value":30
   },
   {  
      "date":"2017-06-03",
      "value":26
   },
   {  
      "date":"2017-06-02",
      "value":38
   },
   {  
      "date":"2017-06-01",
      "value":28
   },
   {  
      "date":"2017-05-31",
      "value":40
   },
   {  
      "date":"2017-05-30",
      "value":31
   },
   {  
      "date":"2017-05-29",
      "value":34
   },
   {  
      "date":"2017-05-28",
      "value":37
   },
   {  
      "date":"2017-05-27",
      "value":33
   },
   {  
      "date":"2017-05-26",
      "value":25
   },
   {  
      "date":"2017-05-25",
      "value":27
   },
   {  
      "date":"2017-05-24",
      "value":35
   },
   {  
      "date":"2017-05-23",
      "value":30
   },
   {  
      "date":"2017-05-22",
      "value":25
   },
   {  
      "date":"2017-05-21",
      "value":35
   },
   {  
      "date":"2017-05-20",
      "value":29
   },
   {  
      "date":"2017-05-19",
      "value":38
   },
   {  
      "date":"2017-05-18",
      "value":36
   },
   {  
      "date":"2017-05-17",
      "value":32
   },
   {  
      "date":"2017-05-16",
      "value":35
   },
   {  
      "date":"2017-05-15",
      "value":35
   },
   {  
      "date":"2017-05-14",
      "value":32
   },
   {  
      "date":"2017-05-13",
      "value":35
   },
   {  
      "date":"2017-05-12",
      "value":36
   },
   {  
      "date":"2017-05-11",
      "value":39
   },
   {  
      "date":"2017-05-10",
      "value":28
   },
   {  
      "date":"2017-05-09",
      "value":28
   },
   {  
      "date":"2017-05-08",
      "value":40
   },
   {  
      "date":"2017-05-07",
      "value":35
   },
   {  
      "date":"2017-05-06",
      "value":26
   },
   {  
      "date":"2017-05-05",
      "value":36
   },
   {  
      "date":"2017-05-04",
      "value":25
   },
   {  
      "date":"2017-05-03",
      "value":28
   },
   {  
      "date":"2017-05-02",
      "value":34
   },
   {  
      "date":"2017-05-01",
      "value":28
   },
   {  
      "date":"2017-04-30",
      "value":27
   },
   {  
      "date":"2017-04-29",
      "value":25
   },
   {  
      "date":"2017-04-28",
      "value":37
   },
   {  
      "date":"2017-04-27",
      "value":39
   },
   {  
      "date":"2017-04-26",
      "value":33
   },
   {  
      "date":"2017-04-25",
      "value":38
   },
   {  
      "date":"2017-04-24",
      "value":25
   },
   {  
      "date":"2017-04-23",
      "value":28
   },
   {  
      "date":"2017-04-22",
      "value":27
   },
   {  
      "date":"2017-04-21",
      "value":26
   },
   {  
      "date":"2017-04-20",
      "value":38
   },
   {  
      "date":"2017-04-19",
      "value":32
   },
   {  
      "date":"2017-04-18",
      "value":39
   },
   {  
      "date":"2017-04-17",
      "value":33
   },
   {  
      "date":"2017-04-16",
      "value":39
   },
   {  
      "date":"2017-04-15",
      "value":34
   },
   {  
      "date":"2017-04-14",
      "value":28
   },
   {  
      "date":"2017-04-13",
      "value":31
   },
   {  
      "date":"2017-04-12",
      "value":28
   },
   {  
      "date":"2017-04-11",
      "value":40
   },
   {  
      "date":"2017-04-10",
      "value":29
   },
   {  
      "date":"2017-04-09",
      "value":32
   },
   {  
      "date":"2017-04-08",
      "value":27
   },
   {  
      "date":"2017-04-07",
      "value":28
   },
   {  
      "date":"2017-04-06",
      "value":26
   },
   {  
      "date":"2017-04-05",
      "value":29
   },
   {  
      "date":"2017-04-04",
      "value":40
   },
   {  
      "date":"2017-04-03",
      "value":26
   },
   {  
      "date":"2017-04-02",
      "value":32
   },
   {  
      "date":"2017-04-01",
      "value":34
   },
   {  
      "date":"2017-03-31",
      "value":29
   },
   {  
      "date":"2017-03-30",
      "value":35
   },
   {  
      "date":"2017-03-29",
      "value":34
   },
   {  
      "date":"2017-03-28",
      "value":26
   },
   {  
      "date":"2017-03-27",
      "value":33
   },
   {  
      "date":"2017-03-26",
      "value":27
   },
   {  
      "date":"2017-03-25",
      "value":39
   },
   {  
      "date":"2017-03-24",
      "value":34
   },
   {  
      "date":"2017-03-23",
      "value":30
   }
]
});

chart.addListener("rendered", zoomChart);

zoomChart();

function zoomChart() {
    chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
&#13;
 .amcharts-chart-div a {display:none !important;}
        #drop {
        margin-top: 5%;
        margin-left: 30%;
        margin-right: 30%;
        }
    #chartdiv {
        margin-top: 2%;
        margin-left: 20%;
        margin-right: 20%;
	width	: auto;
	height	: 500px;
}
&#13;
<html>
<head>
    
    <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

        <!-- Compiled and minified JavaScript -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript" ></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>  
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
    <script>

    </script>
    <style>
       
    </style>
</head>
<body>
    <div class="row" id="drop">
        <div class="offset-m3 offset-l4 col s12 m6 l4">
        <ul id = "dropdown" class = "dropdown-content">
         <li><a href = "#">Department2</a></li>
         <li><a href = "#!">Department3</a></li>
         <li><a href = "#">Department4</a></li>
         <li><a href = "#">Department5</a></li>
         <li><a href = "#">Department6</a></li>
         <li><a href = "#!">Department7</a></li>
         <li><a href = "#">Department8</a></li>
         <li><a href = "#">Department9</a></li>
         <li><a href = "#!">Department10</a></li>
         <li><a href = "#">Department11</a></li>
         <li><a href = "#">Department12</a></li>
         <li><a href = "#">Department13</a></li>
         <li><a href = "#!">Department14</a></li>
         <li><a href = "#">Department15</a></li>
         <li><a href = "#">Department16</a></li>
         <li><a href = "#">Department17</a></li>
      </ul>
      
      <a class = "btn dropdown-button" href = "graph.html" data-activates = "dropdown">Department1
         <i class = "mdi-navigation-arrow-drop-down right"></i></a>
        </div> 
    </div>
        <div class="offset-m2 offset-l3 col s12 m8 l6">
        <div class="" id="chartdiv"></div>
        </div>
</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

我无法重现确切的控制台错误,但由于您的日期无序而导致缩放时出现问题。如parseDates documentation中所述,您的基于日期的数据必须按升序进行排序。您的数据大多按降序排列,重复的2017-08-09日期不按顺序排列,也应删除。

这里的代码按排序顺序删除了重复项:

&#13;
&#13;
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "marginRight": 40,
  "marginLeft": 40,
  "autoMarginOffset": 20,
  "mouseWheelZoomEnabled": true,
  "dataDateFormat": "YYYY-MM-DD",
  "valueAxes": [{
    "id": "v1",
    "axisAlpha": 0,
    "position": "left",
    "ignoreAxisWidth": true
  }],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0
  },
  "graphs": [{
    "id": "g1",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff"
    },
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "value",
    "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
  }],
  "chartScrollbar": {
    "graph": "g1",
    "oppositeAxis": false,
    "offset": 30,
    "scrollbarHeight": 80,
    "backgroundAlpha": 0,
    "selectedBackgroundAlpha": 0.1,
    "selectedBackgroundColor": "#888888",
    "graphFillAlpha": 0,
    "graphLineAlpha": 0.5,
    "selectedGraphFillAlpha": 0,
    "selectedGraphLineAlpha": 1,
    "autoGridCount": true,
    "color": "#AAAAAA"
  },
  "chartCursor": {
    "pan": true,
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 1,
    "cursorColor": "#258cbb",
    "limitToGraph": "g1",
    "valueLineAlpha": 0.2,
    "valueZoomable": true
  },
  "valueScrollbar": {
    "oppositeAxis": false,
    "offset": 50,
    "scrollbarHeight": 10
  },
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true
  },
  "export": {
    "enabled": true
  },
  "dataProvider": [{
    "date": "2017-03-23",
    "value": 30
  }, {
    "date": "2017-03-24",
    "value": 34
  }, {
    "date": "2017-03-25",
    "value": 39
  }, {
    "date": "2017-03-26",
    "value": 27
  }, {
    "date": "2017-03-27",
    "value": 33
  }, {
    "date": "2017-03-28",
    "value": 26
  }, {
    "date": "2017-03-29",
    "value": 34
  }, {
    "date": "2017-03-30",
    "value": 35
  }, {
    "date": "2017-03-31",
    "value": 29
  }, {
    "date": "2017-04-01",
    "value": 34
  }, {
    "date": "2017-04-02",
    "value": 32
  }, {
    "date": "2017-04-03",
    "value": 26
  }, {
    "date": "2017-04-04",
    "value": 40
  }, {
    "date": "2017-04-05",
    "value": 29
  }, {
    "date": "2017-04-06",
    "value": 26
  }, {
    "date": "2017-04-07",
    "value": 28
  }, {
    "date": "2017-04-08",
    "value": 27
  }, {
    "date": "2017-04-09",
    "value": 32
  }, {
    "date": "2017-04-10",
    "value": 29
  }, {
    "date": "2017-04-11",
    "value": 40
  }, {
    "date": "2017-04-12",
    "value": 28
  }, {
    "date": "2017-04-13",
    "value": 31
  }, {
    "date": "2017-04-14",
    "value": 28
  }, {
    "date": "2017-04-15",
    "value": 34
  }, {
    "date": "2017-04-16",
    "value": 39
  }, {
    "date": "2017-04-17",
    "value": 33
  }, {
    "date": "2017-04-18",
    "value": 39
  }, {
    "date": "2017-04-19",
    "value": 32
  }, {
    "date": "2017-04-20",
    "value": 38
  }, {
    "date": "2017-04-21",
    "value": 26
  }, {
    "date": "2017-04-22",
    "value": 27
  }, {
    "date": "2017-04-23",
    "value": 28
  }, {
    "date": "2017-04-24",
    "value": 25
  }, {
    "date": "2017-04-25",
    "value": 38
  }, {
    "date": "2017-04-26",
    "value": 33
  }, {
    "date": "2017-04-27",
    "value": 39
  }, {
    "date": "2017-04-28",
    "value": 37
  }, {
    "date": "2017-04-29",
    "value": 25
  }, {
    "date": "2017-04-30",
    "value": 27
  }, {
    "date": "2017-05-01",
    "value": 28
  }, {
    "date": "2017-05-02",
    "value": 34
  }, {
    "date": "2017-05-03",
    "value": 28
  }, {
    "date": "2017-05-04",
    "value": 25
  }, {
    "date": "2017-05-05",
    "value": 36
  }, {
    "date": "2017-05-06",
    "value": 26
  }, {
    "date": "2017-05-07",
    "value": 35
  }, {
    "date": "2017-05-08",
    "value": 40
  }, {
    "date": "2017-05-09",
    "value": 28
  }, {
    "date": "2017-05-10",
    "value": 28
  }, {
    "date": "2017-05-11",
    "value": 39
  }, {
    "date": "2017-05-12",
    "value": 36
  }, {
    "date": "2017-05-13",
    "value": 35
  }, {
    "date": "2017-05-14",
    "value": 32
  }, {
    "date": "2017-05-15",
    "value": 35
  }, {
    "date": "2017-05-16",
    "value": 35
  }, {
    "date": "2017-05-17",
    "value": 32
  }, {
    "date": "2017-05-18",
    "value": 36
  }, {
    "date": "2017-05-19",
    "value": 38
  }, {
    "date": "2017-05-20",
    "value": 29
  }, {
    "date": "2017-05-21",
    "value": 35
  }, {
    "date": "2017-05-22",
    "value": 25
  }, {
    "date": "2017-05-23",
    "value": 30
  }, {
    "date": "2017-05-24",
    "value": 35
  }, {
    "date": "2017-05-25",
    "value": 27
  }, {
    "date": "2017-05-26",
    "value": 25
  }, {
    "date": "2017-05-27",
    "value": 33
  }, {
    "date": "2017-05-28",
    "value": 37
  }, {
    "date": "2017-05-29",
    "value": 34
  }, {
    "date": "2017-05-30",
    "value": 31
  }, {
    "date": "2017-05-31",
    "value": 40
  }, {
    "date": "2017-06-01",
    "value": 28
  }, {
    "date": "2017-06-02",
    "value": 38
  }, {
    "date": "2017-06-03",
    "value": 26
  }, {
    "date": "2017-06-04",
    "value": 30
  }, {
    "date": "2017-06-05",
    "value": 37
  }, {
    "date": "2017-06-06",
    "value": 39
  }, {
    "date": "2017-06-07",
    "value": 31
  }, {
    "date": "2017-06-08",
    "value": 25
  }, {
    "date": "2017-06-09",
    "value": 32
  }, {
    "date": "2017-06-10",
    "value": 34
  }, {
    "date": "2017-06-11",
    "value": 32
  }, {
    "date": "2017-06-12",
    "value": 25
  }, {
    "date": "2017-06-13",
    "value": 40
  }, {
    "date": "2017-06-14",
    "value": 40
  }, {
    "date": "2017-06-15",
    "value": 40
  }, {
    "date": "2017-06-16",
    "value": 37
  }, {
    "date": "2017-06-17",
    "value": 28
  }, {
    "date": "2017-06-18",
    "value": 25
  }, {
    "date": "2017-06-19",
    "value": 38
  }, {
    "date": "2017-06-20",
    "value": 39
  }, {
    "date": "2017-06-21",
    "value": 40
  }, {
    "date": "2017-06-22",
    "value": 39
  }, {
    "date": "2017-06-23",
    "value": 29
  }, {
    "date": "2017-06-24",
    "value": 27
  }, {
    "date": "2017-06-25",
    "value": 30
  }, {
    "date": "2017-06-26",
    "value": 32
  }, {
    "date": "2017-06-27",
    "value": 26
  }, {
    "date": "2017-06-28",
    "value": 38
  }, {
    "date": "2017-06-29",
    "value": 31
  }, {
    "date": "2017-06-30",
    "value": 33
  }, {
    "date": "2017-07-01",
    "value": 39
  }, {
    "date": "2017-07-02",
    "value": 38
  }, {
    "date": "2017-07-03",
    "value": 26
  }, {
    "date": "2017-07-04",
    "value": 27
  }, {
    "date": "2017-07-05",
    "value": 40
  }, {
    "date": "2017-07-06",
    "value": 36
  }, {
    "date": "2017-07-07",
    "value": 31
  }, {
    "date": "2017-07-08",
    "value": 37
  }, {
    "date": "2017-07-09",
    "value": 34
  }, {
    "date": "2017-07-10",
    "value": 31
  }, {
    "date": "2017-07-11",
    "value": 34
  }, {
    "date": "2017-07-12",
    "value": 32
  }, {
    "date": "2017-07-13",
    "value": 26
  }, {
    "date": "2017-07-14",
    "value": 28
  }, {
    "date": "2017-07-15",
    "value": 37
  }, {
    "date": "2017-07-16",
    "value": 40
  }, {
    "date": "2017-07-17",
    "value": 40
  }, {
    "date": "2017-07-18",
    "value": 29
  }, {
    "date": "2017-07-19",
    "value": 26
  }, {
    "date": "2017-07-20",
    "value": 39
  }, {
    "date": "2017-07-21",
    "value": 35
  }, {
    "date": "2017-07-22",
    "value": 37
  }, {
    "date": "2017-07-23",
    "value": 33
  }, {
    "date": "2017-07-24",
    "value": 38
  }, {
    "date": "2017-07-25",
    "value": 32
  }, {
    "date": "2017-07-26",
    "value": 36
  }, {
    "date": "2017-07-27",
    "value": 39
  }, {
    "date": "2017-07-28",
    "value": 30
  }, {
    "date": "2017-07-29",
    "value": 36
  }, {
    "date": "2017-07-30",
    "value": 27
  }, {
    "date": "2017-07-31",
    "value": 27
  }, {
    "date": "2017-08-01",
    "value": 25
  }, {
    "date": "2017-08-02",
    "value": 28
  }, {
    "date": "2017-08-03",
    "value": 27
  }, {
    "date": "2017-08-04",
    "value": 30
  }, {
    "date": "2017-08-05",
    "value": 31
  }, {
    "date": "2017-08-06",
    "value": 36
  }, {
    "date": "2017-08-07",
    "value": 26
  }, {
    "date": "2017-08-08",
    "value": 28
  }, {
    "date": "2017-08-09",
    "value": 33
  }/*
    remove extra duplicate dates
  , {
    "date": "2017-08-09",
    "value": 40
  }, {
    "date": "2017-08-09",
    "value": 33
  }, {
    "date": "2017-08-09",
    "value": 25
  }, {
    "date": "2017-08-09",
    "value": 33
  }, {
    "date": "2017-08-09",
    "value": 26
  }
  */
  ]
});

chart.addListener("rendered", zoomChart);

zoomChart();

function zoomChart() {
  chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
&#13;
.amcharts-chart-div a {
  display: none !important;
}

#drop {
  margin-top: 5%;
  margin-left: 30%;
  margin-right: 30%;
}

#chartdiv {
  margin-top: 2%;
  margin-left: 20%;
  margin-right: 20%;
  width: auto;
  height: 500px;
}
&#13;
<html>

<head>

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
  <script src="https://www.amcharts.com/lib/3/serial.js"></script>
  <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
  <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
  <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
  <script>
  </script>
  <style>

  </style>
</head>

<body>
  <div class="row" id="drop">
    <div class="offset-m3 offset-l4 col s12 m6 l4">
      <ul id="dropdown" class="dropdown-content">
        <li><a href="#">Department2</a></li>
        <li><a href="#!">Department3</a></li>
        <li><a href="#">Department4</a></li>
        <li><a href="#">Department5</a></li>
        <li><a href="#">Department6</a></li>
        <li><a href="#!">Department7</a></li>
        <li><a href="#">Department8</a></li>
        <li><a href="#">Department9</a></li>
        <li><a href="#!">Department10</a></li>
        <li><a href="#">Department11</a></li>
        <li><a href="#">Department12</a></li>
        <li><a href="#">Department13</a></li>
        <li><a href="#!">Department14</a></li>
        <li><a href="#">Department15</a></li>
        <li><a href="#">Department16</a></li>
        <li><a href="#">Department17</a></li>
      </ul>

      <a class="btn dropdown-button" href="graph.html" data-activates="dropdown">Department1
         <i class = "mdi-navigation-arrow-drop-down right"></i></a>
    </div>
  </div>
  <div class="offset-m2 offset-l3 col s12 m8 l6">
    <div class="" id="chartdiv"></div>
  </div>
</body>

</html>
&#13;
&#13;
&#13;