Add Data Visualization to Our Vue App with the JSCharting-Vue Library

Image for post
Image for post
Photo by Campaign Creators on Unsplash

We can use the JSCharting-Vue library to add data visualization to our Vue app.

In this article, we’ll look at how to use the library to add some charts to our app.

Installation

We can install the library by running:

npm i -D jscharting-vue

Usage

Once we installed the library, we can use it by writing:

<template>
<div id="app">
<JSCharting :options="options" class="columnChart"></JSCharting>
</div>
</template>
<script>
import JSCharting from "jscharting-vue";
export default {
data() {
return {
name: "columnChart",
options: {
type: "horizontal column",
series: [
{
points: [{ x: "A", y: 50 }, { x: "B", y: 30 }, { x: "C", y: 50 }]
}
]
}
};
},
components: {
JSCharting
}
};
</script>

We import the component and register it.

Then we add the data that we want to display in the options object.

The series array has an object with the points array.

x and y has the x and y coordinates.

We set the chart type with the type property to horizontal column so it’ll be displayed with the x-axis as the vertical axis and y-axis as the horizontal axis.

The name is the class name for the chart container.

So we can use it to change the styles:

<template>
<div id="app">
<JSCharting :options="options" class="columnChart"></JSCharting>
</div>
</template>
<script>
import JSCharting from "jscharting-vue";
export default {
data() {
return {
name: "columnChart",
options: {
type: "horizontal column",
series: [
{
points: [{ x: "A", y: 50 }, { x: "B", y: 30 }, { x: "C", y: 50 }]
}
]
}
};
},
components: {
JSCharting
}
};
</script>
<style>
.columnChart {
height: 300px;
}
</style>

We can also set the className prop to set the container div element for the chart.

The callback prop accepts a function that’s called when the chart finishes rendering.

mutatable is a boolean prop to let us set the chart options by calling chart.options .

Updating Charts

To update our chart, we can update the this.options object:

<template>
<div id="app">
<JSCharting :options="options" class="columnChart"></JSCharting>
<button v-on:click="updateData">Update Data</button>
</div>
</template>
<script>
import JSCharting from "jscharting-vue";
export default {
data() {
return {
name: "columnChart",
options: {
type: "horizontal column",
series: [
{
points: [{ x: "A", y: 50 }, { x: "B", y: 30 }, { x: "C", y: 50 }]
}
]
}
};
},
methods: {
updateData() {
this.options = {
series: [
{
name: "Purchases",
points: [{ x: "A", y: 100 }, { x: "B", y: 230 }, { x: "C", y: 150 }]
}
]
};
}
},
components: {
JSCharting
}
};
</script>
<style>
.columnChart {
height: 300px;
}
</style>

We set the series.points property to update the data.

The new data will be rendered automatically.

Also, we can do the update directly on the chart:

<template>
<div id="app">
<JSCharting ref="chart" :options="options" class="columnChart"></JSCharting>
<button v-on:click="updateData">Update Data</button>
</div>
</template>
<script>
import JSCharting from "jscharting-vue";
export default {
data() {
return {
name: "columnChart",
options: {
type: "horizontal column",
series: [
{
name: "Purchases",
points: [{ x: "A", y: 50 }, { x: "B", y: 30 }, { x: "C", y: 50 }]
}
]
}
};
},
methods: {
updateData() {
const chart = this.$refs.chart.instance;
if (chart) {
chart.series("Purchases").options({
points: [{ x: "A", y: 150 }, { x: "B", y: 130 }, { x: "C", y: 150 }]
});
}
}
},
components: {
JSCharting
}
};
</script>
<style>
.columnChart {
height: 300px;
}
</style>

We assign a ref to the JSCharting component.

Then we get the ref in the updateData method.

And then we get the series with the series method.

Then we call the options method to set the points for the chart.

Conclusion

We add data visualization to our Vue app with the JSCharting-Vue library.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store