@@ -24,6 +24,7 @@ A simple and lightweight `VueJS` component for `FusionCharts` JavaScript Chartin
24
24
- [ Working with events] ( #working-with-events )
25
25
- [ Quick Start] ( #quick-start )
26
26
- [ Going Beyond Charts] ( #going-beyond-charts )
27
+ - [ Usage and Integration of FusionTime] ( #usage-and-integration-of-fusionTime )
27
28
- [ For Contributors] ( #for-contributors )
28
29
- [ Licensing] ( #licensing )
29
30
@@ -242,6 +243,87 @@ links to help you get started:
242
243
- [ Chart gallery] ( https://www.fusioncharts.com/explore/chart-gallery )
243
244
- [ FusionCharts API] ( https://www.fusioncharts.com/dev/api/fusioncharts )
244
245
246
+ ## Usage and integration of FusionTime
247
+
248
+ From ` fusioncharts@3.13.3-sr.1 ` and ` vue-fusioncharts@3.0.0 ` , You can visualize timeseries data easily with angular.
249
+
250
+ Learn more about FusionTime [ here] ( https://www.fusioncharts.com/fusiontime ) .
251
+
252
+ ### Sample code for FusionTime
253
+
254
+ ``` js
255
+ import Vue from ' vue' ;
256
+ import VueFusionCharts from ' vue-fusioncharts' ;
257
+ import FusionCharts from ' fusioncharts' ;
258
+ import TimeSeries from ' fusioncharts/fusioncharts.timeseries' ;
259
+
260
+ // register VueFusionCharts
261
+ Vue .use (VueFusionCharts, FusionCharts, TimeSeries);
262
+
263
+ const jsonify = res => res .json ();
264
+ const dataFetch = fetch (
265
+ ' https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/data.json'
266
+ ).then (jsonify);
267
+ const schemaFetch = fetch (
268
+ ' https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/schema.json'
269
+ ).then (jsonify);
270
+
271
+ const chart = new Vue ({
272
+ el: ' #app' ,
273
+ data: {
274
+ width: ' 500' ,
275
+ height: ' 300' ,
276
+ type: ' timeseries' ,
277
+ dataFormat: ' json' ,
278
+ dataSource: {
279
+ caption: { text: ' Online Sales of a SuperStore in the US' },
280
+ data: null ,
281
+ yAxis: [
282
+ {
283
+ plot: [
284
+ {
285
+ value: ' Sales ($)'
286
+ }
287
+ ]
288
+ }
289
+ ]
290
+ }
291
+ },
292
+ mounted : function () {
293
+ Promise .all ([dataFetch, schemaFetch]).then (res => {
294
+ const data = res[0 ];
295
+ const schema = res[1 ];
296
+ const fusionTable = new FusionCharts.DataStore ().createDataTable (
297
+ data,
298
+ schema
299
+ );
300
+ this .dataSource .data = fusionTable;
301
+ });
302
+ }
303
+ });
304
+ ```
305
+
306
+ Here's HTML template for the above example:
307
+
308
+ ``` html
309
+ <div id =" app" >
310
+ <fusioncharts
311
+ :width =" width"
312
+ :height =" height"
313
+ :type =" type"
314
+ :dataFormat =" dataFormat"
315
+ :dataSource =" dataSource"
316
+ >
317
+ FusionCharts will render here...
318
+ </fusioncharts >
319
+ </div >
320
+ ```
321
+
322
+ Useful links for FusionTime
323
+
324
+ - [ How FusionTime works] ( https://www.fusioncharts.com/dev/fusiontime/getting-started/how-fusion-time-works )
325
+ - [ Create your first chart] ( https://www.fusioncharts.com/dev/fusiontime/getting-started/create-your-first-chart-in-fusiontime )
326
+
245
327
## Going beyond Charts
246
328
247
329
- Explore 20+ pre-built business specific dashboards for different industries like energy and manufacturing to business functions like sales, marketing and operations [ here] ( https://www.fusioncharts.com/explore/dashboards ) .
0 commit comments