1. Advisor
  2. juijs-chart
  3. juijs-chart code examples
View all juijs-chart analysis

How to use juijs-chart - 10 common examples

To help you get started, we’ve selected a few juijs-chart examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github juijs / vue-graph / src / components / area.js View on Github external
import graph_core from './core.js'
import watch from '../base/watch.js'
import created from '../base/created.js'
import mounted from '../base/mounted.js'
import props from '../base/props.js'
import props_axes from '../base/props-block.js';
import methods from '../base/methods.js'
import methods_axes from '../base/methods-block.js'

import JUI from 'juijs-chart'
import LineBrush from 'juijs-chart/src/brush/line.js'
import AreaBrush from 'juijs-chart/src/brush/area.js'
import StackAreaBrush from 'juijs-chart/src/brush/stackarea.js'

JUI.use(LineBrush, AreaBrush, StackAreaBrush);

export default {
    name: 'graph-area',
    mixins: [ graph_core, watch, created, mounted, props, props_axes, methods, methods_axes ],
    props: {
        shape: {
            type: String, // "normal", "curve", "step"
            required: false,
            default: 'normal'
        },
        opacity: {
            type: Number,
            required: false
        },
        borderLine: {
            type: Boolean,
github juijs / vue-graph / src / components / scatter.js View on Github external
import graph_core from './core.js'
import watch from '../base/watch.js'
import created from '../base/created.js'
import mounted from '../base/mounted.js'
import props from '../base/props.js'
import props_axes from '../base/props-timerange.js'
import methods from '../base/methods.js'
import methods_axes from '../base/methods-timerange.js'

import JUI from 'juijs-chart'
import ScatterBrush from 'juijs-chart/src/brush/scatter.js'

JUI.use(ScatterBrush)

export default {
    name: 'graph-scatter',
    mixins: [ graph_core, watch, created, mounted, props, props_axes, methods, methods_axes ],
    props: {
        shape: {
            type: String, // circle", "triangle", "rectangle", "cross"
            required: false,
            default: 'circle'
        },
        activeEvent: {
            type: String, // "click", "dblclick", ...
            required: false
        },
        display: { // "max", "min", "all"
            type: String,
github juijs / vue-graph / src / base / mounted-animation.js View on Github external
mounted: function() {
        const self = this;

        if(this.brushes.length == 0) {
            throw new Error('[Vue Graph error]: At least one brush must be added to \'brushes\' variable.')
        }

        JUI.use(RayCastWidget, PickerWidget);

        this.animation = JUI.create('chart.animation', this.$el, {
            width: this.realWidth,
            height: this.height,
            padding: {
                top: this.paddingTop,
                right: this.paddingRight,
                bottom: this.paddingBottom,
                left: this.paddingLeft
            },
            event: {
                'chart.click': function(e) {
                    self.$emit('inside#click', e);
                },
                'chart.dblclick': function(e) {
                    self.$emit('inside#dblclick', e);
github juijs / vue-graph / src / base / mounted.js View on Github external
mounted: function() {
        var self = this;

        if(this.brushes.length == 0) {
            throw new Error('[Vue Graph error]: At least one brush must be added to \'brushes\' variable.')
        }

        JUI.use(FocusBrush);

        this.chart = JUI.create('chart.builder', this.$el, {
            width: this.realWidth,
            height: this.height,
            padding: {
                top: this.paddingTop,
                right: this.paddingRight,
                bottom: this.paddingBottom,
                left: this.paddingLeft
            },
            event: {
                'chart.click': function(e) {
                    self.$emit('inside#click', e);
                },
                'chart.dblclick': function(e) {
                    self.$emit('inside#dblclick', e);
                },
                'chart.rclick': function(e) {
github juijs / vue-graph / src / base / mounted-animation.js View on Github external
mounted: function() {
        const self = this;

        if(this.brushes.length == 0) {
            throw new Error('[Vue Graph error]: At least one brush must be added to \'brushes\' variable.')
        }

        JUI.use(RayCastWidget, PickerWidget);

        this.animation = JUI.create('chart.animation', this.$el, {
            width: this.realWidth,
            height: this.height,
            padding: {
                top: this.paddingTop,
                right: this.paddingRight,
                bottom: this.paddingBottom,
                left: this.paddingLeft
            },
            event: {
                'chart.click': function(e) {
                    self.$emit('inside#click', e);
                },
                'chart.dblclick': function(e) {
                    self.$emit('inside#dblclick', e);
                },
                'chart.rclick': function(e) {
github juijs / vue-graph / src / components / rangearea.js View on Github external
import graph_core from './core.js'
import watch from '../base/watch.js'
import created from '../base/created.js'
import mounted from '../base/mounted.js'
import props from '../base/props.js'
import props_axes from '../base/props-block.js';
import methods from '../base/methods.js'
import methods_axes from '../base/methods-block.js'

import JUI from 'juijs-chart'
import LineBrush from 'juijs-chart/src/brush/line.js'
import RangeAreaBrush from 'juijs-chart/src/brush/rangearea.js'

JUI.use(LineBrush, RangeAreaBrush)

export default {
    name: 'graph-rangearea',
    mixins: [ graph_core, watch, created, mounted, props, props_axes, methods, methods_axes ],
    methods: {
        convertToData: function(values) {
            var data = [];

            for(let i = 0; i < values.length; i++) {
                var row = values[i];

                if(typeof(row) == 'object' && row.length == 3) {
                    data.push({
                        '0': [row[0], row[2]],
                        '1': row[1]
                    });
github juijs / vue-graph / src / components / bar3d.js View on Github external
import graph_core from './core.js'
import watch from '../base/watch.js'
import created from '../base/created.js'
import mounted from '../base/mounted.js'
import props from '../base/props.js'
import props_axes from '../base/props-block3d.js'
import methods from '../base/methods.js'
import methods_axes from '../base/methods-block3d.js'

import JUI from 'juijs-chart'
import Column3dBrush from 'juijs-chart/src/brush/polygon/column3d.js'
import Rotate3dWidget from 'juijs-chart/src/widget/polygon/rotate3d.js'

JUI.use(Column3dBrush, Rotate3dWidget)

export default {
    name: 'graph-bar3d',
    mixins: [ graph_core, watch, created, mounted, props, props_axes, methods, methods_axes ],
    props: {
        names: {
            type: Array,
            required: true
        },
        barPadding: {
            type: Number,
            required: false,
            default: 20
        }
    },
    beforeMount: function() {
github juijs / vue-graph / src / components / line3d.js View on Github external
import graph_core from './core.js'
import watch from '../base/watch.js'
import created from '../base/created.js'
import mounted from '../base/mounted.js'
import props from '../base/props.js'
import props_axes from '../base/props-block3d.js'
import methods from '../base/methods.js'
import methods_axes from '../base/methods-block3d.js'

import JUI from 'juijs-chart'
import Line3dBrush from 'juijs-chart/src/brush/polygon/line3d.js'
import Rotate3dWidget from 'juijs-chart/src/widget/polygon/rotate3d.js'

JUI.use(Line3dBrush, Rotate3dWidget)

export default {
    name: 'graph-line3d',
    mixins: [ graph_core, watch, created, mounted, props, props_axes, methods, methods_axes ],
    props: {
        names: {
            type: Array,
            required: true
        },
        linePadding: {
            type: Number,
            required: false,
            default: 20
        }
    },
    beforeMount: function() {
github juijs / vue-graph / src / components / bubble.js View on Github external
import graph_core from './core.js'
import watch from '../base/watch.js'
import created from '../base/created.js'
import mounted from '../base/mounted.js'
import props from '../base/props.js'
import props_axes from '../base/props-timerange.js'
import methods from '../base/methods.js'
import methods_axes from '../base/methods-timerange.js'

import JUI from 'juijs-chart'
import BubbleBrush from 'juijs-chart/src/brush/bubble.js'

JUI.use(BubbleBrush)

export default {
    name: 'graph-bubble',
    mixins: [ graph_core, watch, created, mounted, props, props_axes, methods, methods_axes ],
    props: {
        minSize: {
            type: Number,
            required: false,
            default: 5
        },
        maxSize: {
            type: Number,
            required: false,
            default: 30
        },
        showText: {
github juijs / vue-graph / src / components / comparisonbar.js View on Github external
import graph_bar from './bar.js'

import JUI from 'juijs-chart'
import BarBrush from 'juijs-chart/src/brush/bar.js'

JUI.use(BarBrush)

export default {
    name: 'graph-comparison-bar',
    mixins: [ graph_bar ],
    methods: {
        initGraphAxes: function() {
            return [{
                x : {
                    type : "range",
                    domain : function(d) {
                        return Math.max(d[0], d[1]);
                    },
                    step : this.axisStep,
                    line : this.axisXStyle,
                    hide : this.axisXStyle == "hidden",
                    reverse : true

juijs-chart

SVG-based JUI chart that can be used in the browser and Node.js. Support many types of charts. (Dashboard, Map, Topology, Full 3D)

GitHub
MIT
Latest version published 3 years ago

Package Health Score

45 / 100
Full package analysis

Popular juijs-chart functions

Similar packages