Blame view
samples/_JSON_lineWithScrollAndZoom.html
4.07 KB
eed3c9f67
first file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
<!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 type="text/javascript">
var chartData = [];
generateChartData();
var chart = AmCharts.makeChart("chartdiv", {
type: "serial",
pathToImages: "../amcharts/images/",
dataProvider: chartData,
categoryField: "date",
categoryAxis: {
parseDates: true,
gridAlpha: 0.15,
minorGridEnabled: true,
axisColor: "#DADADA"
},
valueAxes: [{
axisAlpha: 0.2,
id: "v1"
}],
graphs: [{
title: "red line",
id: "g1",
valueAxis: "v1",
valueField: "visits",
bullet: "round",
bulletBorderColor: "#FFFFFF",
bulletBorderAlpha: 1,
lineThickness: 2,
lineColor: "#b5030d",
negativeLineColor: "#0352b5",
balloonText: "[[category]]<br><b><span style='font-size:14px;'>value: [[value]]</span></b>"
}],
chartCursor: {
fullWidth:true,
cursorAlpha:0.1
},
chartScrollbar: {
scrollbarHeight: 40,
color: "#FFFFFF",
autoGridCount: true,
graph: "g1"
},
mouseWheelZoomEnabled:true
});
chart.addListener("dataUpdated", zoomChart);
// generate some random data, quite different range
function generateChartData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 500);
for (var i = 0; i < 500; i++) {
// we create date objects here. In your data, you can have date strings
// and then set format of your dates using chart.dataDateFormat property,
// however when possible, use date objects, as this will speed up chart rendering.
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var visits = Math.round(Math.random() * 40) - 20;
chartData.push({
date: newDate,
visits: visits
});
}
}
// this method is called when chart is first inited as we listen for "dataUpdated" event
function zoomChart() {
// different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
}
// changes cursor mode from pan to select
function setPanSelect() {
var chartCursor = chart.chartCursor;
if (document.getElementById("rb1").checked) {
chartCursor.pan = false;
chartCursor.zoomable = true;
} else {
chartCursor.pan = true;
}
chart.validateNow();
}
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
<div style="margin-left:35px;">
<input type="radio" checked="true" name="group" id="rb1" onclick="setPanSelect()">Select
<input type="radio" name="group" id="rb2" onclick="setPanSelect()">Pan
</div>
</body>
</html>
|