why isn't the chart being updated with this code?:
<script type="text/javascript">
function updateConfigByMutating() {
chart.options.plugins.title.text = 'new title';
chart.update();
}
</script>
<input type="button" onclick="updateConfigByMutating(barChart)">
<body>
<canvas id="barChart"></canvas>
<script>
var ctxB = document.getElementById("barChart").getContext('2d');
var barChart = new Chart(ctxB, {
type: 'bar',
data: {
labels: ["Pennetta", "Menna", "Carinci", "Notaro", "Giangiacomo", "Carugno"],
datasets: [{
label: 'Andamento dei Voti - Elezioni 2021',
data: [<?php echo $checkpennetta[0]; ?>, <?php echo $checkmenna[0]; ?>, <?php echo $checkcarinci[0]; ?>, <?php echo $checknotaro[0]; ?>, <?php echo $checkgiangiacomo[0]; ?>, <?php echo $checkcarugno[0]; ?>],
backgroundColor: [
'rgba(250, 216, 89, 0.2)',
'rgba(207, 0, 15, 0.2)',
'rgba(232, 126, 4, 0.2)',
'rgba(31, 58, 147, 0.2)',
'rgba(137, 196, 244, 0.2)',
'rgba(77, 175, 124, 0.2)'
],
borderColor: [
'rgba(250, 216, 89, 1)',
'rgba(207, 0, 15, 1)',
'rgba(232, 126, 4, 1)',
'rgba(31, 58, 147, 1)',
'rgba(137, 196, 244, 1)',
'rgba(77, 175, 124, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
I press the button and it does not update.
The title doesn't change, and I don't know why, honestly
Thank you
....................................................................................................................................................................................................
Remember that you assigned the newly created chart to the variable barChart. Therefore, try to change your updateConfigByMutating from...
function updateConfigByMutating() {
chart.options.plugins.title.text = 'new title';
chart.update();
}
...to
function updateConfigByMutating() {
barChart.options.plugins.title.text = 'new title';
barChart.update();
}
Related
When i use charts.js -plugins-datalabels in my page with 2 Charts , Only the first charts show up and the second one is disappeared from the page'
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.1.0/dist/chartjs-plugin- datalabels.min.js"></script>
First Chart
<div class="row">
<div class="col-md-4 text-center"> {{ccmonth}}
<canvas id="myChart7" height ="400"></canvas>
<script>
// setup
const data = {
labels: ['Central', 'Eastern', 'Western', 'Kingdom'],
datasets: [{
label: 'Sales',
data: [{{ordordc_month}}, {{ordorde_month}}, {{ordordw_month}},{{ordord_month}}],
backgroundColor: [
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1
},{
label: 'Target',
data: [50000, 50000, 50000, 40000,],
backgroundColor:'rgba(255, 26, 104, 0.2)',
borderColor: 'rgba(255, 26, 104, 1)',
borderWidth: 1
}]
};
// config
const config1 = {
type: 'bar',
data,
options: {
scales: {
x: {
stacked: true
},
y: {
beginAtZero: true,
stacked: true
}
}
},
plugins: [ChartDataLabels],
};
// render init block
const myChart7 = new Chart(
document.getElementById('myChart7'),
config1
);
</script>
</div>
</div>
Second chart (not shown up)
<div class="row">
<div class="col-md-4 text-center"> Week {{lweek}} Achievment
<canvas id="myChart6" height ="400"></canvas>
<script>
// setup
const data = {
labels: ['Central', 'Eastern', 'Western', 'Kingdom'],
datasets: [{
label: 'Sales',
data: [{{ordordc}}, {{ordorde}}, {{ordordw}},{{ordord}}],
backgroundColor: [
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1
},{
label: 'Target',
data: [50000, 50000, 50000, 40000,],
backgroundColor:'rgba(255, 26, 104, 0.2)',
borderColor: 'rgba(255, 26, 104, 1)',
borderWidth: 1
}]
};
// config
const config = {
type: 'bar',
data,
options: {
scales: {
x: {
stacked: true
},
y: {
beginAtZero: true,
stacked: true
}
}
},
plugins: [ChartDataLabels],
};
// render init block
const myChart6 = new Chart(
document.getElementById('myChart6'),
config
);
</script>
</div>
</div>
I tried to search in your awesome , and read the docommentation of the plugins-datalabels.
I expect a solution by one of your greatest users
I'm new to Vue3 and Chart.js and I couldn't figure out how to solve this issue. I'm keep getting the same error over and over. Can someone please help me?
TypeError: Cannot read properties of null (reading 'getContext')
Here is my template:
<template>
<div class="border border-dark rounded container m-2">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
</template>
and my script:
import Chart from 'chart.js/auto'
export default {
mounted() {
const ctx = document.getElementById("myChart").getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
console.log('mounted')
}
And I have one more question, when I run this code I get null. Is this normal?
console.log(document.getElementById("myChart"))
See attached screenshot with an example with what I'm trying to do.
Basically I want to be able to add custom text on certain yAxis and xAxis lines.
You can use the Plugin Core API. It offers different hooks that may be used for executing custom code. In below code snippet, I use the afterDraw hook to draw custom text on the canvas.
For positioning your text on x and y, you may use hard coded number of pixels or compute them using the Scale Interface (i.e. function getPixelForValue).
new Chart(document.getElementById('myChart'), {
type: 'bar',
plugins: {
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
ctx.save();
ctx.font = "18px Arial";
ctx.fillStyle = "red";
var x = (xAxis.getPixelForValue('May') + xAxis.getPixelForValue('June')) / 2;
ctx.fillText('My custom text here', x, yAxis.getPixelForValue(65));
ctx.fillText('Another custom text here', 30, 15);
ctx.restore();
}
},
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: "My First Dataset",
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)'],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="110"></canvas>
I'm trying to setup simple application with Ember using ember-chart:
https://www.npmjs.com/package/ember-cli-chart
I have my charts.hbs file:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
{{#toggle-section}}
<div class="chart-container">
{{ember-chart type=CHARTTYPE data=CHARTDATA options=CHARTOPTIONS width=CHARTWIDTH height=CHARTHEIGHT}}
</div>
{{/toggle-section}}
</div>
</div>
</div>
and my charts.js controller with sample from documentation of Chart.js:
import Controller from '#ember/controller';
import Ember from "ember";
export default Controller.extend({
CHARTTYPE: 'bar',
CHARTDATA: Ember.Computed('', function () {
return {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
}
}),
CHARTOPTIONS: Ember.Computed('', function () {
return {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
}),
CHARTWIDTH: 500,
CHARTHEIGHT: 500,
});
In index.js route i have redirection to charts route:
beforeModel() {
this.replaceWith('charts');
}
When I am trying to open my localhost:4200 after ember s it gives me an error in console:
router.js:927 Error while processing route: index Ember.Computed is not a function TypeError: Ember.Computed is not a function
I tried to search for an answer but nothing seems to work.
The function is lowercase: Ember.computed
It would also be better to use this import:
import { computed } from '#ember/object';
to avoid having to bring in all of the Ember framework just to access the computed function.
I use canvas width and highth as follow
<canvas id="myChart" height="400" width="400" ></canvas>
However, when the page is rendered the canvas somehow becomes
<canvas height="1643" id="myChart" width="1643" style="display: block; width: 1643px; height: 1643px;"></canvas>
I found similar problem and such solution works for me too,
options: {
responsive: false
}
But I'm not sure that that is proper solution just to turn off responsive option becaouse that is one of the cool thing in chart.js
my code
<Html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.js" ></script>
</head>
<Body>
<canvas id="myChart" height="400" width="400" ></canvas>
</Body>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Steps',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
},
{
label: "Goal Line",
type:'line',
data: [{x:0,y:10},{x:0,y:10},{x:0,y:10},{x:0,y:10},{x:0,y:10},{x:0,y:10}],
fill: false,
pointRadius:[0,0,0,0,0,0,0],
borderWidth: 5,
borderColor: "rgba(243, 52, 52,1)",
borderJoinStyle: 'miter',
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
},
}],
xAxes: [{
ticks: {
beginAtZero:true
},
}]
},
}
});
</script>
</Html>
You can use css max-width and min-width if you want to avoid your chart from being too big or too small:
<canvas id="myChart" height="400" width="400" style="min-width: 200px; max-width: 600px"></canvas>
Note: You don't need to set a width via css. You can place the element within a grid column. Charts are responsive, so they will adjust the width to the size of the parent.
<div class="col-md-5">
<canvas id="myChart" ></canvas>
</div>