Subversion Repositories php-qbpwcf

Rev

Rev 23 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
23 liveuser 1
# amCharts Data Loader
2
 
3
Version: 1.0.12
4
 
5
 
6
## Description
7
 
8
By default all amCharts libraries accept data in JSON format. It needs to be 
9
there when the web page loads, defined in-line or loaded via custom code.
10
 
11
This plugin introduces are native wrapper that enables automatic loading of data
12
from external data data sources in CSV and JSON formats.
13
 
14
Most of the times you will just need to provide a URL of the external data 
15
source - static file or dynamically generated - and it will do the rest.
16
 
17
 
18
## Important notice
19
 
20
Due to security measures implemented in most of the browsers, the external data 
21
loader will work only when the page with the chart or map is loaded via web 
22
server.
23
 
24
So, any of the examples loaded locally (file:///) will not work.
25
 
26
The page needs to be loaded via web server (http://) in order to work properly.
27
 
28
Loading data from another domain than the web page is loaded is possible but is 
29
a subject for `Access-Control-Allow-Origin` policies defined by the web server 
30
you are loading data from.
31
 
32
For more about loading data across domains use the following thread:
33
http://stackoverflow.com/questions/1653308/access-control-allow-origin-multiple-origin-domains
34
 
35
 
36
## Usage
37
 
38
### 1) Include the minified version of file of this plugin. I.e.:
39
 
40
```
41
<script src="amcharts/plugins/dataloader/dataloader.min.js" type="text/javascript"></script>
42
```
43
 
44
(this needs to go after all the other amCharts includes)
45
 
46
### 2) Add data source properties to your chart configuration.
47
 
48
Regular (Serial, Pie, etc.) charts:
49
 
50
```
51
AmCharts.makeChart( "chartdiv", {
52
  ...,
53
  "dataLoader": {
54
    "url": "data.json",
55
    "format": "json"
56
  }
57
} );
58
```
59
 
60
Stock chart:
61
 
62
```
63
AmCharts.makeChart( "chartdiv", {
64
  ...,
65
  "dataSets": [{
66
    ...,
67
    "dataLoader": {
68
      "url": "data.csv",
69
      "format": "csv",
70
      "delimiter": ",",       // column separator
71
      "useColumnNames": true, // use first row for column names
72
      "skip": 1               // skip header row
73
    }
74
  }]
75
} );
76
```
77
 
78
That's it. The plugin will make sure the files are loaded and dataProvider is 
79
populated with their content *before* the chart is built.
80
 
81
Some formats, like CSV, will require additional parameters needed to parse the 
82
data, such as "separator".
83
 
84
If the "format" is omitted, the plugin will assume JSON.
85
 
86
 
87
## Complete list of available dataLoader settings
88
 
89
Property | Default | Description
90
-------- | ------- | -----------
91
async | true | If set to false (not recommended) everything will wait until data is fully loaded
92
complete | | Callback function to execute when loader is done
93
delimiter | , | [CSV only] a delimiter for columns (use \t for tab delimiters)
94
error | | Callback function to execute if file load fails
95
format | json | Type of data: json, csv
96
headers | | An array of objects with two properties (key and value) to attach to HTTP request
97
load | | Callback function to execute when file is successfully loaded (might be invoked multiple times)
98
noStyles | false | If set to true no styles will be applied to "Data loading" curtain
99
postProcess | | If set to function reference, that function will be called to "post-process" loaded data before passing it on to chart. The handler function will receive two parameters: loaded data, Data Loader options
100
showErrors | true | Show loading errors in a chart curtain
101
showCurtain | true| Show curtain over the chart area when loading data
102
reload | 0 | Reload data every X seconds
103
reverse | false | [CSV only] add data points in revers order
104
skip | 0 | [CSV only] skip X first rows in data (includes first row if useColumnNames is used)
105
skipEmpty | true | [CSV only] Ignore empty lines in data
106
timestamp | false | Add current timestamp to data URLs (to avoid caching)
107
useColumnNames | false | [CSV only] Use first row in data as column names when parsing
108
 
109
 
110
## Using in JavaScript Stock Chart
111
 
112
In JavaScript Stock Chart it works exactly the same as in other chart types, 
113
with the exception that `dataLoader` is set as a property to the data set 
114
definition. I.e.:
115
 
116
```
117
var chart = AmCharts.makeChart("chartdiv", {
118
  "type": "stock",
119
  ...
120
  "dataSets": [{
121
    "title": "MSFT",
122
      "fieldMappings": [{
123
        "fromField": "Open",
124
        "toField": "open"
125
      }, {
126
        "fromField": "High",
127
        "toField": "high"
128
      }, {
129
        "fromField": "Low",
130
        "toField": "low"
131
      }, {
132
        "fromField": "Close",
133
        "toField": "close"
134
      }, {
135
        "fromField": "Volume",
136
        "toField": "volume"
137
      }],
138
      "compared": false,
139
      "categoryField": "Date",
140
      "dataLoader": {
141
        "url": "data/MSFT.csv",
142
        "format": "csv",
143
        "showCurtain": true,
144
        "showErrors": true,
145
        "async": true,
146
        "reverse": true,
147
        "delimiter": ",",
148
        "useColumnNames": true
149
      }
150
    }
151
  }]
152
});
153
```
154
 
155
### Can I also load event data the same way?
156
 
157
Sure. You just add a `eventDataLoader` object to your data set. All the same 
158
settings apply.
159
 
160
 
161
## Adding custom headers to HTTP requests
162
 
163
If you want to add additional headers to your data load HTTP requests, use
164
"headers" array. Each header is an object with two keys: "key" and "value":
165
 
166
```
167
"dataLoader": {
168
  "url": "data/serial.json",
169
  "format": "json",
170
  "headers": [{
171
    "key": "x-access-token",
172
    "value": "123456789"
173
  }]
174
}
175
```
176
 
177
 
178
## Manually triggering a reload of all data
179
 
180
Once chart is initialized, you can trigger the reload of all data manually by
181
calling `chart.dataLoader.loadData()` function. (replace "chart" with the actual
182
variable that holds reference to your chart object)
183
 
184
## Using callback functions
185
 
186
Data Loader can call your own function when certain event happens, like data
187
loading is complete, error occurs, etc.
188
 
189
To set custom event handlers, use these config options:
190
 
191
* "complete"
192
 
193
Example:
194
 
195
```
196
AmCharts.makeChart( "chartdiv", {
197
  ...,
198
  "dataSets": [{
199
    ...,
200
    "dataLoader": {
201
      "url": "data.json",
202
      "load": function ( options, chart ) {
203
        console.log( 'Loaded file: ' + options.url );
204
      },
205
      "complete": function ( chart ) {
206
        console.log( 'Woohoo! Finished loading' );
207
      },
208
      "error": function ( options, chart ) {
209
        console.log( 'Ummm something went wrong loading this file: ' + options.url );
210
      }
211
    }
212
  }]
213
} );
214
```
215
 
216
## Translating into other languages
217
 
218
Depending on configuration options the plugin will display a small number of 
219
text prompts, like 'Data loading...'.
220
 
221
Plugin will try matching chart's `language` property and display text prompts in 
222
a corresponding language. For that the plugin needs to have the translations.
223
 
224
Some of the plugin translations are in **lang** subdirectory. Simply include the 
225
one you need.
226
 
227
If there is no translation to your language readily available, just grab en.js, 
228
copy it and translate.
229
 
230
The structure is simple:
231
 
232
```
233
'The phrase in English': 'Translation'
234
```
235
 
236
The phrase in English must be left intact.
237
 
238
When you're done, you can include your language as a JavaScript file.
239
 
240
P.S. send us your translation so we can include it for the benefits of other 
241
users. Thanks!
242
 
243
 
244
## Requirements
245
 
246
This plugin requires at least 3.13 version of JavaScript Charts, JavaScript
247
Stock Chart or JavaScript Maps.
248
 
249
 
250
## Demos
251
 
252
They're all in subdirectory /examples.
253
 
254
 
255
## Extending this plugin
256
 
257
You're encouraged to modify, extend and make derivative plugins out of this
258
plugin.
259
 
260
You can modify files, included in this archive or, better yet, fork this project
261
on GitHub:
262
 
263
https://github.com/amcharts/dataloader
264
 
265
We're curious types. Please let us know (contact@amcharts.com) if you do create
266
something new out of this plugin.
267
 
268
 
269
## License
270
 
271
This plugin is licensed under Apache License 2.0.
272
 
273
This basically means you're free to use or modify this plugin, even make your
274
own versions or completely different products out of it.
275
 
276
Please see attached file "license.txt" for the complete license or online here:
277
 
278
http://www.apache.org/licenses/LICENSE-2.0
279
 
280
 
281
## Contact us
282
 
283
* Email:contact@amcharts.com
284
* Web: http://www.amcharts.com/
285
* Facebook: https://www.facebook.com/amcharts
286
* Twitter: https://twitter.com/amcharts
287
 
288
 
289
## Changelog
290
 
291
### 1.0.12
292
* Better default options handling in external calls to AmCharts.loadFile
293
* Fixed the latest version of Stock Chart not resetting to default pre-defined period
294
* New example: Using Data Loader functions externally (map_json_external_function.html)
295
 
296
### 1.0.11
297
* New translation: Added French translation. Thanks Remy!
298
* Tweaks to allow better animation after data load on Pie chart
299
 
300
### 1.0.10
301
* Fixed error related to headers not being set when using standalone data load functions
302
 
303
### 1.0.9
304
* Plugin will now ignore empty CSV lines by default (configurable with `skipEmpty` property)
305
 
306
### 1.0.8
307
* Added `headers` config variable which allows adding custom headers to HTTP requests
308
 
309
### 1.0.7
310
* Fixed an issue with the Pie chart when it is being loaded in inactive tab
311
 
312
### 1.0.6
313
* Added support for Gauge chart (loads `arrows` array)
314
 
315
### 1.0.5
316
* Fixed JS error if periodSelector was not defined in chart config
317
* Now all callback functions (complete, error, load) receive additional parameter: chart
318
* postProcess function will now have "this" context set to Data Loader object as well as receive chart reference as third paramater
319
 
320
### 1.0.4
321
* Added `chart.dataLoader.loadData()` function which can be used to manually trigger all data reload
322
 
323
### 1.0.3
324
* Fixed the bug where defaults were not being applied properly
325
* Fixed the bug with translations not being applied properly
326
* Cleaned up the code (to pass JSHint validation)
327
 
328
### 1.0.2
329
* Fixed the issue with modified Array prototypes
330
 
331
### 1.0.1
332
* Added `complete`, `load` and `error` properties that can be set with function handlers to be invoked on load completion, successful file load or failed load respectively
333
* Fixed language container initialization bug
334
* Fixed bug that was causing parse errors not be displayed
335
 
336
### 1.0
337
* Added GANTT chart support
338
 
339
### 0.9.2
340
* Added global data load methods that can be used to load and parse data by code outside plugin
341
* Trim CSV column names
342
* Translation added: Lithuanian
343
 
344
### 0.9.1
345
* Fix chart animations not playing after asynchronous load
346
 
347
### 0.9
348
* Initial release