257 lines
5.9 KiB
HTML
257 lines
5.9 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
|
|
|
||
|
|
<!-- AmCharts includes -->
|
||
|
|
<script src="../../../AmDebug/lib/amcharts/amcharts.js"></script>
|
||
|
|
<script src="../../../AmDebug/lib/amcharts/serial.js"></script>
|
||
|
|
|
||
|
|
<!-- Export plugin includes and styles -->
|
||
|
|
<script src="../export.js"></script>
|
||
|
|
<link type="text/css" href="../export.css" rel="stylesheet">
|
||
|
|
|
||
|
|
<script src="export.config.advanced.js"></script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
body, html {
|
||
|
|
height: 100%;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
font-size: 11px;
|
||
|
|
font-family: Verdana;
|
||
|
|
}
|
||
|
|
#chartdiv {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
var chart = AmCharts.makeChart( "chartdiv", {
|
||
|
|
"type": "serial",
|
||
|
|
"theme": "light",
|
||
|
|
"legend": {
|
||
|
|
"equalWidths": false,
|
||
|
|
"useGraphSettings": true,
|
||
|
|
"valueAlign": "left",
|
||
|
|
"valueWidth": 120
|
||
|
|
},
|
||
|
|
"dataProvider": [ {
|
||
|
|
"date": "2012-01-01",
|
||
|
|
"distance": 227,
|
||
|
|
"townName": "New York",
|
||
|
|
"townName2": "New York",
|
||
|
|
"townSize": 25,
|
||
|
|
"latitude": 40.71,
|
||
|
|
"duration": 408
|
||
|
|
}, {
|
||
|
|
"date": "2012-01-02",
|
||
|
|
"distance": 371,
|
||
|
|
"townName": "Washington",
|
||
|
|
"townSize": 14,
|
||
|
|
"latitude": 38.89,
|
||
|
|
"duration": 482
|
||
|
|
}, {
|
||
|
|
"date": "2012-01-03",
|
||
|
|
"distance": 433,
|
||
|
|
"townName": "Wilmington",
|
||
|
|
"townSize": 6,
|
||
|
|
"latitude": 34.22,
|
||
|
|
"duration": 562
|
||
|
|
}, {
|
||
|
|
"date": "2012-01-04",
|
||
|
|
"distance": 345,
|
||
|
|
"townName": "Jacksonville",
|
||
|
|
"townSize": 7,
|
||
|
|
"latitude": 30.35,
|
||
|
|
"duration": 379
|
||
|
|
}, {
|
||
|
|
"date": "2012-01-05",
|
||
|
|
"distance": 480,
|
||
|
|
"townName": "Miami",
|
||
|
|
"townName2": "Miami",
|
||
|
|
"townSize": 10,
|
||
|
|
"latitude": 25.83,
|
||
|
|
"duration": 501
|
||
|
|
}, {
|
||
|
|
"date": "2012-01-06",
|
||
|
|
"distance": 386,
|
||
|
|
"townName": "Tallahassee",
|
||
|
|
"townSize": 7,
|
||
|
|
"latitude": 30.46,
|
||
|
|
"duration": 443
|
||
|
|
}, {
|
||
|
|
"date": "2012-01-07",
|
||
|
|
"distance": 348,
|
||
|
|
"townName": "New Orleans",
|
||
|
|
"townSize": 10,
|
||
|
|
"latitude": 29.94,
|
||
|
|
"duration": 405
|
||
|
|
}, {
|
||
|
|
"date": "2012-01-08",
|
||
|
|
"distance": 238,
|
||
|
|
"townName": "Houston",
|
||
|
|
"townName2": "Houston",
|
||
|
|
"townSize": 16,
|
||
|
|
"latitude": 29.76,
|
||
|
|
"duration": 309
|
||
|
|
}, {
|
||
|
|
"date": "2012-01-09",
|
||
|
|
"distance": 218,
|
||
|
|
"townName": "Dalas",
|
||
|
|
"townSize": 17,
|
||
|
|
"latitude": 32.8,
|
||
|
|
"duration": 287
|
||
|
|
}, {
|
||
|
|
"date": "2012-01-10",
|
||
|
|
"distance": 349,
|
||
|
|
"townName": "Oklahoma City",
|
||
|
|
"townSize": 11,
|
||
|
|
"latitude": 35.49,
|
||
|
|
"duration": 485
|
||
|
|
}, {
|
||
|
|
"date": "2012-01-11",
|
||
|
|
"distance": 603,
|
||
|
|
"townName": "Kansas City",
|
||
|
|
"townSize": 10,
|
||
|
|
"latitude": 39.1,
|
||
|
|
"duration": 890
|
||
|
|
}, {
|
||
|
|
"date": "2012-01-12",
|
||
|
|
"distance": 534,
|
||
|
|
"townName": "Denver",
|
||
|
|
"townName2": "Denver",
|
||
|
|
"townSize": 18,
|
||
|
|
"latitude": 39.74,
|
||
|
|
"duration": 810
|
||
|
|
}, {
|
||
|
|
"date": "2012-01-13",
|
||
|
|
"townName": "Salt Lake City",
|
||
|
|
"townSize": 12,
|
||
|
|
"distance": 425,
|
||
|
|
"duration": 670,
|
||
|
|
"latitude": 40.75,
|
||
|
|
"dashLength": 8,
|
||
|
|
"alpha": 0.4
|
||
|
|
}, {
|
||
|
|
"date": "2012-01-14",
|
||
|
|
"latitude": 36.1,
|
||
|
|
"duration": 470,
|
||
|
|
"townName": "Las Vegas",
|
||
|
|
"townName2": "Las Vegas"
|
||
|
|
}, {
|
||
|
|
"date": "2012-01-15"
|
||
|
|
}, {
|
||
|
|
"date": "2012-01-16"
|
||
|
|
}, {
|
||
|
|
"date": "2012-01-17"
|
||
|
|
}, {
|
||
|
|
"date": "2012-01-18"
|
||
|
|
}, {
|
||
|
|
"date": "2012-01-19"
|
||
|
|
} ],
|
||
|
|
"valueAxes": [ {
|
||
|
|
"id": "distanceAxis",
|
||
|
|
"axisAlpha": 0,
|
||
|
|
"gridAlpha": 0,
|
||
|
|
"position": "left",
|
||
|
|
"title": "distance"
|
||
|
|
}, {
|
||
|
|
"id": "latitudeAxis",
|
||
|
|
"axisAlpha": 0,
|
||
|
|
"gridAlpha": 0,
|
||
|
|
"labelsEnabled": false,
|
||
|
|
"position": "right"
|
||
|
|
}, {
|
||
|
|
"id": "durationAxis",
|
||
|
|
"duration": "mm",
|
||
|
|
"durationUnits": {
|
||
|
|
"hh": "h ",
|
||
|
|
"mm": "min"
|
||
|
|
},
|
||
|
|
"axisAlpha": 0,
|
||
|
|
"gridAlpha": 0,
|
||
|
|
"inside": true,
|
||
|
|
"position": "right",
|
||
|
|
"title": "duration"
|
||
|
|
} ],
|
||
|
|
"graphs": [ {
|
||
|
|
"alphaField": "alpha",
|
||
|
|
"balloonText": "[[value]] miles",
|
||
|
|
"dashLengthField": "dashLength",
|
||
|
|
"fillAlphas": 0.7,
|
||
|
|
"legendPeriodValueText": "total: [[value.sum]] mi",
|
||
|
|
"legendValueText": "[[value]] mi",
|
||
|
|
"title": "distance",
|
||
|
|
"type": "column",
|
||
|
|
"valueField": "distance",
|
||
|
|
"valueAxis": "distanceAxis"
|
||
|
|
}, {
|
||
|
|
"balloonText": "latitude:[[value]]",
|
||
|
|
"bullet": "round",
|
||
|
|
"bulletBorderAlpha": 1,
|
||
|
|
"useLineColorForBulletBorder": true,
|
||
|
|
"bulletColor": "#FFFFFF",
|
||
|
|
"bulletSizeField": "townSize",
|
||
|
|
"dashLengthField": "dashLength",
|
||
|
|
"descriptionField": "townName",
|
||
|
|
"labelPosition": "right",
|
||
|
|
"labelText": "[[townName2]]",
|
||
|
|
"legendValueText": "[[description]]/[[value]]",
|
||
|
|
"title": "latitude/city",
|
||
|
|
"fillAlphas": 0,
|
||
|
|
"valueField": "latitude",
|
||
|
|
"valueAxis": "latitudeAxis"
|
||
|
|
}, {
|
||
|
|
"bullet": "square",
|
||
|
|
"bulletBorderAlpha": 1,
|
||
|
|
"bulletBorderThickness": 1,
|
||
|
|
"dashLengthField": "dashLength",
|
||
|
|
"legendValueText": "[[value]]",
|
||
|
|
"title": "duration",
|
||
|
|
"fillAlphas": 0,
|
||
|
|
"valueField": "duration",
|
||
|
|
"valueAxis": "durationAxis"
|
||
|
|
} ],
|
||
|
|
"chartCursor": {
|
||
|
|
"categoryBalloonDateFormat": "DD",
|
||
|
|
"cursorAlpha": 0.1,
|
||
|
|
"cursorColor": "#000000",
|
||
|
|
"fullWidth": true,
|
||
|
|
"valueBalloonsEnabled": false,
|
||
|
|
"zoomable": false
|
||
|
|
},
|
||
|
|
"dataDateFormat": "YYYY-MM-DD",
|
||
|
|
"categoryField": "date",
|
||
|
|
"categoryAxis": {
|
||
|
|
"dateFormats": [ {
|
||
|
|
"period": "DD",
|
||
|
|
"format": "DD"
|
||
|
|
}, {
|
||
|
|
"period": "WW",
|
||
|
|
"format": "MMM DD"
|
||
|
|
}, {
|
||
|
|
"period": "MM",
|
||
|
|
"format": "MMM"
|
||
|
|
}, {
|
||
|
|
"period": "YYYY",
|
||
|
|
"format": "YYYY"
|
||
|
|
} ],
|
||
|
|
"parseDates": true,
|
||
|
|
"autoGridCount": false,
|
||
|
|
"axisColor": "#555555",
|
||
|
|
"gridAlpha": 0.1,
|
||
|
|
"gridColor": "#FFFFFF",
|
||
|
|
"gridCount": 50
|
||
|
|
},
|
||
|
|
"export": AmCharts.exportCFG
|
||
|
|
} );
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="chartdiv"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|