amcharts-jschart
Version:
A go-to library for data visualization. When you don’t have time to learn new technologies. When you need a simple yet powerful and flexible drop-in data visualization solution.
87 lines (81 loc) • 2.89 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>amCharts examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/serial.js" type="text/javascript"></script>
<script src="../amcharts/gantt.js" type="text/javascript"></script>
<script>
var chart = AmCharts.makeChart("chartdiv", {
"type": "gantt",
"period": "DD",
"valueAxis": {
"type": "date"
},
"brightnessStep": 10,
"graph": {
"fillAlphas": 1,
"balloonText": "[[open]] - [[value]]"
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"dataDateFormat": "YYYY-MM-DD",
"startDateField": "start",
"endDateField": "end",
"dataProvider": [{
"category": "John",
"segments": [{
"start": "2015-01-02",
"end": "2015-01-03"
}, {
"start": "2015-01-04",
"end": "2015-01-05"
}, {
"start": "2015-01-07",
"end": "2015-01-10"
}]
}, {
"category": "Smith",
"segments": [{
"start": "2015-01-01",
"end": "2015-01-02"
}, {
"start": "2015-01-10",
"end": "2015-01-15"
}]
}, {
"category": "Ben",
"segments": [{
"start": "2015-01-06",
"end": "2015-01-09"
}, {
"start": "2015-01-11",
"end": "2015-01-18"
}, {
"start": "2015-01-22",
"end": "2015-01-21"
}]
}],
"chartCursor": {
"valueBalloonsEnabled": false,
"cursorAlpha": 0,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueZoomable":true,
"zoomable":false
},
"valueScrollbar": {
"position":"top",
"autoGridCount":true,
"color":"#000000"
}
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
</body>
</html>