Blame view

samples/_JSON_lineWithScrollAndZoom.html 4.07 KB
eed3c9f67   tom200e   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>