Vue components based on the JUI chart available in Vue.js

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 'node_modules/vue-graph/src/components/line3d.js'
import NoteWidget from 'node_modules/vue-graph/src/components/widgets/note.js'
import LegendWidget from 'node_modules/vue-graph/src/components/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-line3d
            :width="800"
            :height="600"
            :axis-min="0"
            :axis-max="50"
            :padding-top="100"
            :padding-bottom="100"
            :depth="180"
            :labels="[ '1Q', '2Q', '3Q', '4Q' ]"
            :names="names"
            :values="values">
        <note :text="'3D-Line Chart'" :align="'left'"></note>
        <legends :names="names"></legends>
    </graph-line3d>
</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: {
        names: [ "MS", "Apple", "Google" ],
        values: [
            [ 0, 15, 8, 18 ],
            [ 15, 6, 10, 5 ],
            [ 20, 20, 20, 20 ]
        ]
    }
});

Implemented chart list

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

• Bar Chart
• Bar Chart (Reverse)
• Stack Bar Chart
• Stack Bar Chart (Reverse)
• Stack Bar Cahrt (Full Mode)
• 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
• Pie Chart
• Pie Chart (Donut)

Props

Common

Common (X-Y Axis)

Props by charts

graph-bar

graph-bar3d

graph-stackbar

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

graph-line3d

graph-bubble

graph-area

graph-scatter

graph-pie

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.

GitHub