We Keep Coding

How to get chart data from REST GET to appear during initialisation for this vue component?

I modified an apexcharts Vue component BarChart.vue which is from https://github.com/apexcharts/vue3-apexcharts
I want to retrieve chart data by consuming a REST GET API and insert data into series.
The script portion of this component is as follows;
<script>
/* eslint-disable */
export default {
name: "BarExample",
data: dataInitialisation,
methods: {
updateChart,
},
};
async function makeGetRequest(url) {
const axios = require("axios");
//let res = await axios.get("http://localhost:8080/vue3-apexcharts/data.json");
let res = await axios.get(url);
return res.data;
}
function dataInitialisation() {
let init_data = {
chartOptions: {
chart: {
type: "bar",
stacked: true,
animations: {
enabled: true, //disabling will speed up loading
},
},
},
series: {},
};
var url = "http://localhost:8080/vue3-apexcharts/data.json";
const axios = require("axios");
var data;
makeGetRequest(url).then(
(data) =>
{
console.log(JSON.stringify(data));
init_data.series = data;
}
);
return init_data;
}
I verified that there is nothing wrong with the code for getting the data from REST GET by printing out the data using console.log().
I did some research and it seems I need to use mounted() to get the data to appear on the chart. If this is correct, how do I modify the code to use mounted() to do so?
I am using vue 3.

Couple of things.
Never define functions and logic outside the Vue api inside a Vue component.
What's defined in data, should be defined in data every doc that you will encounter does that the same way. Data Properties and Methods.
Answering your question yes, you need a lifecycle hook for fetching the data from the api when the component mounts, you can read more about lifecycle hooks in this article
// From this line until the end just delete everything.
// Define `methods` and `data` where they belong.
function dataInitialisation() {
let init_data = {
chartOptions: {
Here is a refactored example:
<script>
import axios from 'axios'
export default {
name: 'BarExample',
data() {
return {
url: 'http://localhost:8080/vue3-apexcharts/data.json',
chartOptions: {
chart: {
type: 'bar',
stacked: true,
animations: {
enabled: true
}
}
},
series: {}
}
},
async mounted() {
await this.makeGetRequest()
},
methods: {
updateChart, // Where is this method defined?
async makeGetRequest() {
const { data } = await axios.get(this.url)
this.series = data
}
}
}
</script>

I will answer my own question. The key to the answer comes from the mounted event available in the vue-apexcharts library.
https://apexcharts.com/docs/options/chart/events/
I used this article here as a guide on how to use events in vue3-apexcharts.
https://kim-jangwook.medium.com/how-to-use-events-on-vue3-apexcharts-2d76928f4abc
<template>
<div class="example">
<apexchart
width="500"
height="350"
type="bar"
:options="chartOptions"
:series="series"
#mounted="mounted"
></apexchart>
</div>
</template>
<script>
async function makeGetRequest(url) {
const axios = require("axios");
//let res = await axios.get("http://localhost:8080/vue3-apexcharts/data.json");
let res = await axios.get(url);
return res.data;
}
export default {
name: "BarExample",
data: dataInitialisation,
methods: {
updateChart,
mounted: function(event, chartContext, config) {
console.log("mount event");
var url = "http://localhost:8080/vue3-apexcharts/data.json";
const axios = require("axios");
var data;
makeGetRequest(url).then((data) => {
this.series = data;
});
},
},
};
</script>

Updating in chart.js

I'm trying to figure out how to update a chart.js chart. Google's returned with a lot of answers and I think some are outdated because I can't seem to get any of the solutions to work. The documentation page says just use chartname.update() but it doesn't seem to work for me. I already checked console to make sure the chart object was updating. For some reason the chart itself on the page just isn't changing.
let chartContainer = document.getElementById('charts');
let overview = {
create: function () {
let chartCanvas = document.createElement('canvas');
chartCanvas.id = 'overviewChart';
chartCanvas.appendChild(document.createTextNode('test'));
chartContainer.appendChild(chartCanvas);
let overviewChart = document.getElementById('overviewChart').getContext('2d');
renderChart = new Chart(overviewChart, {
type: 'bar',
data: {
labels:subjectList,
datasets: [{
barThickness: 'flex',
label: 'Completed Credits',
data: []
}]
},
options: {
}
})
},
reload: function() {
console.log('reloaded overview chart');
renderChart.data.datasets.data = [];
for (subject in classes) {
console.log('adding: ' + classes[subject].count)
renderChart.data.datasets.data.push(classes[subject].count);
}
renderChart.update();
}
}
function reloadCharts() {
overview.reload();
}
overview.create();

There are problems in your reload function where you access renderChart.data.datasets.
Please note that renderChart.data.datasets is an array. Therefore, you need to make the following changes:
reload: function() {
// renderChart.data.datasets.data = []; // old
renderChart.data.datasets[0].data = []; // new
for (subject in classes) {
console.log('adding: ' + classes[subject].count)
// renderChart.data.datasets.data.push(classes[subject].count); // old
renderChart.data.datasets[0].data.push(classes[subject].count); // new
}
renderChart.update();
}

How to update chart properties using the chart instance in vuejs + chartjs?

I am following this tutorial, by Alligator, which explains how to create a basic line graph with vue js and chart js. The code works by defining a createChart vue method, importing chart configurations,planetChartData, and then calling the method once the vue instance is mounted to create a graph instance.
I, however, am interested in updating the line chart with new data points once an initial chart has been rendered to the html canvas element.
According to the chart js docs, a chart can be updated with the following function.
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.update();
}
I took the function and decided to turn it into a vue method to update charts. Since coordinate data is stored in the data object I can directly modify the planetChartData like so, but my issue is that I'm unsure of what to pass as the chart parameter to rerender the chart once the arrays are updated, since the myChart instance is out of scope. I tried initializing myChart in other places but that always gave tons of errors.
addAtempt(chart, label, data){
this.lineChartData.data.labels.push('label')
this.lineChartData.data.datasets.forEach(dataset => {
dataset.data.push(data);
});
//issue is here
chart.update()
}
Below is my full vue component
<template>
<div>
<h2>Fun Graph</h2>
<canvas id="planet-chart"></canvas>
</div>
</template>
<script>
import Chart from "chart.js";
import planetChartData from "./chart-data.js";
export default {
name: "test",
data() {
return {
text: "",
planetChartData: planetChartData
};
},
mounted() {
this.createChart("planet-chart", this.planetChartData);
},
methods: {
createChart(chartId, chartData) {
const ctx = document.getElementById(chartId);
const myChart = new Chart(ctx, {
type: chartData.type,
data: chartData.data,
options: chartData.options
});
},
addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach(dataset => {
dataset.data.push(data);
});
}
}
};
</script>

You have to save a reference to the instance of your chart, namely in your createChart method.
Full working example on CodeSandbox.
<template>
<div>
<h2>Fun Graph</h2>
<canvas id="planet-chart"></canvas>
</div>
</template>
<script>
import Chart from "chart.js";
import planetChartData from "./chart-data.js";
export default {
name: "test",
data() {
return {
text: "",
planetChartData: planetChartData,
myChart: null,
};
},
mounted() {
this.createChart("planet-chart", this.planetChartData);
},
methods: {
createChart(chartId, chartData) {
const ctx = document.getElementById(chartId);
// Save reference
this.myChart = new Chart(ctx, {
type: chartData.type,
data: chartData.data,
options: chartData.options
});
},
addData(label, data) {
// Use reference
this.myChart.data.labels.push(label);
this.myChart.data.datasets.forEach(dataset => {
dataset.data.push(data);
});
}
}
};
</script>

Update/re-render Charts.js in Angular 4

Trying to re-render charts every time when i have some change in API, here is the method:
ngOnChanges(changes: SimpleChanges) {
const data = changes['data'].currentValue;
this.draw(data);
}
and draw function
private draw(charts) {
this.charts = charts.map((chart, i) => {
this.options.title.text = chart.title;
const options = {
type: 'bar',
data: chart,
options: this.options
};
return new Chart(`chart${i}`, options);
});
this.charts.forEach(chart => {
chart.update();
});
}
you can see that i try to update/re-render charts in draw function. In console log i can see that chart object was updated with new data, but they just disappear from page. What's wrong in my update method?

I found a solution, i know it's a hack, but for the moment it's ok )))
So, basically i check if charts already exist in DOM, and if exist remove them and create new canvas elements.
private removeAction() {
const block = document.querySelector('#chartsBlock');
//remove
while (block.firstChild) {
block.removeChild(block.firstChild);
}
// create
this.charts.forEach((chart, i) => {
let canvas = document.createElement('canvas');
canvas.id = `chart${i}`;
block.appendChild(canvas);
});
}

You could try using ChangeDetectorRef:
import { ChangeDetectorRef } from '#angular/core';
constructor(private detector: ChangeDetectorRef) {}
ngOnChanges(changes: SimpleChanges) {
const data = changes['data'].currentValue;
this.draw(data);
this.detector.detectChanges()
// if detectChanges() doesn't work, try markForCheck()
}

Highcharts data will not load using angular directive

I'm trying to use high charts via angular to take advantage of double binding. I'm having an issue rendering the data, the graph works but the data is not showing up in the chart. When I check the DOM console I can get the array but for some reason its not showing up in the graph.
cpvmPartners = [];
cpvmPlannedCpm = [];
actualCpm = [];
graphData = [];
cpvm = [];
plannedPrepared = [];
getData = function(){
$.getJSON('/cpvmdata', function(data) {
for(k in data){
if(data[k]['audience'] == 'GCM'){
graphData.push([data[k]['partner'],data[k]['plannedcpm']])
actualCpm.push(Math.round((data[k]['mediacost']/data[k]['impressions']*1000)))
cpvmPlannedCpm.push(data[k]['plannedcpm'])
cpvmPartners.push(data[k]['partner'])
}
}
});
}
prepareData = function(){
for(var i = 0; i < actualCpm.length; i++) {
actualPrepared.push({name: "CPM", data: actualCpm[i]})
plannedPrepared.push({name: "Planned CPM", data: cpvmPlannedCpm[i]})
}
}
myApp = angular.module('main', ['highcharts-ng']);
myApp.controller('graphController', function ($scope) {
getData();
prepareData();
$scope.highchartsNG = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: actualCpm
}],
title: {
text: 'Hello'
},
loading: false
}
});

So the getData() function you call in the angular controller is asynchronous:
By the time you have gotten the data, you have already made your chart in $scope.highChartNg
That is why you can see your data the console but you don't actually set it to the actualCpm by the time angular is done. To fix this you need to create the chart IN your $.getJSON function like so:
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
series: [{}]
};
$.getJSON('data.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
You can see more here: http://www.highcharts.com/docs/working-with-data/custom-preprocessing

Easier just to use
$http.get
Angular service.
Blending jQuery and Angular is troublesome for scoping.
$http.get('cpvmdata')
.then(function(response){
$scope.output = response.data;
for(k in $scope.output){
if($scope.output[k]['audience'] == 'GCM'){
$scope.planned.push($scope.output[k]['plannedcpm'])
$scope.partners.push($scope.output[k]['partner'])
$scope.cpm.push(Math.round(($scope.output[k]['mediacost']/$scope.output[k]['impressions']*1000)))
}
}
});