Skip to content

Commit deb9684

Browse files
rohitkrrohitkr
committed
Improved README.md
- Modify example to use the source file instead of build files
1 parent 4815e78 commit deb9684

File tree

9 files changed

+241
-159
lines changed

9 files changed

+241
-159
lines changed

‎README.md‎

Lines changed: 208 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,157 +1,239 @@
1-
# Vue FusionCharts
2-
> FusionCharts component for Vue.js
1+
# Vue-FusionCharts
32

4-
## Quick Start
5-
### 1. Installing the `vue-fusioncharts` package
6-
#### yarn
7-
```sh
8-
yarn add vue-fusioncharts
9-
```
10-
#### npm
11-
```sh
3+
> FusionCharts component for Vue
4+
5+
This component allows to easily insert `FusionCharts` to your `Vue.js` projects and works in the `Vue.js` Way.
6+
7+
## Installation
8+
9+
### npm
10+
11+
```bash
1212
npm install vue-fusioncharts --save
1313
```
14-
#### cdn
15-
```html
16-
<!-- Minified -->
17-
<script src="https://unpkg.com/vue-fusioncharts/dist/vue-fusioncharts.min.js"></script>
1814

19-
<!-- Source -->
20-
<script src="https://unpkg.com/vue-fusioncharts/dist/vue-fusioncharts.js"></script>
15+
### yarn
2116

17+
```bash
18+
yarn add vue-fusioncharts
2219
```
23-
Live demo using cdn click [here](https://jsfiddle.net/rohitcoolblog/5Lt720a9/1/)
2420

25-
### 2. Import `vue`, `vue-fusioncharts` and `fusioncharts` module
21+
### manual
22+
23+
Download [`vue-fusioncharts.js`](https://github.com/fusioncharts/vue-fusioncharts/blob/feature/plugin-development/dist/vue-fusioncharts.js) and include in your HTML `<script>` tag.
24+
25+
```html
26+
<script src='path/to/vue-fusioncharts/dist/vue-fusioncharts.js' type='text/javascript'></script>
27+
```
28+
29+
## Usage
30+
31+
### ES6 Modules (Recommended)
32+
2633
```js
2734
import Vue from 'vue';
28-
2935
import VueFusionCharts from 'vue-fusioncharts';
3036

31-
// import FusionCharts library
32-
import FusionCharts from 'fusioncharts';
33-
// Import `Charts` module to render a chart belonging to `FusionCharts` package
34-
import Charts from 'fusioncharts/fusioncharts.charts';
35-
// Import `Widgets` module to render a chart belonging to `FusionWidgets` package
36-
import Widgets from 'fusioncharts/fusioncharts.widgets';
37-
38-
```
37+
// import FusionCharts modules and resolve dependency
38+
import FusionCharts from 'fusioncharts'
39+
import Charts from 'fusioncharts/fusioncharts.charts'
3940

40-
### 3. Register the plugin:
41-
There are two ways to register the `VueFusionCharts` plugin
41+
// resolve charts dependency
42+
Chart(FusionCharts);
4243

43-
* Method 1
44-
45-
Call `Vue.use` global method and pass `VueFusionCharts`, `FusionCharts` followed by `FusionCharts` modules (`Charts`, `Widgets` etc.)
44+
// register VueFusionCharts component
45+
Vue.use(VueFusionCharts, FusionCharts);
46+
```
4647

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+
### CommonJS Modules
4849

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
50+
```js
51+
var Vue = require('vue');
5352

54-
Vue.use(VueFusionCharts, FusionCharts, Charts, Widgets);
55-
```
56-
**or**
53+
// require the UMD module
54+
var VueFusionCharts = require('vue-fusioncharts');
5755

58-
```js
59-
// Resolve fusioncharts modules dependency separately
60-
Charts(FusionCharts);
61-
Widgets(FusionCharts);
56+
// import FusionCharts modules and resolve dependency
57+
var FusionCharts = require('fusioncharts');
58+
var Charts = require('fusioncharts/fusioncharts.charts');
6259

63-
// use the plugin globally
64-
Vue.use(VueFusionCharts, FusionCharts);
65-
```
60+
// resolve charts dependency
61+
Charts(FusionCharts);
6662

67-
* Method 2
63+
// register VueFusionCharts component
64+
Vue.use(VueFusionCharts, FusionCharts);
65+
```
6866

69-
Register the plugin using `Vue.component` method
7067

71-
In this case we need to resolve `FusionCharts` dependency manually by executing the `Charts` and `Widgets` modules
68+
### AMD
7269

73-
```js
74-
...
75-
import {FCComponent} from 'vue-fusioncharts';
76-
Charts(FusionCharts);
77-
Widgets(FusionCharts);
70+
```js
71+
require.config({
72+
paths: {
73+
'vue': 'path/to/vue',
74+
'vue-fusioncharts': 'path/to/vue-fusioncharts',
75+
'fusioncharts': 'path/to/fusioncharts'
76+
'charts': 'path/to/fusioncharts/fusioncharts.charts'
77+
}
78+
})
79+
80+
require(['vue', 'vue-fusioncharts', 'fusioncharts', 'charts'], function (Vue, VueFusionCharts, FusionCharts, Charts) {
81+
82+
// register VueFusionCharts component
83+
Vue.use(VueFusionCharts, FusionCharts, Charts);
84+
});
85+
```
7886

79-
// Register the plugin locally
80-
Vue.component(FCComponent.name, FCComponent);
81-
```
87+
### Standalone / CDN
88+
If you are not using any bundler. You can just reference the file in a script tag. The library will be available in a global object named `VueFusionCharts`.
8289

83-
### 4. Define the component in your HTML template where you wish to render the chart
8490

8591
```html
86-
<div id="pie-chart-sample">
87-
<fusioncharts :options="options" refs='fusioncharts'></fusioncharts>
88-
</div>
92+
<head>
93+
<script type="text/javascript" src="https://unpkg.com/vue@2.3.3"></script>
94+
<script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.js"></script>
95+
<script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.charts.js"></script>
96+
<script type="text/javascript" src="https://unpkg.com/vue-fusioncharts/dist/vue-fusioncharts.min.js"></script>
97+
</head>
98+
99+
<body>
100+
<div id='chart'>
101+
<fusioncharts :options="pieChartConfig"></fusioncharts>
102+
<p class="message-box">The value that you have selected is: {{displayValue}} </p>
103+
</div>
104+
105+
<style>
106+
.message-box {
107+
text-align: center;
108+
margin-top: 0px;
109+
background-color: #F5FBFF;
110+
width: 500px;
111+
color: #006BB8;
112+
padding: 5px 10px;
113+
box-sizing: border-box;
114+
border: 1px solid #B8E1FF;
115+
}
116+
</style>
117+
118+
<script>
119+
// Use VueFusionCharts component by calling the Vue.use() global method:
120+
Vue.use(VueFusionCharts);
121+
122+
// bootstrap the demo
123+
var chart = new Vue({
124+
el: '#chart',
125+
data: {
126+
pieChartConfig: {
127+
type: 'Pie2D',
128+
width: '500',
129+
height: '300',
130+
dataFormat: 'json',
131+
dataSource: {
132+
chart: {
133+
caption: 'Vue FusionCharts Sample',
134+
theme: 'fint'
135+
},
136+
data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]
137+
},
138+
displayValue: 'nothing',
139+
events: {
140+
dataplotRollover: function (ev, props) {
141+
chart.displayValue = props.displayValue
142+
}
143+
}
144+
},
145+
displayValue: 'nothing'
146+
}
147+
});
148+
</script>
149+
</body>
89150
```
151+
See this examples live, click [here](https://jsfiddle.net/rohitcoolblog/5Lt720a9/).
90152

91-
### 5. Create the Vue instance and define all configuration required to render the chart
153+
## Register `vue-fusioncharts` component
154+
### Using `Vue.use` global method to register the component globally
92155
```js
93-
let chart = new Vue({
94-
el: '#pie-chart-sample',
95-
data: {
96-
options: {
97-
type: 'Pie2D',
98-
dataSource: {data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]},
99-
width: '600',
100-
height: '300'
101-
}
102-
}
103-
});
156+
Vue.use(VueFusionCharts, FusionCharts, Charts);
157+
```
158+
### Using `Vue.component` method to register the component locally
159+
```js
160+
// es6 style
161+
import {FCComponent} from 'vue-fusioncharts'
162+
163+
// CommpnJS
164+
var FCComponent = require('vue-fusioncharts').FCComponent;
165+
166+
Vue.component('fusioncharts', FCComponent);
167+
168+
```
169+
170+
### props
171+
172+
* `options`
173+
174+
Configuration needed to initialize FusionCharts. The complete list of supported configuration option can be found on [FusionCharts' API documentation](http://www.fusioncharts.com/dev/api/fusioncharts.html).
175+
176+
<table>
177+
<thead>
178+
<tr>
179+
<th width="20%">Name</th>
180+
<th width="25%">Type</th>
181+
<th width="20%">Default value</th>
182+
<th width="35%">Description</th>
183+
</tr>
184+
</thead>
185+
<tbody>
186+
<tr>
187+
<td>type</td>
188+
<td>String</td>
189+
<td>none</td>
190+
<td>Name of the chart type to be rendered.</td>
191+
</tr>
192+
<tr>
193+
<td>width</td>
194+
<td>String/Number</td>
195+
<td><code>400</code></td>
196+
<td>Set the width in pixels or percent such as <code>640</code> or <code>'50%'</code>.</td>
197+
</tr>
198+
<tr>
199+
<td>height</td>
200+
<td>String/Number</td>
201+
<td><code>400</code></td>
202+
<td>Set the height in pixels or percent such as <code>640</code> or <code>'50%'</code>.</td>
203+
</tr>
204+
<tr>
205+
<td>id</td>
206+
<td>String</td>
207+
<td><code>chart-object-*</code></td>
208+
<td>This name is used to refer to the current chart instance after the chart has been created.</td>
209+
</tr>
210+
<tr>
211+
<td>dataFormat</td>
212+
<td>String</td>
213+
<td><code>JSON</code></td>
214+
<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>
215+
</tr>
216+
<tr>
217+
<td>dataSource</td>
218+
<td>String/Object</td>
219+
<td><code>none</code></td>
220+
<td>Provide the source of data and configuration of the chart. FusionCharts accepts data in the formats specified in dataFormats.</td>
221+
</tr>
222+
</tbody>
223+
</table>
224+
225+
226+
227+
## Development
228+
* Clone the repository
229+
* Install dependency
230+
* Run `npm start` to start the dev server
231+
* Open `http://localhost:8080/` in your browser
232+
233+
```bash
234+
$ git clone https://github.com/fusioncharts/vue-fusioncharts.git
235+
$ cd vue-fusioncharts
236+
$ npm install
237+
$ npm start
104238
```
105239

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: 3 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-fusioncharts.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)