Skip to content

Commit e5bea43

Browse files
rohitkrrohitkr
committed
Merge branch 'release/1.0.0-beta.1'
2 parents dc51bd3 + 01947ed commit e5bea43

18 files changed

+4777
-65
lines changed

‎.babelrc‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"plugins": [
3+
"add-module-exports",
4+
],
5+
"presets": ["es2015"]
6+
}

‎.eslintrc.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
module.exports = {
2+
"env": {
3+
"browser": true,
4+
"es6": true,
5+
"node": true
6+
},
7+
"extends": "eslint:recommended",
8+
"parserOptions": {
9+
"sourceType": "module"
10+
},
11+
"rules": {
12+
"indent": [
13+
"error",
14+
4
15+
],
16+
"linebreak-style": [
17+
"error",
18+
"unix"
19+
],
20+
"quotes": [
21+
"error",
22+
"single"
23+
],
24+
"semi": [
25+
"error",
26+
"always"
27+
]
28+
}
29+
};

‎.gitignore‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Logs
2+
logs
3+
*.log
4+
5+
# Runtime data
6+
pids
7+
*.pid
8+
*.seed
9+
10+
# Coverage tools
11+
lib-cov
12+
coverage
13+
coverage.html
14+
.cover*
15+
16+
# Dependency directory
17+
node_modules
18+
bower_components
19+
20+
# Example build directory
21+
# example/dist
22+
.publish
23+
24+
# Editor and other tmp files
25+
*.swp
26+
*.un~
27+
*.iml
28+
*.ipr
29+
*.iws
30+
*.sublime-*
31+
.idea/
32+
*.DS_Store

‎.npmignore‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Node
2+
node_modules/*
3+
npm-debug.log
4+
5+
# Windows
6+
Thumbs.db
7+
Desktop.ini
8+
9+
# Mac
10+
.DS_Store
11+
**/.DS_Store
12+
13+
# Example files
14+
example/

‎README.md‎

Lines changed: 218 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,238 @@
1-
# Vue FusionCharts
2-
> FusionCharts component for Vue.js
1+
# Vue-FusionCharts
2+
3+
> FusionCharts component for Vue
4+
5+
The Vue-FusionCharts component lets you easily include FusionCharts in your Vue.js projects.
36

47
## Installation
5-
#### yarn
6-
```sh
7-
yarn add vue-fusioncharts
8-
```
9-
#### npm
10-
```sh
8+
9+
### npm
10+
11+
```bash
1112
npm install vue-fusioncharts --save
1213
```
13-
#### cdn
14-
```html
15-
<div id="chart">
16-
<fusioncharts
17-
:type="type"
18-
:data-source="dataSource"
19-
:width="width"
20-
:height="height"
21-
>
22-
</fusioncharts>
23-
</div>
24-
25-
<script type="text/javascript" src="https://unpkg.com/[email protected]"></script>
26-
<script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.js"></script>
27-
<script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.charts.js"></script>
28-
<script src="https://unpkg.com/[email protected]/dist/vue-fusioncharts.min.js"></script>
29-
30-
<script type="text/javascript">
31-
// Pass the VueFusionCharts to `Vue.use` global function
32-
Vue.use(VueFusionCharts.default);
33-
34-
var chart = new Vue({
35-
el: '#chart',
36-
data: {
37-
type: 'Pie2D',
38-
dataSource: {data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]},
39-
width: '600',
40-
height: '300'
41-
}
42-
});
43-
</script>
4414

15+
### yarn
16+
17+
```bash
18+
yarn add vue-fusioncharts
19+
```
20+
21+
### manual
22+
23+
Download [`vue-fusioncharts.js`](https://github.com/fusioncharts/vue-fusioncharts/blob/feature/plugin-development/dist/vue-fusioncharts.js) and include it in the HTML `<script>` tag.
24+
25+
```html
26+
<script src='path/to/vue-fusioncharts/dist/vue-fusioncharts.js' type='text/javascript'></script>
4527
```
4628

4729
## Usage
48-
In order to use this plugin, you need to import `vue`, `vue-fusioncharts` and `fusioncharts` in your application and pass the `VueFusionCharts` component to `Vue.use` global method
30+
31+
### ES6 Modules (Recommended)
32+
4933
```js
50-
// Import the required modules
5134
import Vue from 'vue';
5235
import VueFusionCharts from 'vue-fusioncharts';
53-
// import FusionCharts modules
54-
import FusionCharts from 'fusioncharts';
55-
import Charts from 'fusioncharts/fusioncharts.charts';
56-
import Widgets from 'fusioncharts/fusioncharts.widgets';
57-
58-
// Register `vue-fusioncharts` component by calling the Vue.use() global method
59-
// Also pass the FusionCharts object
60-
Vue.use(VueFusionCharts, {
61-
core: FusionCharts,
62-
modules: [Charts, Widgets]
63-
});
36+
37+
// import FusionCharts modules and resolve dependency
38+
import FusionCharts from 'fusioncharts'
39+
import Charts from 'fusioncharts/fusioncharts.charts'
40+
41+
// resolve charts dependency
42+
Chart(FusionCharts);
43+
44+
// register VueFusionCharts component
45+
Vue.use(VueFusionCharts, FusionCharts);
6446
```
6547

66-
#### Options
67-
`vue-fusioncharts` allows a few custom options:
48+
### CommonJS Modules
49+
6850
```js
69-
Vue.use(VueFusionCharts, FusionCharts, Charts, Widgets)
51+
var Vue = require('vue');
52+
53+
var VueFusionCharts = require('vue-fusioncharts');
54+
55+
// import FusionCharts modules and resolve dependency
56+
var FusionCharts = require('fusioncharts');
57+
var Charts = require('fusioncharts/fusioncharts.charts');
58+
59+
// resolve charts dependency
60+
Charts(FusionCharts);
61+
62+
// register VueFusionCharts component
63+
Vue.use(VueFusionCharts, FusionCharts);
7064
```
7165

72-
#### Render
73-
Create the `Vue` instance and define all configuration required to render FusionCharts.
66+
67+
### AMD
68+
7469
```js
75-
let chart = new Vue({
76-
el: '#pie-chart',
77-
data: {
78-
type: 'Pie2D',
79-
dataSource: {data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]},
80-
width: '600',
81-
height: '300'
82-
}
70+
require.config({
71+
paths: {
72+
'vue': 'path/to/vue',
73+
'vue-fusioncharts': 'path/to/vue-fusioncharts',
74+
'fusioncharts': 'path/to/fusioncharts'
75+
'charts': 'path/to/fusioncharts/fusioncharts.charts'
76+
}
77+
})
78+
79+
require(['vue', 'vue-fusioncharts', 'fusioncharts', 'charts'], function (Vue, VueFusionCharts, FusionCharts, Charts) {
80+
81+
// register VueFusionCharts component
82+
Vue.use(VueFusionCharts, FusionCharts, Charts);
8383
});
8484
```
8585

86+
### Standalone / CDN
87+
If you are not using any bundler, you can refer the file in a script tag. The library will be available in a global object named `VueFusionCharts`.
88+
89+
90+
```html
91+
<head>
92+
<script type="text/javascript" src="https://unpkg.com/[email protected]"></script>
93+
<script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.js"></script>
94+
<script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.charts.js"></script>
95+
<script type="text/javascript" src="https://unpkg.com/vue-fusioncharts/dist/vue-fusioncharts.min.js"></script>
96+
</head>
97+
98+
<body>
99+
<div id='chart'>
100+
<fusioncharts :options="pieChartConfig"></fusioncharts>
101+
<p class="message-box">The value that you have selected is: {{displayValue}} </p>
102+
</div>
103+
104+
<style>
105+
.message-box {
106+
text-align: center;
107+
margin-top: 0px;
108+
background-color: #F5FBFF;
109+
width: 500px;
110+
color: #006BB8;
111+
padding: 5px 10px;
112+
box-sizing: border-box;
113+
border: 1px solid #B8E1FF;
114+
}
115+
</style>
116+
117+
<script>
118+
// Use VueFusionCharts component by calling the Vue.use() global method:
119+
Vue.use(VueFusionCharts);
120+
121+
// bootstrap the demo
122+
var chart = new Vue({
123+
el: '#chart',
124+
data: {
125+
pieChartConfig: {
126+
type: 'Pie2D',
127+
width: '500',
128+
height: '300',
129+
dataFormat: 'json',
130+
dataSource: {
131+
chart: {
132+
caption: 'Vue FusionCharts Sample',
133+
theme: 'fint'
134+
},
135+
data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]
136+
},
137+
displayValue: 'nothing',
138+
events: {
139+
dataplotRollover: function (ev, props) {
140+
chart.displayValue = props.displayValue
141+
}
142+
}
143+
},
144+
displayValue: 'nothing'
145+
}
146+
});
147+
</script>
148+
</body>
149+
```
150+
Click [here](https://jsfiddle.net/rohitcoolblog/5Lt720a9/) to view the live example.
151+
152+
## Register `vue-fusioncharts` component
153+
### Use the `Vue.use` global method to register the component globally
154+
```js
155+
Vue.use(VueFusionCharts, FusionCharts, Charts);
156+
```
157+
### Use the `Vue.component` method to register the component locally
158+
```js
159+
// es6 style
160+
import {FCComponent} from 'vue-fusioncharts'
161+
162+
// CommpnJS
163+
var FCComponent = require('vue-fusioncharts').FCComponent;
164+
165+
Vue.component('fusioncharts', FCComponent);
166+
167+
```
168+
169+
### props
170+
171+
* `options`
172+
173+
The commonly used configurations required to initialize FusionCharts are described in the table below. The complete list of supported configurations can be found in the [FusionCharts API documentation](http://www.fusioncharts.com/dev/api/fusioncharts.html).
174+
175+
<table>
176+
<thead>
177+
<tr>
178+
<th width="20%">Name</th>
179+
<th width="25%">Type</th>
180+
<th width="20%">Default value</th>
181+
<th width="35%">Description</th>
182+
</tr>
183+
</thead>
184+
<tbody>
185+
<tr>
186+
<td>type</td>
187+
<td>String</td>
188+
<td>none</td>
189+
<td>Name of the chart type to be rendered.</td>
190+
</tr>
191+
<tr>
192+
<td>width</td>
193+
<td>String/Number</td>
194+
<td><code>400</code></td>
195+
<td>Width in pixels (for example, <code>640</code>) or percent (for example, <code>50%</code>).</td>
196+
</tr>
197+
<tr>
198+
<td>height</td>
199+
<td>String/Number</td>
200+
<td><code>400</code></td>
201+
<td>Height in pixels (for example, <code>640</code>) or percent (for example, <code>50%</code>).</td>
202+
</tr>
203+
<tr>
204+
<td>id</td>
205+
<td>String</td>
206+
<td><code>chart-object-*</code></td>
207+
<td>Name of the current chart instance, after the chart has been created.</td>
208+
</tr>
209+
<tr>
210+
<td>dataFormat</td>
211+
<td>String</td>
212+
<td><code>JSON</code></td>
213+
<td>Format of the source data, passed to the <code>dataSource</code> attribute. Currently FusionCharts accepts data in the <code>JSON</code> and <code>XML</code> formats.</td>
214+
</tr>
215+
<tr>
216+
<td>dataSource</td>
217+
<td>String/Object</td>
218+
<td><code>none</code></td>
219+
<td>Source data/source of the chart data and the chart configuration. Currently FusionCharts accepts data in the <code>JSON</code> and <code>XML</code> formats.</td>
220+
</tr>
221+
</tbody>
222+
</table>
223+
224+
225+
226+
## Development
227+
* Clone the repository.
228+
* Install dependency.
229+
* Run `npm start` to start the dev server.
230+
* Open `http://localhost:8080/` in your browser.
231+
232+
```sh
233+
$ git clone https://github.com/fusioncharts/vue-fusioncharts.git
234+
$ cd vue-fusioncharts
235+
$ npm install
236+
$ npm start
237+
```
238+

0 commit comments

Comments
 (0)