请清除此错误我不知道如何处理此错误?我真的不知道错误在哪里?我想创建一个这样的图,但是 我给出的价值不起作用。我给的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;
答案 0 :(得分:0)
我无法重现确切的控制台错误,但由于您的日期无序而导致缩放时出现问题。如parseDates
documentation中所述,您的基于日期的数据必须按升序进行排序。您的数据大多按降序排列,重复的2017-08-09日期不按顺序排列,也应删除。
这里的代码按排序顺序删除了重复项:
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;