Blame view

samples/_JSON_lineWithTrendLines.html 4.93 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
  <!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">
  
              AmCharts.makeChart("chartdiv", {
  
                  type: "serial",
                  dataProvider: [{
                      "date": "2012-01-01",
                          "value": 8
                  }, {
                      "date": "2012-01-01",
                          "value": 8
                  }, {
                      "date": "2012-01-02",
                          "value": 10
                  }, {
                      "date": "2012-01-03",
                          "value": 12
                  }, {
                      "date": "2012-01-04",
                          "value": 14
                  }, {
                      "date": "2012-01-05",
                          "value": 11
                  }, {
                      "date": "2012-01-06",
                          "value": 6
                  }, {
                      "date": "2012-01-07",
                          "value": 7
                  }, {
                      "date": "2012-01-08",
                          "value": 9
                  }, {
                      "date": "2012-01-09",
                          "value": 13
                  }, {
                      "date": "2012-01-10",
                          "value": 15
                  }, {
                      "date": "2012-01-11",
                          "value": 19
                  }, {
                      "date": "2012-01-12",
                          "value": 21
                  }, {
                      "date": "2012-01-13",
                          "value": 22
                  }, {
                      "date": "2012-01-14",
                          "value": 20
                  }, {
                      "date": "2012-01-15",
                          "value": 18
                  }, {
                      "date": "2012-01-16",
                          "value": 14
                  }, {
                      "date": "2012-01-17",
                          "value": 16
                  }, {
                      "date": "2012-01-18",
                          "value": 18
                  }, {
                      "date": "2012-01-19",
                          "value": 17
                  }, {
                      "date": "2012-01-20",
                          "value": 15
                  }, {
                      "date": "2012-01-21",
                          "value": 12
                  }, {
                      "date": "2012-01-22",
                          "value": 10
                  }, {
                      "date": "2012-01-23",
                          "value": 8
                  }],
  
                  pathToImages: "../amcharts/images/",
  
                  dataDateFormat: "YYYY-MM-DD",
                  categoryField: "date",
  
  
                  categoryAxis: {
                      parseDates: true,
                      minPeriod: "DD",
                      gridAlpha: 0.1,
                      minorGridAlpha: 0.1,
                      axisAlpha: 0,
                      minorGridEnabled: true,
                      inside: true
                  },
  
                  valueAxes: [{
  
                      tickLength: 0,
                      axisAlpha: 0,
                      showFirstLabel: false,
                      showLastLabel: false,
  
                      guides: [{
                          value: 10,
                          toValue: 20,
                          fillColor: "#00CC00",
                          inside: true,
                          fillAlpha: 0.2,
                          lineAlpha: 0
                      }]
  
                  }],
  
  
                  graphs: [{
                      lineColor: "#00CC00",
                      valueField: "value",
                      dashLength: 3,
                      bullet: "round",
                      balloonText: "[[category]]<br><b><span style='font-size:14px;'>value:[[value]]</span></b>"
                  }],
  
                  chartCursor: {},
                  chartScrollbar: {},
  
                  mouseWheelZoomEnabled:true,
  
                  trendLines: [{
                      initialDate: new Date(2012, 0, 2, 12),
                      finalDate: new Date(2012, 0, 11, 12),
                      initialValue: 10,
                      finalValue: 19,
                      lineColor: "#CC0000"
                  },
                  {
                      initialDate: new Date(2012, 0, 17, 12),
                      finalDate: new Date(2012, 0, 22, 12),
                      initialValue: 16,
                      finalValue: 10,
                      lineColor: "#CC0000"
                  }]
              });
          </script>
      </head>
  
      <body>
          <div id="chartdiv" style="width: 100%; height: 400px;"></div>
      </body>
  
  </html>