You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
199 lines
7.5 KiB
199 lines
7.5 KiB
1 year ago
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||
|
|
<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>
|
||
|
|
var chartData = [
|
||
|
|
{
|
||
|
|
"date": "2012-01-01",
|
||
|
|
"distance": 227,
|
||
|
|
"duration": 408
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"date": "2012-01-02",
|
||
|
|
"distance": 371,
|
||
|
|
"duration": 482
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"date": "2012-01-03",
|
||
|
|
"distance": 433,
|
||
|
|
"duration": 562
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"date": "2012-01-04",
|
||
|
|
"distance": 345,
|
||
|
|
"duration": 379
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"date": "2012-01-05",
|
||
|
|
"distance": 480,
|
||
|
|
"duration": 501
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"date": "2012-01-06",
|
||
|
|
"distance": 386,
|
||
|
|
"duration": 443
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"date": "2012-01-07",
|
||
|
|
"distance": 348,
|
||
|
|
"duration": 405
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"date": "2012-01-08",
|
||
|
|
"distance": 238,
|
||
|
|
"duration": 309
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"date": "2012-01-09",
|
||
|
|
"distance": 218,
|
||
|
|
"duration": 287
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"date": "2012-01-10",
|
||
|
|
"distance": 349,
|
||
|
|
"duration": 485
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"date": "2012-01-11",
|
||
|
|
"distance": 603,
|
||
|
|
"duration": 890
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"date": "2012-01-12",
|
||
|
|
"distance": 534,
|
||
|
|
"duration": 810
|
||
|
|
}
|
||
|
|
];
|
||
|
|
var chart;
|
||
|
|
|
||
|
|
AmCharts.ready(function () {
|
||
|
|
// SERIAL CHART
|
||
|
|
chart = new AmCharts.AmSerialChart();
|
||
|
|
chart.dataProvider = chartData;
|
||
|
|
chart.categoryField = "date";
|
||
|
|
chart.dataDateFormat = "YYYY-MM-DD";
|
||
|
|
chart.marginTop = 0;
|
||
|
|
|
||
|
|
// AXES
|
||
|
|
// category axis
|
||
|
|
var categoryAxis = chart.categoryAxis;
|
||
|
|
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
|
||
|
|
categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
|
||
|
|
categoryAxis.autoGridCount = false;
|
||
|
|
categoryAxis.gridCount = 50;
|
||
|
|
categoryAxis.gridAlpha = 0;
|
||
|
|
categoryAxis.gridColor = "#000000";
|
||
|
|
categoryAxis.axisColor = "#555555";
|
||
|
|
// we want custom date formatting, so we change it in next line
|
||
|
|
categoryAxis.dateFormats = [{
|
||
|
|
period: 'DD',
|
||
|
|
format: 'DD'
|
||
|
|
}, {
|
||
|
|
period: 'WW',
|
||
|
|
format: 'MMM DD'
|
||
|
|
}, {
|
||
|
|
period: 'MM',
|
||
|
|
format: 'MMM'
|
||
|
|
}, {
|
||
|
|
period: 'YYYY',
|
||
|
|
format: 'YYYY'
|
||
|
|
}];
|
||
|
|
|
||
|
|
// as we have data of different units, we create two different value axes
|
||
|
|
// Duration value axis
|
||
|
|
var durationAxis = new AmCharts.ValueAxis();
|
||
|
|
durationAxis.title = "duration";
|
||
|
|
durationAxis.gridAlpha = 0.05;
|
||
|
|
durationAxis.axisAlpha = 0;
|
||
|
|
durationAxis.tickLength = 0;
|
||
|
|
durationAxis.inside = true;
|
||
|
|
// the following line makes this value axis to convert values to duration
|
||
|
|
// it tells the axis what duration unit it should use. mm - minute, hh - hour...
|
||
|
|
durationAxis.duration = "mm";
|
||
|
|
durationAxis.durationUnits = {
|
||
|
|
DD: "d. ",
|
||
|
|
hh: "h ",
|
||
|
|
mm: "min",
|
||
|
|
ss: ""
|
||
|
|
};
|
||
|
|
chart.addValueAxis(durationAxis);
|
||
|
|
|
||
|
|
// Distance value axis
|
||
|
|
var distanceAxis = new AmCharts.ValueAxis();
|
||
|
|
distanceAxis.title = "distance";
|
||
|
|
distanceAxis.gridAlpha = 0;
|
||
|
|
distanceAxis.position = "right";
|
||
|
|
distanceAxis.inside = true;
|
||
|
|
distanceAxis.unit = "mi";
|
||
|
|
distanceAxis.axisAlpha = 0;
|
||
|
|
distanceAxis.tickLength = 0;
|
||
|
|
chart.addValueAxis(distanceAxis);
|
||
|
|
|
||
|
|
// GRAPHS
|
||
|
|
// duration graph
|
||
|
|
var durationGraph = new AmCharts.AmGraph();
|
||
|
|
durationGraph.title = "duration";
|
||
|
|
durationGraph.valueField = "duration";
|
||
|
|
durationGraph.type = "line";
|
||
|
|
durationGraph.valueAxis = durationAxis; // indicate which axis should be used
|
||
|
|
durationGraph.lineColor = "#CC0000";
|
||
|
|
durationGraph.balloonText = "[[value]]";
|
||
|
|
durationGraph.lineThickness = 1;
|
||
|
|
durationGraph.legendValueText = "[[value]]";
|
||
|
|
durationGraph.bullet = "square";
|
||
|
|
durationGraph.bulletBorderColor = "#CC0000";
|
||
|
|
durationGraph.bulletBorderAlpha = 1;
|
||
|
|
durationGraph.bulletBorderThickness = 1;
|
||
|
|
chart.addGraph(durationGraph);
|
||
|
|
|
||
|
|
// distance graph
|
||
|
|
var distanceGraph = new AmCharts.AmGraph();
|
||
|
|
distanceGraph.valueField = "distance";
|
||
|
|
distanceGraph.title = "distance";
|
||
|
|
distanceGraph.type = "column";
|
||
|
|
distanceGraph.fillAlphas = 0.1;
|
||
|
|
distanceGraph.valueAxis = distanceAxis; // indicate which axis should be used
|
||
|
|
distanceGraph.balloonText = "[[value]] miles";
|
||
|
|
distanceGraph.legendValueText = "[[value]] mi";
|
||
|
|
distanceGraph.legendPeriodValueText = "total: [[value.sum]] mi";
|
||
|
|
distanceGraph.lineColor = "#000000";
|
||
|
|
distanceGraph.lineAlpha = 0;
|
||
|
|
chart.addGraph(distanceGraph);
|
||
|
|
|
||
|
|
// CURSOR
|
||
|
|
var chartCursor = new AmCharts.ChartCursor();
|
||
|
|
chartCursor.zoomable = false;
|
||
|
|
chartCursor.categoryBalloonDateFormat = "DD";
|
||
|
|
chartCursor.cursorAlpha = 0;
|
||
|
|
chartCursor.valueLineEnabled = true;
|
||
|
|
chartCursor.valueLineBalloonEnabled = true;
|
||
|
|
chartCursor.valueLineAxis = distanceAxis;
|
||
|
|
chart.addChartCursor(chartCursor);
|
||
|
|
|
||
|
|
// LEGEND
|
||
|
|
var legend = new AmCharts.AmLegend();
|
||
|
|
legend.bulletType = "round";
|
||
|
|
legend.equalWidths = false;
|
||
|
|
legend.valueWidth = 120;
|
||
|
|
legend.color = "#000000";
|
||
|
|
legend.useGraphSettings = true;
|
||
|
|
chart.addLegend(legend);
|
||
|
|
|
||
|
|
// WRITE
|
||
|
|
chart.write("chartdiv");
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="chartdiv" style="width:100%; height:400px;"></div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|