_JSON_lineWithScrollAndZoom.html
4.07 KB
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>