Skip to content

Commit a9191bb

Browse files
committed
Merge branch 'release/3.0.0'
2 parents 89e7ed6 + 77b71e2 commit a9191bb

15 files changed

+991
-289
lines changed

README.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)