@@ -24,6 +24,7 @@ A simple and lightweight `VueJS` component for `FusionCharts` JavaScript Chartin
2424 - [ Working with events] ( #working-with-events )
2525- [ Quick Start] ( #quick-start )
2626- [ Going Beyond Charts] ( #going-beyond-charts )
27+ - [ Usage and Integration of FusionTime] ( #usage-and-integration-of-fusionTime )
2728- [ For Contributors] ( #for-contributors )
2829- [ Licensing] ( #licensing )
2930
@@ -242,6 +243,87 @@ links to help you get started:
242243- [ Chart gallery] ( https://www.fusioncharts.com/explore/chart-gallery )
243244- [ FusionCharts API] ( https://www.fusioncharts.com/dev/api/fusioncharts )
244245
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+
245327## Going beyond Charts
246328
247329- 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