Dynamic rendering of chart with chartjs
0
So I'm pretty new to Vue.js and I'd like to display a dynamically rendered chart on a page. So far I have
/*/barChart.js
import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Bar,
mixins: [reactiveProp],
props: ['options'],
mounted () {
this.renderChart(this.chartData, this.options)
},
}
And in my main Vue file
/*/stats.js
const stats = new Vue({
el: '#app',
components:{
"bar-chart": barChart,
},
data: function () {
return {
chartData: {},
charOptions: {},
}
},
watch:{
campaignIds: function(){
this.fillInStats();
}
},
methods: {
fillInStats: function(){
//here I'd like to push data in the chart or remove them depending on a list of Id's.
}
},
//etc
}
So when I update the data "manually" (by directly setting this.chartData) there is an update but the I can't get it to work smoothly. The documentation says to use a function like
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.update();
}
and I have no problem with getting this.chartData.labels.push(label) to work but I'm not sure how to correctly call chart.update() in my case (I'm still unfamiliar with the structure of view).
This is the HTML:
<div class="card-body">
<bar-chart :chart-data="chartData" :options="chartOptions" :height="100"></bar-chart>
</div>
Edit
I made it work by adding
data: function () {
return {
chartData:{labels: ['Destinataires', 'Non-envoyés', 'Non-lus', 'Lus'], datasets: [{label: '', backgroundColor: 'white', data: [0, 0, 0, 0]}]},
chartOptions: {scales: {yAxes: [{ticks: {beginAtZero:true}}]}},
dataSets: ,
//etc
}
},
and updating data like so:
addInStats: function(id){
let color = this.pickColor();
let dataSet = {
label: this.campaignsList[id].name,
backgroundColor: color,
data: [this.subscriberCountArray[id], this.nonSentCountArray[id], this.nonReadCountArray[id], this.readCountArray[id]]
};
this.dataSets.push(dataSet);
this.chartData = {
labels: ['Destinataires', 'Non-envoyés', 'Non-lus', 'Lus'],
datasets: this.dataSets,
};
},
but now, once I've added data a few times, the whole graph goes blank
vue.js vuejs2 chart.js
asked Nov 23 '18 at 13:27
AfunakwaAfunakwa
1651316
add a comment |
0
So I'm pretty new to Vue.js and I'd like to display a dynamically rendered chart on a page. So far I have
/*/barChart.js
import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Bar,
mixins: [reactiveProp],
props: ['options'],
mounted () {
this.renderChart(this.chartData, this.options)
},
}
And in my main Vue file
/*/stats.js
const stats = new Vue({
el: '#app',
components:{
"bar-chart": barChart,
},
data: function () {
return {
chartData: {},
charOptions: {},
}
},
watch:{
campaignIds: function(){
this.fillInStats();
}
},
methods: {
fillInStats: function(){
//here I'd like to push data in the chart or remove them depending on a list of Id's.
}
},
//etc
}
So when I update the data "manually" (by directly setting this.chartData) there is an update but the I can't get it to work smoothly. The documentation says to use a function like
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.update();
}
and I have no problem with getting this.chartData.labels.push(label) to work but I'm not sure how to correctly call chart.update() in my case (I'm still unfamiliar with the structure of view).
This is the HTML:
<div class="card-body">
<bar-chart :chart-data="chartData" :options="chartOptions" :height="100"></bar-chart>
</div>
Edit
I made it work by adding
data: function () {
return {
chartData:{labels: ['Destinataires', 'Non-envoyés', 'Non-lus', 'Lus'], datasets: [{label: '', backgroundColor: 'white', data: [0, 0, 0, 0]}]},
chartOptions: {scales: {yAxes: [{ticks: {beginAtZero:true}}]}},
dataSets: ,
//etc
}
},
and updating data like so:
addInStats: function(id){
let color = this.pickColor();
let dataSet = {
label: this.campaignsList[id].name,
backgroundColor: color,
data: [this.subscriberCountArray[id], this.nonSentCountArray[id], this.nonReadCountArray[id], this.readCountArray[id]]
};
this.dataSets.push(dataSet);
this.chartData = {
labels: ['Destinataires', 'Non-envoyés', 'Non-lus', 'Lus'],
datasets: this.dataSets,
};
},
but now, once I've added data a few times, the whole graph goes blank
vue.js vuejs2 chart.js
asked Nov 23 '18 at 13:27
AfunakwaAfunakwa
1651316
add a comment |
0
0
0
So I'm pretty new to Vue.js and I'd like to display a dynamically rendered chart on a page. So far I have
/*/barChart.js
import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Bar,
mixins: [reactiveProp],
props: ['options'],
mounted () {
this.renderChart(this.chartData, this.options)
},
}
And in my main Vue file
/*/stats.js
const stats = new Vue({
el: '#app',
components:{
"bar-chart": barChart,
},
data: function () {
return {
chartData: {},
charOptions: {},
}
},
watch:{
campaignIds: function(){
this.fillInStats();
}
},
methods: {
fillInStats: function(){
//here I'd like to push data in the chart or remove them depending on a list of Id's.
}
},
//etc
}
So when I update the data "manually" (by directly setting this.chartData) there is an update but the I can't get it to work smoothly. The documentation says to use a function like
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.update();
}
and I have no problem with getting this.chartData.labels.push(label) to work but I'm not sure how to correctly call chart.update() in my case (I'm still unfamiliar with the structure of view).
This is the HTML:
<div class="card-body">
<bar-chart :chart-data="chartData" :options="chartOptions" :height="100"></bar-chart>
</div>
Edit
I made it work by adding
data: function () {
return {
chartData:{labels: ['Destinataires', 'Non-envoyés', 'Non-lus', 'Lus'], datasets: [{label: '', backgroundColor: 'white', data: [0, 0, 0, 0]}]},
chartOptions: {scales: {yAxes: [{ticks: {beginAtZero:true}}]}},
dataSets: ,
//etc
}
},
and updating data like so:
addInStats: function(id){
let color = this.pickColor();
let dataSet = {
label: this.campaignsList[id].name,
backgroundColor: color,
data: [this.subscriberCountArray[id], this.nonSentCountArray[id], this.nonReadCountArray[id], this.readCountArray[id]]
};
this.dataSets.push(dataSet);
this.chartData = {
labels: ['Destinataires', 'Non-envoyés', 'Non-lus', 'Lus'],
datasets: this.dataSets,
};
},
but now, once I've added data a few times, the whole graph goes blank
vue.js vuejs2 chart.js
asked Nov 23 '18 at 13:27
AfunakwaAfunakwa
1651316
So I'm pretty new to Vue.js and I'd like to display a dynamically rendered chart on a page. So far I have
/*/barChart.js
import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Bar,
mixins: [reactiveProp],
props: ['options'],
mounted () {
this.renderChart(this.chartData, this.options)
},
}
And in my main Vue file
/*/stats.js
const stats = new Vue({
el: '#app',
components:{
"bar-chart": barChart,
},
data: function () {
return {
chartData: {},
charOptions: {},
}
},
watch:{
campaignIds: function(){
this.fillInStats();
}
},
methods: {
fillInStats: function(){
//here I'd like to push data in the chart or remove them depending on a list of Id's.
}
},
//etc
}
So when I update the data "manually" (by directly setting this.chartData) there is an update but the I can't get it to work smoothly. The documentation says to use a function like
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.update();
}
and I have no problem with getting this.chartData.labels.push(label) to work but I'm not sure how to correctly call chart.update() in my case (I'm still unfamiliar with the structure of view).
This is the HTML:
<div class="card-body">
<bar-chart :chart-data="chartData" :options="chartOptions" :height="100"></bar-chart>
</div>
Edit
I made it work by adding
data: function () {
return {
chartData:{labels: ['Destinataires', 'Non-envoyés', 'Non-lus', 'Lus'], datasets: [{label: '', backgroundColor: 'white', data: [0, 0, 0, 0]}]},
chartOptions: {scales: {yAxes: [{ticks: {beginAtZero:true}}]}},
dataSets: ,
//etc
}
},
and updating data like so:
addInStats: function(id){
let color = this.pickColor();
let dataSet = {
label: this.campaignsList[id].name,
backgroundColor: color,
data: [this.subscriberCountArray[id], this.nonSentCountArray[id], this.nonReadCountArray[id], this.readCountArray[id]]
};
this.dataSets.push(dataSet);
this.chartData = {
labels: ['Destinataires', 'Non-envoyés', 'Non-lus', 'Lus'],
datasets: this.dataSets,
};
},
but now, once I've added data a few times, the whole graph goes blank
vue.js vuejs2 chart.js
vue.js vuejs2 chart.js
asked Nov 23 '18 at 13:27
AfunakwaAfunakwa
1651316
asked Nov 23 '18 at 13:27
AfunakwaAfunakwa
1651316
edited Nov 24 '18 at 12:59
Afunakwa
asked Nov 23 '18 at 13:27
AfunakwaAfunakwa
1651316
asked Nov 23 '18 at 13:27
AfunakwaAfunakwa
1651316
asked Nov 23 '18 at 13:27
AfunakwaAfunakwa
1651316
1651316
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
0
It is not too clear what you want to do and why your use-case is not working, as the reactiveProp mixin should take care of updating as described in the docs.
However, you should perhaps implement your own watcher where you can run the update code. Like so:
watch: {
chartData() {
this.$data._chart.update();
}
}
Basically, you can access all the methods of the chart through this.$data._chart.
Or feel free to just add this.$data._chart.update() call wherever else is more appropriate for your workflow.
Also, just be aware that there is a misspelling: charOptions instead of chartOptions
answered Nov 23 '18 at 15:12
SunyatasattvaSunyatasattva
4,22321731
I ended up making it working without callingthis.$data._chart.update()but now I'm facing another problem, I'll post an update
– Afunakwa
Nov 24 '18 at 12:55
1
I'd say try refactoring withthis.$data._chart.update(), the docs themselves warn about reactivity caveats. Another thing is: download Vue Developer Tools, they help you troubleshoot things much better, especially this "goes blank after a few times". Otherwise, if you are still in trouble, try making a JSFiddle or the like with your code so that I can take a look at a minimal example and give you more advice.
– Sunyatasattva
Nov 26 '18 at 12:24
I'll try a few more things. If I can't get it to work, I'll make a jsfiddle
– Afunakwa
Nov 26 '18 at 14:05
@Afunakwa did you make it work eventually?
– Sunyatasattva
Jan 11 at 13:43
I think I might have. Hadn't work on this for a few weeks so excuse the late reply. I need to make some more tests and then I'll post the solution if I truly got it to work for good.
– Afunakwa
Jan 30 at 14:16
add a comment |
0
So this was my solution:
import barChart from 'path/to/barChart'
const stats = new Vue({
//
components:{
"bar-chart": barChart,
},
data: function () {
return {
barChartOptions: {responsive: true, scales: {yAxes: [{ticks: {beginAtZero:true}}]}},
barChartData: ,
subscriberCountArray: null,
readCountArray: null,
colorArray: ,
//
}
},
methods: {
initStats: function() {
axios.post(
//get the data and
).then(response => {
if(response.data.success) {
this.campaignsList = response.data.campaignsList;
this.subscriberCountArray = response.data.subscriberCountArray;
this.readCountArray = response.data.readCountArray;
let barDataSets = ;
for(let i = 0; i < this.campaignIds.length; i++){
let currentId = parseInt(this.campaignIds[i]);
let color = '';
let rgba = ;
if(this.colorArray[currentId]){
color = this.colorArray[currentId];
}else{
//pickcolor
}
barDataSets.push({
label: this.campaignsList[currentId].name,
backgroundColor: color,
data: [this.subscriberCountArray[this.campaignsList[currentId].id], this.readCountArray[this.campaignsList[currentId].id]]
});
this.barChartData = {labels: ['Destinataires', 'Lus'], datasets: barDataSets};
},
checkCampaign: function(id){
if(this.campaignIds.length === 0 || !this.campaignIds.includes(id)){
this.campaignIds.push(id);
}else{
this.campaignIds.splice(this.campaignIds.indexOf(id), 1);
}
this.initStats();
},
pickColor: function(interval = null, type = null, base = null){
//
},
},
mounted(){
this.initStats();
}
With in the template:
<bar-chart :chart-data="barChartData" :options="barChartOptions"></bar-chart>
and in barChart.js:
import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Bar,
mixins: [reactiveProp],
props: ['options'],
mounted () {
this.renderBarChart();
},
methods: {
renderBarChart: function(){
this.renderChart(this.chartData, this.options);
}
},
watch: {
chartData: function () {
this.renderBarChart();
}
}
}
Doesn't seem like a terribly efficient way to proceed, but that's the only way I could make dynamics stats rendering with vue work.
answered Mar 1 at 14:08
AfunakwaAfunakwa
1651316
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53447594%2fdynamic-rendering-of-chart-with-chartjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
It is not too clear what you want to do and why your use-case is not working, as the reactiveProp mixin should take care of updating as described in the docs.
However, you should perhaps implement your own watcher where you can run the update code. Like so:
watch: {
chartData() {
this.$data._chart.update();
}
}
Basically, you can access all the methods of the chart through this.$data._chart.
Or feel free to just add this.$data._chart.update() call wherever else is more appropriate for your workflow.
Also, just be aware that there is a misspelling: charOptions instead of chartOptions
answered Nov 23 '18 at 15:12
SunyatasattvaSunyatasattva
4,22321731
I ended up making it working without callingthis.$data._chart.update()but now I'm facing another problem, I'll post an update
– Afunakwa
Nov 24 '18 at 12:55
1
I'd say try refactoring withthis.$data._chart.update(), the docs themselves warn about reactivity caveats. Another thing is: download Vue Developer Tools, they help you troubleshoot things much better, especially this "goes blank after a few times". Otherwise, if you are still in trouble, try making a JSFiddle or the like with your code so that I can take a look at a minimal example and give you more advice.
– Sunyatasattva
Nov 26 '18 at 12:24
I'll try a few more things. If I can't get it to work, I'll make a jsfiddle
– Afunakwa
Nov 26 '18 at 14:05
@Afunakwa did you make it work eventually?
– Sunyatasattva
Jan 11 at 13:43
I think I might have. Hadn't work on this for a few weeks so excuse the late reply. I need to make some more tests and then I'll post the solution if I truly got it to work for good.
– Afunakwa
Jan 30 at 14:16
add a comment |
0
It is not too clear what you want to do and why your use-case is not working, as the reactiveProp mixin should take care of updating as described in the docs.
However, you should perhaps implement your own watcher where you can run the update code. Like so:
watch: {
chartData() {
this.$data._chart.update();
}
}
Basically, you can access all the methods of the chart through this.$data._chart.
Or feel free to just add this.$data._chart.update() call wherever else is more appropriate for your workflow.
Also, just be aware that there is a misspelling: charOptions instead of chartOptions
answered Nov 23 '18 at 15:12
SunyatasattvaSunyatasattva
4,22321731
I ended up making it working without callingthis.$data._chart.update()but now I'm facing another problem, I'll post an update
– Afunakwa
Nov 24 '18 at 12:55
1
I'd say try refactoring withthis.$data._chart.update(), the docs themselves warn about reactivity caveats. Another thing is: download Vue Developer Tools, they help you troubleshoot things much better, especially this "goes blank after a few times". Otherwise, if you are still in trouble, try making a JSFiddle or the like with your code so that I can take a look at a minimal example and give you more advice.
– Sunyatasattva
Nov 26 '18 at 12:24
I'll try a few more things. If I can't get it to work, I'll make a jsfiddle
– Afunakwa
Nov 26 '18 at 14:05
@Afunakwa did you make it work eventually?
– Sunyatasattva
Jan 11 at 13:43
I think I might have. Hadn't work on this for a few weeks so excuse the late reply. I need to make some more tests and then I'll post the solution if I truly got it to work for good.
– Afunakwa
Jan 30 at 14:16
add a comment |
0
0
0
It is not too clear what you want to do and why your use-case is not working, as the reactiveProp mixin should take care of updating as described in the docs.
However, you should perhaps implement your own watcher where you can run the update code. Like so:
watch: {
chartData() {
this.$data._chart.update();
}
}
Basically, you can access all the methods of the chart through this.$data._chart.
Or feel free to just add this.$data._chart.update() call wherever else is more appropriate for your workflow.
Also, just be aware that there is a misspelling: charOptions instead of chartOptions
answered Nov 23 '18 at 15:12
SunyatasattvaSunyatasattva
4,22321731
It is not too clear what you want to do and why your use-case is not working, as the reactiveProp mixin should take care of updating as described in the docs.
However, you should perhaps implement your own watcher where you can run the update code. Like so:
watch: {
chartData() {
this.$data._chart.update();
}
}
Basically, you can access all the methods of the chart through this.$data._chart.
Or feel free to just add this.$data._chart.update() call wherever else is more appropriate for your workflow.
Also, just be aware that there is a misspelling: charOptions instead of chartOptions
answered Nov 23 '18 at 15:12
SunyatasattvaSunyatasattva
4,22321731
answered Nov 23 '18 at 15:12
SunyatasattvaSunyatasattva
4,22321731
answered Nov 23 '18 at 15:12
SunyatasattvaSunyatasattva
4,22321731
answered Nov 23 '18 at 15:12
SunyatasattvaSunyatasattva
4,22321731
4,22321731
I ended up making it working without callingthis.$data._chart.update()but now I'm facing another problem, I'll post an update
– Afunakwa
Nov 24 '18 at 12:55
1
I'd say try refactoring withthis.$data._chart.update(), the docs themselves warn about reactivity caveats. Another thing is: download Vue Developer Tools, they help you troubleshoot things much better, especially this "goes blank after a few times". Otherwise, if you are still in trouble, try making a JSFiddle or the like with your code so that I can take a look at a minimal example and give you more advice.
– Sunyatasattva
Nov 26 '18 at 12:24
I'll try a few more things. If I can't get it to work, I'll make a jsfiddle
– Afunakwa
Nov 26 '18 at 14:05
@Afunakwa did you make it work eventually?
– Sunyatasattva
Jan 11 at 13:43
I think I might have. Hadn't work on this for a few weeks so excuse the late reply. I need to make some more tests and then I'll post the solution if I truly got it to work for good.
– Afunakwa
Jan 30 at 14:16
add a comment |
I ended up making it working without callingthis.$data._chart.update()but now I'm facing another problem, I'll post an update
– Afunakwa
Nov 24 '18 at 12:55
1
I'd say try refactoring withthis.$data._chart.update(), the docs themselves warn about reactivity caveats. Another thing is: download Vue Developer Tools, they help you troubleshoot things much better, especially this "goes blank after a few times". Otherwise, if you are still in trouble, try making a JSFiddle or the like with your code so that I can take a look at a minimal example and give you more advice.
– Sunyatasattva
Nov 26 '18 at 12:24
I'll try a few more things. If I can't get it to work, I'll make a jsfiddle
– Afunakwa
Nov 26 '18 at 14:05
@Afunakwa did you make it work eventually?
– Sunyatasattva
Jan 11 at 13:43
I think I might have. Hadn't work on this for a few weeks so excuse the late reply. I need to make some more tests and then I'll post the solution if I truly got it to work for good.
– Afunakwa
Jan 30 at 14:16
I ended up making it working without calling
this.$data._chart.update() but now I'm facing another problem, I'll post an update– Afunakwa
Nov 24 '18 at 12:55
I ended up making it working without calling
this.$data._chart.update() but now I'm facing another problem, I'll post an update– Afunakwa
Nov 24 '18 at 12:55
1
1
I'd say try refactoring with
this.$data._chart.update(), the docs themselves warn about reactivity caveats. Another thing is: download Vue Developer Tools, they help you troubleshoot things much better, especially this "goes blank after a few times". Otherwise, if you are still in trouble, try making a JSFiddle or the like with your code so that I can take a look at a minimal example and give you more advice.– Sunyatasattva
Nov 26 '18 at 12:24
I'd say try refactoring with
this.$data._chart.update(), the docs themselves warn about reactivity caveats. Another thing is: download Vue Developer Tools, they help you troubleshoot things much better, especially this "goes blank after a few times". Otherwise, if you are still in trouble, try making a JSFiddle or the like with your code so that I can take a look at a minimal example and give you more advice.– Sunyatasattva
Nov 26 '18 at 12:24
I'll try a few more things. If I can't get it to work, I'll make a jsfiddle
– Afunakwa
Nov 26 '18 at 14:05
I'll try a few more things. If I can't get it to work, I'll make a jsfiddle
– Afunakwa
Nov 26 '18 at 14:05
@Afunakwa did you make it work eventually?
– Sunyatasattva
Jan 11 at 13:43
@Afunakwa did you make it work eventually?
– Sunyatasattva
Jan 11 at 13:43
I think I might have. Hadn't work on this for a few weeks so excuse the late reply. I need to make some more tests and then I'll post the solution if I truly got it to work for good.
– Afunakwa
Jan 30 at 14:16
I think I might have. Hadn't work on this for a few weeks so excuse the late reply. I need to make some more tests and then I'll post the solution if I truly got it to work for good.
– Afunakwa
Jan 30 at 14:16
add a comment |
0
So this was my solution:
import barChart from 'path/to/barChart'
const stats = new Vue({
//
components:{
"bar-chart": barChart,
},
data: function () {
return {
barChartOptions: {responsive: true, scales: {yAxes: [{ticks: {beginAtZero:true}}]}},
barChartData: ,
subscriberCountArray: null,
readCountArray: null,
colorArray: ,
//
}
},
methods: {
initStats: function() {
axios.post(
//get the data and
).then(response => {
if(response.data.success) {
this.campaignsList = response.data.campaignsList;
this.subscriberCountArray = response.data.subscriberCountArray;
this.readCountArray = response.data.readCountArray;
let barDataSets = ;
for(let i = 0; i < this.campaignIds.length; i++){
let currentId = parseInt(this.campaignIds[i]);
let color = '';
let rgba = ;
if(this.colorArray[currentId]){
color = this.colorArray[currentId];
}else{
//pickcolor
}
barDataSets.push({
label: this.campaignsList[currentId].name,
backgroundColor: color,
data: [this.subscriberCountArray[this.campaignsList[currentId].id], this.readCountArray[this.campaignsList[currentId].id]]
});
this.barChartData = {labels: ['Destinataires', 'Lus'], datasets: barDataSets};
},
checkCampaign: function(id){
if(this.campaignIds.length === 0 || !this.campaignIds.includes(id)){
this.campaignIds.push(id);
}else{
this.campaignIds.splice(this.campaignIds.indexOf(id), 1);
}
this.initStats();
},
pickColor: function(interval = null, type = null, base = null){
//
},
},
mounted(){
this.initStats();
}
With in the template:
<bar-chart :chart-data="barChartData" :options="barChartOptions"></bar-chart>
and in barChart.js:
import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Bar,
mixins: [reactiveProp],
props: ['options'],
mounted () {
this.renderBarChart();
},
methods: {
renderBarChart: function(){
this.renderChart(this.chartData, this.options);
}
},
watch: {
chartData: function () {
this.renderBarChart();
}
}
}
Doesn't seem like a terribly efficient way to proceed, but that's the only way I could make dynamics stats rendering with vue work.
answered Mar 1 at 14:08
AfunakwaAfunakwa
1651316
add a comment |
0
So this was my solution:
import barChart from 'path/to/barChart'
const stats = new Vue({
//
components:{
"bar-chart": barChart,
},
data: function () {
return {
barChartOptions: {responsive: true, scales: {yAxes: [{ticks: {beginAtZero:true}}]}},
barChartData: ,
subscriberCountArray: null,
readCountArray: null,
colorArray: ,
//
}
},
methods: {
initStats: function() {
axios.post(
//get the data and
).then(response => {
if(response.data.success) {
this.campaignsList = response.data.campaignsList;
this.subscriberCountArray = response.data.subscriberCountArray;
this.readCountArray = response.data.readCountArray;
let barDataSets = ;
for(let i = 0; i < this.campaignIds.length; i++){
let currentId = parseInt(this.campaignIds[i]);
let color = '';
let rgba = ;
if(this.colorArray[currentId]){
color = this.colorArray[currentId];
}else{
//pickcolor
}
barDataSets.push({
label: this.campaignsList[currentId].name,
backgroundColor: color,
data: [this.subscriberCountArray[this.campaignsList[currentId].id], this.readCountArray[this.campaignsList[currentId].id]]
});
this.barChartData = {labels: ['Destinataires', 'Lus'], datasets: barDataSets};
},
checkCampaign: function(id){
if(this.campaignIds.length === 0 || !this.campaignIds.includes(id)){
this.campaignIds.push(id);
}else{
this.campaignIds.splice(this.campaignIds.indexOf(id), 1);
}
this.initStats();
},
pickColor: function(interval = null, type = null, base = null){
//
},
},
mounted(){
this.initStats();
}
With in the template:
<bar-chart :chart-data="barChartData" :options="barChartOptions"></bar-chart>
and in barChart.js:
import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Bar,
mixins: [reactiveProp],
props: ['options'],
mounted () {
this.renderBarChart();
},
methods: {
renderBarChart: function(){
this.renderChart(this.chartData, this.options);
}
},
watch: {
chartData: function () {
this.renderBarChart();
}
}
}
Doesn't seem like a terribly efficient way to proceed, but that's the only way I could make dynamics stats rendering with vue work.
answered Mar 1 at 14:08
AfunakwaAfunakwa
1651316
add a comment |
0
0
0
So this was my solution:
import barChart from 'path/to/barChart'
const stats = new Vue({
//
components:{
"bar-chart": barChart,
},
data: function () {
return {
barChartOptions: {responsive: true, scales: {yAxes: [{ticks: {beginAtZero:true}}]}},
barChartData: ,
subscriberCountArray: null,
readCountArray: null,
colorArray: ,
//
}
},
methods: {
initStats: function() {
axios.post(
//get the data and
).then(response => {
if(response.data.success) {
this.campaignsList = response.data.campaignsList;
this.subscriberCountArray = response.data.subscriberCountArray;
this.readCountArray = response.data.readCountArray;
let barDataSets = ;
for(let i = 0; i < this.campaignIds.length; i++){
let currentId = parseInt(this.campaignIds[i]);
let color = '';
let rgba = ;
if(this.colorArray[currentId]){
color = this.colorArray[currentId];
}else{
//pickcolor
}
barDataSets.push({
label: this.campaignsList[currentId].name,
backgroundColor: color,
data: [this.subscriberCountArray[this.campaignsList[currentId].id], this.readCountArray[this.campaignsList[currentId].id]]
});
this.barChartData = {labels: ['Destinataires', 'Lus'], datasets: barDataSets};
},
checkCampaign: function(id){
if(this.campaignIds.length === 0 || !this.campaignIds.includes(id)){
this.campaignIds.push(id);
}else{
this.campaignIds.splice(this.campaignIds.indexOf(id), 1);
}
this.initStats();
},
pickColor: function(interval = null, type = null, base = null){
//
},
},
mounted(){
this.initStats();
}
With in the template:
<bar-chart :chart-data="barChartData" :options="barChartOptions"></bar-chart>
and in barChart.js:
import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Bar,
mixins: [reactiveProp],
props: ['options'],
mounted () {
this.renderBarChart();
},
methods: {
renderBarChart: function(){
this.renderChart(this.chartData, this.options);
}
},
watch: {
chartData: function () {
this.renderBarChart();
}
}
}
Doesn't seem like a terribly efficient way to proceed, but that's the only way I could make dynamics stats rendering with vue work.
answered Mar 1 at 14:08
AfunakwaAfunakwa
1651316
So this was my solution:
import barChart from 'path/to/barChart'
const stats = new Vue({
//
components:{
"bar-chart": barChart,
},
data: function () {
return {
barChartOptions: {responsive: true, scales: {yAxes: [{ticks: {beginAtZero:true}}]}},
barChartData: ,
subscriberCountArray: null,
readCountArray: null,
colorArray: ,
//
}
},
methods: {
initStats: function() {
axios.post(
//get the data and
).then(response => {
if(response.data.success) {
this.campaignsList = response.data.campaignsList;
this.subscriberCountArray = response.data.subscriberCountArray;
this.readCountArray = response.data.readCountArray;
let barDataSets = ;
for(let i = 0; i < this.campaignIds.length; i++){
let currentId = parseInt(this.campaignIds[i]);
let color = '';
let rgba = ;
if(this.colorArray[currentId]){
color = this.colorArray[currentId];
}else{
//pickcolor
}
barDataSets.push({
label: this.campaignsList[currentId].name,
backgroundColor: color,
data: [this.subscriberCountArray[this.campaignsList[currentId].id], this.readCountArray[this.campaignsList[currentId].id]]
});
this.barChartData = {labels: ['Destinataires', 'Lus'], datasets: barDataSets};
},
checkCampaign: function(id){
if(this.campaignIds.length === 0 || !this.campaignIds.includes(id)){
this.campaignIds.push(id);
}else{
this.campaignIds.splice(this.campaignIds.indexOf(id), 1);
}
this.initStats();
},
pickColor: function(interval = null, type = null, base = null){
//
},
},
mounted(){
this.initStats();
}
With in the template:
<bar-chart :chart-data="barChartData" :options="barChartOptions"></bar-chart>
and in barChart.js:
import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Bar,
mixins: [reactiveProp],
props: ['options'],
mounted () {
this.renderBarChart();
},
methods: {
renderBarChart: function(){
this.renderChart(this.chartData, this.options);
}
},
watch: {
chartData: function () {
this.renderBarChart();
}
}
}
Doesn't seem like a terribly efficient way to proceed, but that's the only way I could make dynamics stats rendering with vue work.
answered Mar 1 at 14:08
AfunakwaAfunakwa
1651316
edited Mar 1 at 14:25
answered Mar 1 at 14:08
AfunakwaAfunakwa
1651316
answered Mar 1 at 14:08
AfunakwaAfunakwa
1651316
answered Mar 1 at 14:08
AfunakwaAfunakwa
1651316
1651316
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53447594%2fdynamic-rendering-of-chart-with-chartjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
