Skip to content

Commit 4815e78

Browse files
rohitkrrohitkr
committed
Exporting component object as FCComponent to use vue-fusioncharts locally
- Modify `README.md`
1 parent 69530ca commit 4815e78

File tree

6 files changed

+126
-49
lines changed

6 files changed

+126
-49
lines changed

‎README.md‎

Lines changed: 110 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
# Vue FusionCharts
22
> FusionCharts component for Vue.js
33
4-
## Installation
4+
## Quick Start
5+
### 1. Installing the `vue-fusioncharts` package
56
#### yarn
67
```sh
78
yarn add vue-fusioncharts
@@ -14,76 +15,143 @@ npm install vue-fusioncharts --save
1415
```html
1516
<!-- Minified -->
1617
<script src="https://unpkg.com/vue-fusioncharts/dist/vue-fusioncharts.min.js"></script>
18+
1719
<!-- Source -->
1820
<script src="https://unpkg.com/vue-fusioncharts/dist/vue-fusioncharts.js"></script>
1921

2022
```
23+
Live demo using cdn click [here](https://jsfiddle.net/rohitcoolblog/5Lt720a9/1/)
2124

22-
## Usage
23-
#### Method 1
24-
In order to use this plugin, you need to call `Vue.use` global method and pass `VueFusionCharts` component followed by `FusionCharts` and package-specific dependencies for `FusionCharts`
25-
25+
### 2. Import `vue`, `vue-fusioncharts` and `fusioncharts` module
2626
```js
2727
import Vue from 'vue';
28+
2829
import VueFusionCharts from 'vue-fusioncharts';
30+
2931
// import FusionCharts library
3032
import FusionCharts from 'fusioncharts';
3133
// Import `Charts` module to render a chart belonging to `FusionCharts` package
3234
import Charts from 'fusioncharts/fusioncharts.charts';
3335
// Import `Widgets` module to render a chart belonging to `FusionWidgets` package
3436
import Widgets from 'fusioncharts/fusioncharts.widgets';
3537

36-
// Register `vue-fusioncharts` component by calling the Vue.use() global method
37-
// And pass `VueFusionCharts` as a 1st argument and `FusionCharts` as a 2nd argument
38-
// and then comma separated package-specific dependencies eg Chart and Widgets.
39-
// To render a chart belonging to the Charts package and widgets belong to FusionWidgets package, pass the Charts module
40-
Vue.use(VueFusionCharts, FusionCharts, Charts, Widgets);
4138
```
42-
#### Method 2
43-
Instead of passing `FusionCharts` specific dependency to `Vue.use` global method you can directly pass `FusionCharts` to the specific dependencies
4439

45-
```js
46-
import Vue from 'vue';
47-
import VueFusionCharts from 'vue-fusioncharts';
48-
// import FusionCharts library
49-
import FusionCharts from 'fusioncharts';
50-
// Import `Charts` module to render a chart belonging to `FusionCharts` package
51-
import Charts from 'fusioncharts/fusioncharts.charts';
52-
// Import `Widgets` module to render a chart belonging to `FusionWidgets` package
53-
import Widgets from 'fusioncharts/fusioncharts.widgets';
40+
### 3. Register the plugin:
41+
There are two ways to register the `VueFusionCharts` plugin
5442

55-
Charts(FusionCharts);
56-
Widgets(FusionCharts)
43+
* Method 1
44+
45+
Call `Vue.use` global method and pass `VueFusionCharts`, `FusionCharts` followed by `FusionCharts` modules (`Charts`, `Widgets` etc.)
5746

58-
Vue.use(VueFusionCharts, FusionCharts);
59-
```
60-
To know which chart belongs to which package, refer the [list of charts](http://www.fusioncharts.com/dev/getting-started/list-of-charts.html).
47+
In the example we are using Charts and Widgets only you can pass all FusionCharts modules to `Vue.use` method eg. PowerCharts, Maps
48+
49+
```js
50+
// use the plugin globally
51+
// In this example, we are resolving FusionCharts modules dependency
52+
// by passing all FusionCharts modules as argument to `Vue.use` method
53+
54+
Vue.use(VueFusionCharts, FusionCharts, Charts, Widgets);
55+
```
56+
**or**
57+
58+
```js
59+
// Resolve fusioncharts modules dependency separately
60+
Charts(FusionCharts);
61+
Widgets(FusionCharts);
62+
63+
// use the plugin globally
64+
Vue.use(VueFusionCharts, FusionCharts);
65+
```
66+
67+
* Method 2
68+
69+
Register the plugin using `Vue.component` method
6170

62-
Define the component in your HTML template where you wish to render the chart
71+
In this case we need to resolve `FusionCharts` dependency manually by executing the `Charts` and `Widgets` modules
72+
73+
```js
74+
...
75+
import {FCComponent} from 'vue-fusioncharts';
76+
Charts(FusionCharts);
77+
Widgets(FusionCharts);
78+
79+
// Register the plugin locally
80+
Vue.component(FCComponent.name, FCComponent);
81+
```
82+
83+
### 4. Define the component in your HTML template where you wish to render the chart
6384

6485
```html
65-
<div id="chart1">
66-
<fusioncharts
67-
:type="type"
68-
:data-source="dataSource"
69-
:width="width"
70-
:height="height"
71-
>
72-
</fusioncharts>
86+
<div id="pie-chart-sample">
87+
<fusioncharts :options="options" refs='fusioncharts'></fusioncharts>
7388
</div>
7489
```
7590

76-
Create the `Vue` instance and define all configuration required to render the chart
77-
91+
### 5. Create the Vue instance and define all configuration required to render the chart
7892
```js
7993
let chart = new Vue({
80-
el: '#pie-chart',
94+
el: '#pie-chart-sample',
8195
data: {
82-
type: 'Pie2D',
83-
dataSource: {data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]},
84-
width: '600',
85-
height: '300'
96+
options: {
97+
type: 'Pie2D',
98+
dataSource: {data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]},
99+
width: '600',
100+
height: '300'
101+
}
86102
}
87103
});
88104
```
89105

106+
### Supported `options` props
107+
108+
<table>
109+
<thead>
110+
<tr>
111+
<th width="160">Name</th>
112+
<th width="100">Type</th>
113+
<th width="160">Default value</th>
114+
<th>Description</th>
115+
</tr>
116+
</thead>
117+
<tbody>
118+
<tr>
119+
<td>type</td>
120+
<td>String</td>
121+
<td>none</td>
122+
<td>Name of the chart type to be rendered.</td>
123+
</tr>
124+
<tr>
125+
<td>width</td>
126+
<td>String/Number</td>
127+
<td><code>400</code></td>
128+
<td>Set the width in pixels or percent such as <code>640</code> or <code>'50%'</code>.</td>
129+
</tr>
130+
<tr>
131+
<td>height</td>
132+
<td>String/Number</td>
133+
<td><code>400</code></td>
134+
<td>Set the height in pixels or percent such as <code>640</code> or <code>'50%'</code>.</td>
135+
</tr>
136+
<tr>
137+
<td>id</td>
138+
<td>String</td>
139+
<td><code>chart-object-*</code></td>
140+
<td>This name is used to refer to the current chart instance after the chart has been created.</td>
141+
</tr>
142+
<tr>
143+
<td>dataFormat</td>
144+
<td>String</td>
145+
<td><code>JSON</code></td>
146+
<td>This is the name of the format of data passed to the dataSource option below. Currently, <code>FusionCharts</code> accepts only <code>JSON</code> and <code>XML</code> data.</td>
147+
</tr>
148+
<tr>
149+
<td>dataSource</td>
150+
<td>String/Object</td>
151+
<td><code>none</code></td>
152+
<td>Provide the source of data and configuration of the chart. FusionCharts accepts data in the formats specified in dataFormats.</td>
153+
</tr>
154+
</tbody>
155+
</table>
156+
157+
The complete list of supported props can be found [here](http://www.fusioncharts.com/dev/api/fusioncharts.html)

‎dist/vue-fusioncharts.js‎

Lines changed: 7 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)