Skip to content

Commit

Permalink
Merge pull request #92 from fusioncharts/feature/support-2113-migrati…
Browse files Browse the repository at this point in the history 
…on-to-vue3

SUPPORT-2113 | Support for Vue 3 in vue-fusioncharts plugin
  • Loading branch information
@SanjayBhan
SanjayBhan authored Sep 3, 2021
2 parents 135d733 + 2d171a8 commit 0ff6ab4
Show file tree
Hide file tree
Showing 18 changed files with 28,875 additions and 54,008 deletions.
21 changes: 21 additions & 0 deletions LICENSE.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2020 FusionCharts, Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
151 changes: 87 additions & 64 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# vue-fusioncharts

A simple and lightweight `VueJS` component for `FusionCharts` JavaScript Charting Library. The `Vue-FusionCharts` wrapper lets you easily include FusionCharts in your `VueJS` projects.
A simple and lightweight `VueJS`(Vue3) component for `FusionCharts` JavaScript Charting Library. The `Vue-FusionCharts` wrapper lets you easily include FusionCharts in your `VueJS` projects.

## [Demo](https://fusioncharts.github.io/vue-fusioncharts/)

Expand Down Expand Up @@ -65,30 +65,32 @@ Download [`vue-fusioncharts.js`](https://github.com/fusioncharts/vue-fusionchart
There are two ways of adding `vue-fusioncharts` component in your project

**Registering globally as a plugin**
Import `vue`, `vue-fusioncharts` and FusionCharts in main app file.
Import `{ createApp }`, `vue-fusioncharts` and `FusionCharts` in main app file.

```js
import Vue from `vue`;
import { createApp } from 'vue';
import VueFusionCharts from 'vue-fusioncharts';

// import FusionCharts modules and resolve dependency
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
```

Now, register it as plugin in Vue object
After a Vue app has been initialized with createApp(), you can add a plugin to your application by calling the use() method.

```js
Vue.use(VueFusionCharts, FusionCharts, Charts);
const app = createApp(App);

app.use(VueFusionCharts, FusionCharts, Charts);
```

This way is recommended when you want component (`vue-fusioncharts` ) available from everywhere in your app.

**Registering locally in your component**
Import the chart component from `vue-fusioncharts/component` package in your component file and use `Vue.component` to register it locally.
Import the chart component from `vue-fusioncharts/component` package in your component file and use `app.component` to register it locally.

```js
import Vue from `vue`;
import { createApp } from 'vue';
import VueFusionChartsComponent from 'vue-fusioncharts/component';

// import FusionCharts modules and resolve dependency
Expand All @@ -97,14 +99,16 @@ import Charts from 'fusioncharts/fusioncharts.charts';

const vueFusionCharts = VueFusionChartsComponent(FusionCharts, Charts);

Vue.component('fusioncharts', vueFusionCharts);
const app = createApp(App);

app.component('fusioncharts', vueFusionCharts);
```

This way is recommended when you want component (`vue-fusioncharts` ) only in specific components of your app.

Click [here](https://jsfiddle.net/rohitcoolblog/5Lt720a9/) to view the live example.

Where `eventName` can be any fusioncharts event. You can find the list of events at [fusioncharts devcenter](https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events)


## Working with APIs

Expand All @@ -126,21 +130,26 @@ To call APIs we will need the chart object. To get the chart object from the com
Now, we can access the chart object from `this.$refs.fc.chartObj`

```js
var app = new Vue({
el: '#chart',
data: {
type: 'Pie2D',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: myDataSource
var App = {
data() {
return {
type: 'Pie2D',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: myDataSource
}
},
methods: {
onDataPlotRollover: function(e) {
this.$refs.fc.chartObj.slicePlotItem(0);
}
}
});
};
const app = createApp(App);

app.mount('#chart');

```

This example will slice a Pie2d section when you rollover the chart.
Expand All @@ -160,19 +169,18 @@ To attach event listeners to FusionCharts, you can use the `v-on` or `@` operato
>
</fusioncharts>
```
Where `eventName` can be any fusioncharts event. You can find the list of events at [fusioncharts devcenter](https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events)

## Quick Start

Here is a basic sample that shows how to create a chart using `vue-fusioncharts`:

```js
import Vue from 'vue';
import { createApp } from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';

// register VueFusionCharts component
Vue.use(VueFusionCharts, FusionCharts, Charts);

const myDataSource = {
chart: {
Expand Down Expand Up @@ -208,16 +216,24 @@ const myDataSource = {
]
};

const chart = new Vue({
el: '#app',
data: {
type: 'column2d',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: myDataSource
const App = {
data() {
return {
type: 'column2d',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: myDataSource
}
}
});
};

const app = createApp(App);

// register VueFusionCharts component
app.use(VueFusionCharts, FusionCharts, Charts);

app.mount('#app');
```

Here's HTML template for the above example:
Expand Down Expand Up @@ -252,45 +268,44 @@ Learn more about FusionTime [here](https://www.fusioncharts.com/fusiontime).
### Sample code for FusionTime

```js
import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import TimeSeries from 'fusioncharts/fusioncharts.timeseries';
import { createApp } from "vue";

// register VueFusionCharts
Vue.use(VueFusionCharts, FusionCharts, TimeSeries);
import VueFusionCharts from "vue-fusioncharts";
import FusionCharts from "fusioncharts";
import TimeSeries from "fusioncharts/fusioncharts.timeseries";

const jsonify = res => res.json();
const jsonify = (res) => res.json();
const dataFetch = fetch(
'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/data.json'
"https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/data.json"
).then(jsonify);
const schemaFetch = fetch(
'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/schema.json'
"https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/schema.json"
).then(jsonify);

const chart = new Vue({
el: '#app',
data: {
width: '500',
height: '300',
type: 'timeseries',
dataFormat: 'json',
dataSource: {
caption: { text: 'Online Sales of a SuperStore in the US' },
data: null,
yAxis: [
{
plot: [
{
value: 'Sales ($)'
}
]
}
]
}
const App = {
data() {
return {
width: "500",
height: "300",
type: "timeseries",
dataFormat: "json",
dataSource: {
caption: { text: "Online Sales of a SuperStore in the US" },
data: null,
yAxis: [
{
plot: [
{
value: "Sales ($)",
},
],
},
],
},
};
},
mounted: function() {
Promise.all([dataFetch, schemaFetch]).then(res => {
mounted: function () {
Promise.all([dataFetch, schemaFetch]).then((res) => {
const data = res[0];
const schema = res[1];
const fusionTable = new FusionCharts.DataStore().createDataTable(
Expand All @@ -299,8 +314,15 @@ const chart = new Vue({
);
this.dataSource.data = fusionTable;
});
}
});
},
};

const app = createApp(App);

// register VueFusionCharts
app.use(VueFusionCharts, FusionCharts, TimeSeries);

app.mount("#app");
```

Here's HTML template for the above example:
Expand Down Expand Up @@ -337,10 +359,11 @@ Useful links for FusionTime
$ git clone https://github.com/fusioncharts/vue-fusioncharts.git
$ cd vue-fusioncharts
$ npm install
$ npm install fusioncharts --save
```

- Run `npm start` to start the dev server and point your browser at [http://localhost:8080/](http://localhost:8080/).

## Licensing

The FusionCharts Vue component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FusionCharts library in your page separately, which has a [separate license](https://www.fusioncharts.com/buy).
The FusionCharts Vue integration component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FusionCharts library in your page separately, which has a [separate license](https://www.fusioncharts.com/buy).
Loading

0 comments on commit 0ff6ab4

Please sign in to comment.