Easily Bind A Chart To The Data Stored In Vue.js Components

v-chart plugin is designed to allow Vue.js developers to integrate fully customizable and interactive charts into their applications. The plugin was built from the JavaScript library D3.js to process documents based on data. By linking data from your components, you can create complex charts and graphs that respond to changes in your application. Vue.js lifecycle events will trigger schemas to update and maintain the bidirectional link between your schemas and your data. By adding a status manager (such as Vuex), you can also persist in status across an entire app.

The V Chart Plugin was built using the Vue.js plugin architecture. This will allow the schema to be a first-class native to your Vue.js application. Combining multiple charts allows you to create complex dashboards and enables deeper insights into your data. All aspects of charts can be configured to allow full customization of your charts along with the ability to design SVG elements using the classes and identifiers generated for each individual artboard element.

By adding additional charts to the import folder and importing them into v-chart-plugin.js, you can include any custom charts for use with Vue.js. With the JavaScript API, you can bind to methods defined in the API and create a reusable component that can persist across your application.

jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts

How to make use of it:

Install and download:

# NPM
$ npm install v-chart-plugin --save

1. These instructions assume that you are using the Vue CLI to create your form. Include the plugin in main.js:

import Chart from 'v-chart-plugin'

Vue.use(Chart);

2. Within your component, you will need to include an object with title, delimiter, width, height, and data points to pass to the component. The data can be passed as an array or array of objects:

export default {
  name: 'example',
  data () {
    return {
      chartData: {
        chartType: 'barChart',
        selector: 'chart',
        title: 'Important Data',
        width: 300,
        height: 200,
        data: [120, 140, 70, 90, 110, 65, 210]      
      }
    }
  }
}

3. If it is passed as an array of elements, you will need to specify which attribute should be used as the measure/dimension:

export default {
  name: 'example',
  data () {
    return {
      chartData: {
        chartType: "vBarChart",
        selector: "chart",
        title: "Important Data",
        width: 400,
        height: 200,
        metric: 'count', // for two or more metrics pass as an array ['count', 'pyCount']
        data: [
          {'count': 120,
           'fruit': 'apples'}, 
          {'count': 250,
           'fruit': 'oranges'}
        ]
      }
    }
  }
}