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

Common (Animation)

Common (X-Y Axis)

Props by charts

graph-bar, graph-comparison-bar

graph-bar3d

graph-stackbar

graph-rangebar

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

graph-line3d

graph-bubble

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

graph-scatter

graph-pie

graph-treemap

graph-equalizer

graph-activebubble

Props by widgets

note

A widget that can display text in a chart.

tooltip

Widget showing chart element values.

legends

Widget that represents the chart legend.

guideline

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

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.