vue-graph

A vue component library based on the JUI charts available in vuejs.

Installation

NPM

npm install --save vue-graph

Browser

Just download dist/vue-graph.js and include it in your HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://cdn.rawgit.com/juijs/vue-graph/2216ae2f/dist/vue-graph.js"></script>

ES Modules

Plug-In

import Vue from 'vue'
import VueGraph from 'vue-graph'

Vue.use(VueGraph)

Components

import Vue from 'vue'
import GraphLine3D from 'vue-graph/src/components/line3d.js'
import NoteWidget from 'vue-graph/src/widgets/note.js'
import LegendWidget from 'vue-graph/src/widgets/legends.js'

Vue.component(GraphLine3D.name, GraphLine3D);
Vue.component(NoteWidget.name, NoteWidget);
Vue.component(LegendWidget.name, LegendWidget);

Usage

Unlike other chart components, vue-graph have child nodes in the chart called widgets. The widget is used as an additional function of charts such as chart title, legend, tooltip.

The following is a link you can test with CodePen.

<div id="app">
    <graph-treemap
            :width="800"
            :height="800"
            :text-align="'right'"
            :text-vertical-align="'bottom'"
            :colors="[ '#EC2500', '#ECE100', '#EC9800', '#9EDE00' ]"
            :values="values">
        <note :text="'Treemap Chart'" :align="'left'"></note>
        <tooltip :position="'top'"></tooltip>
    </graph-treemap>
</div>

In the following code, the chart is prefixed with 'graph-' for each type. The widget can be added as a child node of the chart, unlike a chart, was named without a prefix.

The vue-graph can be combined with charts and widgets for a variety of visualizations. This is a very flexible and scalable structure.

var vm = new Vue({
    el: "#app",
    data: {
        values: [
            [ '0', 'Apples', -1 ],
            [ '0.0', 'Anne', 5 ],
            [ '0.1', 'Rick', 3 ],
            [ '0.2', 'Peter', 4 ],
            [ '1', 'Bananas', -1 ],
            [ '1.0', 'Anne', 4 ],
            [ '1.1', 'Rick', 10 ],
            [ '1.2', 'Peter', 1 ],
            [ '2', 'Oranges', -1 ],
            [ '2.0', 'Anne', 1 ],
            [ '2.1', 'Rick', 3 ],
            [ '2.2', 'Peter', 3 ],
            [ '3', 'Susanne', 2 ],
        ]
    }
});

Implemented chart list

There are many charts that have not yet been migrated. We are going to continue.

• Bar Chart
• Bar Chart (Reverse)
• Comparison Bar Chart
• Stack Bar Chart
• Stack Bar Chart (Reverse)
• Stack Bar Chart (Full Mode)
• Range Bar Chart
• Range Bar Chart (Reverse)
• Line Chart
• Line Chart (Reverse)
• Line Chart (Date+Block)
• Line Chart (Time+Range)
• 3D-Bar Chart
• 3D-Line Chart
• Scatter Chart
• Bubble Chart
• Area Chart
• Area Chart (Date+Block)
• Area Chart (Time+Range)
• Range Area Chart
• Range Area Chart (Date+Block)
• Range Area Chart (Time+Range)
• Comparison Area Chart
• Pie Chart
• Pie Chart (Donut)
• Treemap Chart
• Equalizer Chart (+Animation)
• Active Bubble Chart
• Bubble Cloud Chart

Props

Common

| Name | Type | Required | Watch | Default | Description | | ---- | ---- | -------- | ----- | --------| ----------- | | theme | String | false | false | classic | Supports a total of five themes (classic, dark) | | styles | Object | false | false | undefined | Customize the style of the chart elements you want in key-value format (Classic, Dark) | | colors | Array, Function | false | false | undefined | Options to change the list of colors defined by chart theme (Style Tab) | | clip | Boolean | false | false | false | Option to cut if the drawing element is out of the chart range | | format | Function | false | true | undefined | A callback function that allows you to customize the axis values of the chart | | width | Number | true | true | undefined | The width of the chart | | height | Number | true | true | undefined | The height of the chart | | paddingTop | Number | false | false | 50 | Top padding of the chart | | paddingRight | Number | false | false | 50 | Right padding of the chart | | paddingBottom | Number | false | false | 50 | Bottom padding of the chart | | paddingLeft | Number | false | false | 50 | Left padding of the chart | | focusStart | Number | false | false | -1 | The starting index of the focus area (the criterion is slightly different depending on the type of axis) | | focusEnd | Number | false | false | -1 | The ending index of the focus area (the criterion is slightly different depending on the type of axis) | | labels | Array | false | true | undefined | Label of chart data | | values | Array | false | true | undefined | It is a chart data value, and the format may be different for each chart type |

Common (Animation)

| Name | Type | Required | Watch | Default | Description | | ---- | ---- | -------- | ----- | --------| ----------- | | renderInterval | Number | false | false | 200 | Rendering interval (ms) | | renderHandler | Function | false | false | null | Callback function that can post-process when rendering a chart | | renderStop | Boolean | false | true | false | Pause or resume chart rendering |

Common (X-Y Axis)

| Name | Type | Required | Watch | Default | Description | | ---- | ---- | -------- | ----- | --------| ----------- | | axisMin | Number | false | false | 0 | Miniimum value for the chart axis | | axisMax | Number | false | false | 0 | Maximum value for the chart axis | | axisStep | Number | false | false | 10 | Display interval of chart axis value | | axisXStyle | String | false | false | solid | Line style for chart x-axis area (solid, dotted, gradient, none, hidden) | | axisYStyle | String | false | false | solid | Line style for chart y-axis area (solid, dotted, gradient, none, hidden) | axisXPosition | String | false | false | bottom | Chart x-axis position (bottom, top) | | axisYPosition | String | false | false | left | Chart y-axis position (left, right) | | axisReverse | Boolean | false | false | false | Replace the x and y axis positions | | axisFullMode | Boolean | false | false | false | Draw a chart drawing element full of the axis label area. | | axisInterval | Number | false | false | 1000 * 60 * 60 | It is the label value display interval of the date type (Unit: ms) | | axisFormat | String, Function | false | false | HH | It is the label value display format of the date type | | textRotateX | Number | false | false | 0 | The tilt angle of the x-axis text | | textRotateY | Number | false | false | 0 | The tilt angle of the y-axis text |

Props by charts

graph-bar, graph-comparison-bar

| Name | Type | Required | Watch | Default | Description | | ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- | | fixedSize | Number | false | false | 0 | Fixed width of bar (or height) | | minValue | Number | false | false | 0 | When the value is very small, the minimum size of the bar | | barMargin | Number | false | false | 2 | Margins between bars and bars | | barPadding | Number | false | false | 1 | Inside padding inside the bar | | activeIndex | Number | false | true | undefined | The index of the bar to activate | | activeEvent | String | false | false | undefined | Event type to activate the bar | | display | String | false | false | undefined | Options that display the value of the bar (max, min, all) |

graph-bar3d

| Name | Type | Required | Watch | Default | Description | | ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- | | names | Array | true | false | undefined | Name of the z-axis data key | | barPadding | Number | false | false | 20 | Inside padding inside the bar |

graph-stackbar

| Name | Type | Required | Watch | Default | Description | | ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- | | fixedSize | Number | false | false | 0 | Fixed width of bar (or height) | | barMargin | Number | false | false | 2 | Margins between bars and bars | | barPadding | Number | false | false | 1 | Inside padding inside the bar | | activeIndex | Number | false | true | undefined | The index of the bar to activate | | activeEvent | String | false | false | undefined | Event type to activate the bar | | display | String | false | false | undefined | Options that display the value of the bar (max, min, all) | | connectedLine | Boolean | false | false | false | Options that show the line connecting the bars and bars | | fullMode | Boolean | false | false | false | Option to change to full stack bar | | showText | Boolean | false | false | false | Options to show the percentage value in the bar |

graph-rangebar

| Name | Type | Required | Watch | Default | Description | | ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- | | barMargin | Number | false | false | 2 | Margins between bars and bars | | barPadding | Number | false | false | 1 | Inside padding inside the bar |

graph-line, graph-line-dateblock, graph-line-timerange

| Name | Type | Required | Watch | Default | Description | | ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- | | shape | String | false | false | normal | It is the shape of the line (normal, curve, step) | | activeIndex | Number | false | false | undefined | The index of the line to activate | | activeEvent | String | false | false | undefined | Event type to activate the line | | display | String | false | false | undefined | Options that display the value of the line (max, min, all) | | opacity | Number | false | false | undefined | The transparency of the line (Value between 0 and 1) |

graph-line3d

| Name | Type | Required | Watch | Default | Description | | ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- | | names | Array | true | false | undefined | Name of the z-axis data key | | linePadding | Number | false | false | 20 | Inside padding inside the line |

graph-bubble

| Name | Type | Required | Watch | Default | Description | | ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- | | minSize | Number | false | false | 5 | Minimum size of bubble | | maxSize | Number | false | false | 30 | Maximum size of bubble | | showText | Boolean | false | false | false | Options to show the percentage value in the bubble | | activeEvent | String | false | false | undefined | Event type to activate the bubble |

graph-area, graph-area-dateblock, graph-area-timerange, graph-comparison-area

| Name | Type | Required | Watch | Default | Description | | ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- | | shape | String | false | false | normal | It is the shape of the area (normal, curve, step) | | opacity | Number | false | false | undefined | The transparency of the area (Value between 0 and 1) | | borderLine | Boolean | false | false | true | Show lines on the border of the area |

graph-scatter

| Name | Type | Required | Watch | Default | Description | | ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- | | shape | String | false | false | circle | It is the shape of the scatter (circle, triangle, rectangle, cross) | | activeEvent | String | false | false | undefined | Event type to activate the scatter | | display | String | false | false | undefined | Options that display the value of the scatter (max, min, all) | | opacity | Number | false | false | undefined | The transparency of the scatter (Value between 0 and 1) | | size | Number | false | false | 7 | Size of scatter (Value between 0 and 1) | | hideZero | Boolean | false | false | false | Option to hide scatter when the value is 0 |

graph-pie

| Name | Type | Required | Watch | Default | Description | | ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- | | shape | String | false | false | pie | It is the shape of the pie (pie, donut) | | activeIndex | Number, Array | false | true | undefined | The index of the pie to activate | | activeEvent | String | false | false | undefined | Event type to activate the pie | | showTextType | String | false | false | undefined | Options that display the value of the pie (inside, outside) | | dataFormat | Function | false | true | undefined | Pie data format function | | showTotalValue | Boolean | false | false | undefined | Options that show total value in the center when the shape is donut | | strokeWidth | Number | false | false | 50 | When the shape is donut, set the stroke width |

graph-treemap

| Name | Type | Required | Watch | Default | Description | | ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- | | showText | Boolean | false | false | false | Options to show the title in the treemap node | | textAlign | String | false | false | center | Horizontal alignment (center, left, right) | | textVerticalAlign | String | false | false | top | Vertical alignment (top, bottom, middle) | | titleDepth | Number | false | false | 1 | Sets the depth of the tree node to show the title | | nodeColor | Function | false | false | undefined | Set the color of the node to the callback function |

graph-equalizer

| Name | Type | Required | Watch | Default | Description | | ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- | | minValue | Number | false | false | 0 | When the value is very small, the minimum size of the bar | | fixedSize | Number | false | false | 0 | Fixed width of bar (or height) | | barMargin | Number | false | false | 2 | Margins between bars and bars | | barPadding | Number | false | false | 1 | Inside padding inside the bar | | maxDivisions | Number | false | false | 5 | Maximum number of division bars |

graph-activebubble

| Name | Type | Required | Watch | Default | Description | | ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- | | gravity | Number | false | false | 0.2 | Sets the force to pull the bubble | | radius | Number | false | false | 20 | Radius value of the bubble | | opacity | Number | false | false | 1 | Transparency value of the bubble |

Props by widgets

note

A widget that can display text in a chart.

| Name | Type | Required | Watch | Default | Description | | ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- | | text | String | true | true | | Text to display | | align | String | false | true | center | Horizontal alignment (center, left, right) | | verticalAlign | String | true | false | top | Vertical alignment (top, bottom, middle) | | dx | Number | false | false | 0 | x-axis position adjustment value | | dy | Number | false | false | 0 | y-axis position adjustment value | | size | Number | false | false | undefined | Font size | | color | String | false | false | undefined | Font color |

tooltip

Widget showing chart element values.

| Name | Type | Required | Watch | Default | Description | | ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- | | names | String | true | true | | Name to map to value type | | position | String | false | false | top | Vertical alignment (top, bottom, left, right) | | showAnchor | Boolean | false | false | true | Options to display anchor |

legends

Widget that represents the chart legend.

| Name | Type | Required | Watch | Default | Description | | ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- | | names | String | true | true | | Name to map to value type | | align | String | false | false | center | Horizontal alignment (center, left, right) | | position | String | false | false | bottom | Vertical alignment (top, bottom, left, right) | | dx | Number | false | false | 0 | x-axis position adjustment value | | dy | Number | false | false | 0 | y-axis position adjustment value | | filter | Boolean | false | false | false | Options to filter elements of a specific name | | colors | Array | false | false | undefined | Filtering element color by name |

guideline

Widget to help you see x-y axis values easily.

| Name | Type | Required | Watch | Default | Description | | ---------------- | -------------- | -------------- | ----------- | ------------- | --------------- | | tooltipX | Boolean | false | false | false | Guidelines for displaying x-axis values | | tooltipY | Boolean | false | false | true | Guidelines for displaying y-axis values |

Events

There are three types of events for the drawing object, outside and inside the axis area.

• Bar Chart (+Event)

<div id="app">
    <graph-bar
            :width="600"
            :height="400"
            :axis-min="0"
            :axis-max="50"
            :labels="[ '1Q', '2Q', '3Q', '4Q' ]"
            :values="values"
            :active-event="'click'"
            @click="onClickBar"
            @outside#click="onClickOutside"
            @inside#click="onClickInside">
        <note :text="'Bar Chart (+Event)'"></note>
    </graph-bar>
</div>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        values: [
            [ 10, 5, 5, 5 ],
            [ 40, 10, 10, 10 ],
            [ 30, 30, 30, 30 ]
        ]
    },
    methods: {
        onClickBar: function() {
            console.log(arguments);
            alert("onClickBar");
        },
        onClickOutside: function() {
            console.log(arguments);
            alert("onClickOutside");
        },
        onClickInside: function() {
            console.log(arguments);
            alert("onClickInside");
        }
    }
});
</script>

Common events are shown in the table below.

| Outside axis | Inside axis | Drawing object | Description | | ---------------- | -------------- | -------------- | ----------- | | outside#click | inside#click | click | | | outside#dblclick | inside#dblclick | dblclick | | | outside#rclick | inside#rclick | rclick | contextmenu | | outside#mouseover | inside#mouseover | mouseover | | | outside#mouseout | inside#mouseout | mouseout | | | outside#mousemove | inside#mousemove | mousemove | | | outside#mousedown | inside#mousedown | mousedown | | | outside#mouseup | inside#mouseup | mouseup | |