Blame view

samples/lineWithMultipleValueAxes.html 6.78 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
  <!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 chart;
             var chartData = [];
  
             AmCharts.ready(function () {
                 // generate some random data first
                 generateChartData();
  
                 // SERIAL CHART
                 chart = new AmCharts.AmSerialChart();
                 chart.pathToImages = "../amcharts/images/";
                 chart.dataProvider = chartData;
                 chart.categoryField = "date";
  
                 // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
                 chart.addListener("dataUpdated", zoomChart);
  
                 // AXES
                 // category
                 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.minorGridEnabled = true;
                 categoryAxis.axisColor = "#DADADA";
                 categoryAxis.twoLineMode = true;
                 categoryAxis.dateFormats = [{
                      period: 'fff',
                      format: 'JJ:NN:SS'
                  }, {
                      period: 'ss',
                      format: 'JJ:NN:SS'
                  }, {
                      period: 'mm',
                      format: 'JJ:NN'
                  }, {
                      period: 'hh',
                      format: 'JJ:NN'
                  }, {
                      period: 'DD',
                      format: 'DD'
                  }, {
                      period: 'WW',
                      format: 'DD'
                  }, {
                      period: 'MM',
                      format: 'MMM'
                  }, {
                      period: 'YYYY',
                      format: 'YYYY'
                  }];
  
                 // first value axis (on the left)
                 var valueAxis1 = new AmCharts.ValueAxis();
                 valueAxis1.axisColor = "#FF6600";
                 valueAxis1.axisThickness = 2;
                 valueAxis1.gridAlpha = 0;
                 chart.addValueAxis(valueAxis1);
  
                 // second value axis (on the right)
                 var valueAxis2 = new AmCharts.ValueAxis();
                 valueAxis2.position = "right"; // this line makes the axis to appear on the right
                 valueAxis2.axisColor = "#FCD202";
                 valueAxis2.gridAlpha = 0;
                 valueAxis2.axisThickness = 2;
                 chart.addValueAxis(valueAxis2);
  
                 // third value axis (on the left, detached)
                 valueAxis3 = new AmCharts.ValueAxis();
                 valueAxis3.offset = 50; // this line makes the axis to appear detached from plot area
                 valueAxis3.gridAlpha = 0;
                 valueAxis3.axisColor = "#B0DE09";
                 valueAxis3.axisThickness = 2;
                 chart.addValueAxis(valueAxis3);
  
                 // GRAPHS
                 // first graph
                 var graph1 = new AmCharts.AmGraph();
                 graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used
                 graph1.title = "red line";
                 graph1.valueField = "visits";
                 graph1.bullet = "round";
                 graph1.hideBulletsCount = 30;
                 graph1.bulletBorderThickness = 1;
                 chart.addGraph(graph1);
  
                 // second graph
                 var graph2 = new AmCharts.AmGraph();
                 graph2.valueAxis = valueAxis2; // we have to indicate which value axis should be used
                 graph2.title = "yellow line";
                 graph2.valueField = "hits";
                 graph2.bullet = "square";
                 graph2.hideBulletsCount = 30;
                 graph2.bulletBorderThickness = 1;
                 chart.addGraph(graph2);
  
                 // third graph
                 var graph3 = new AmCharts.AmGraph();
                 graph3.valueAxis = valueAxis3; // we have to indicate which value axis should be used
                 graph3.valueField = "views";
                 graph3.title = "green line";
                 graph3.bullet = "triangleUp";
                 graph3.hideBulletsCount = 30;
                 graph3.bulletBorderThickness = 1;
                 chart.addGraph(graph3);
  
                 // CURSOR
                 var chartCursor = new AmCharts.ChartCursor();
                 chartCursor.cursorAlpha = 0.1;
                 chartCursor.fullWidth = true;
                 chart.addChartCursor(chartCursor);
  
                 // SCROLLBAR
                 var chartScrollbar = new AmCharts.ChartScrollbar();
                 chart.addChartScrollbar(chartScrollbar);
  
                 // LEGEND
                 var legend = new AmCharts.AmLegend();
                 legend.marginLeft = 110;
                 legend.useGraphSettings = true;
                 chart.addLegend(legend);
  
                 // WRITE
                 chart.write("chartdiv");
             });
  
             // generate some random data, quite different range
             function generateChartData() {
                 var firstDate = new Date();
                 firstDate.setDate(firstDate.getDate() - 50);
  
                 for (var i = 0; i < 50; 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) + 100;
                     var hits = Math.round(Math.random() * 80) + 500;
                     var views = Math.round(Math.random() * 6000);
  
                     chartData.push({
                         date: newDate,
                         visits: visits,
                         hits: hits,
                         views: views
                     });
                 }
             }
  
             // 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(10, 20);
             }
          </script>
      </head>
  
      <body>
          <div id="chartdiv" style="width: 100%; height: 400px;"></div>
      </body>
  
  </html>