Why did my graphs from chart.js lost its animation?

Why did my graphs from chart.js lost its animation? - javascript

I am making charts from chart.js. At first I can see the animation in my line graph and pie chart but now the line graph doesn't show it's animation but my pie chart works fine.
line graph/chart:
<div class="middle">
<div class="lineGraph">
<canvas id="lineChart"></canvas>
<script>
const CHART = document.getElementById("lineChart");
console.log(CHART);
let lineChart = new Chart(CHART, {
type: 'line',
data: {
labels: ["January", "Feburary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
datasets: [
{
label: "Sales Trend",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75, 192, 192, 0.4)",
borderColor: "rgba(75, 192, 192, 1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffSet: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75, 192, 192, 1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRaduis: 5,
pointHoverBackgroundColor: "rgba(75, 192, 192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRaduis: 1,
pointHitRaduis: 10,
data: [65, 59, 80, 81, 56, 55, 40, 36, 77, 21, 44, 60]
}
]
},
options:{
scales:{
yAxes:[{
ticks:{
beginAtZero: true
}
}]
},
animation:{
duration: 4000,
easing: "linear"
}
}
});
</script>
</div>
<div class="pieGraph">
<canvas id="pieChart"></canvas>
<script>
const chrt = document.getElementById("pieChart");
Chart.defaults.scale.ticks.beginAtZero = true;
console.log(chrt);
let pieChart = new Chart(chrt,{
type: 'pie',
data: {
labels: ['Male', 'Female'],
datasets: [
{
label: 'Points',
backgroundColor:['#2980b9', '#ff4d4d'],
data: [70, 30]
}
]
},
options:{
animation: {
animateScale: true
}
}
});
</script>
</div>
At first it didn't have the animation options but still I can the animation. So, I thought it was default. But apparently it doesn't show its animation anymore that is why I added the animation option but there is still no animation being seen.

Related

React COREUI CChart problem not rendering

I am having problem with CChart not rendering correctly. I am following this example:
https://coreui.io/react/docs/3.3/components/CCharts/
I am a beginner with react so it is probably a simple mistake but I cannot figure out what.
This is my code:
import React, { lazy } from "react";
import {
CChart,
CChartBar,
CChartHorizontalBar,
CChartLine,
CChartDoughnut,
CChartRadar,
CChartPie,
CChartPolarArea,
} from "#coreui/react-chartjs";
const Profile = () => {
const line = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
},
],
};
const bar = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 80, 81, 56, 55, 40],
},
],
};
const doughnut = {
labels: ["Red", "Green", "Yellow"],
datasets: [
{
data: [300, 50, 100],
backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
},
],
};
const radar = {
labels: [
"Eating",
"Drinking",
"Sleeping",
"Designing",
"Coding",
"Cycling",
"Running",
],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
data: [65, 59, 90, 81, 56, 55, 40],
},
{
label: "My Second dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(255,99,132,1)",
data: [28, 48, 40, 19, 96, 27, 100],
},
],
};
const pie = {
labels: ["Red", "Green", "Yellow"],
datasets: [
{
data: [300, 50, 100],
backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
},
],
};
const polar = {
datasets: [
{
data: [11, 16, 7, 3, 14],
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB",
],
label: "My dataset", // for legend
},
],
labels: ["Red", "Green", "Yellow", "Grey", "Blue"],
};
const options = {
// tooltips: {
// enabled: false,
// custom: customTooltips
// },
maintainAspectRatio: false,
};
return (
<div className="row">
<div className="col-md-6">
<h4>Line</h4>
<div className="chart-wrapper">
<CChart type="line" datasets={line.datasets} options={options} />
</div>
<hr />
</div>
<div className="col-md-6">
<h4>Bar</h4>
<div className="chart-wrapper">
<CChart
type="bar"
datasets={bar.datasets}
options={options}
labels="months"
/>
</div>
<hr />
</div>
<div className="col-md-6">
<h4>Doughnut</h4>
<div className="chart-wrapper">
<CChart
type="doughnut"
datasets={doughnut.datasets}
labels={doughnut.labels}
/>
</div>
<hr />
</div>
<div className="col-md-6">
<h4>Radar</h4>
<div className="chart-wrapper">
<CChart
type="radar"
datasets={radar.datasets}
labels={radar.labels}
/>
</div>
<CChart
type="radar"
datasets={[
{
label: "2019",
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
tooltipLabelColor: "rgba(179,181,198,1)",
data: [65, 59, 90, 81, 56, 55, 40],
},
{
label: "2020",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(255,99,132,1)",
tooltipLabelColor: "rgba(255,99,132,1)",
data: [28, 48, 40, 19, 96, 27, 100],
},
]}
options={{
aspectRatio: 1.5,
tooltips: {
enabled: true,
},
}}
labels={[
"Eating",
"Drinking",
"Sleeping",
"Designing",
"Coding",
"Cycling",
"Running",
]}
/>
<hr />
</div>
<div className="col-md-6">
<h4>Pie</h4>
<div className="chart-wrapper">
<CChart type="pie" datasets={pie.datasets} labels={pie.labels} />
</div>
<hr />
</div>
<div className="col-md-6">
<h4>Polar</h4>
<div className="chart-wrapper">
<CChart
type="polarArea"
datasets={polar.datasets}
options={{
maintainAspectRatio: true,
tooltips: {
enabled: true,
},
}}
labels={polar.labels}
/>
</div>
<hr />
</div>
</div>
);
};
export default Profile;
This is what is displayed on the page:
I do not know why, I have tried a lot of different ideas but none work. Do any of you know how to fix this issue? Thanks for your time and help!

I assume you did a fresh install of chart.js, this will install V3 of the lib. This has some major braking changes over V2 of the lib which coreUI uses. So you will need to install V2 of chart.js and that should resolve your issue:
npm uninstall chart.js
npm install chart.js#2.9.4
yarn remove chart.js
yarn add chart.js#2.9.4

try to add this:
import '#coreui/chartjs/dist/css/coreui-chartjs.css'
or
import '#coreui/chartjs/dist/css/coreui-chartjs.css'
import '#coreui/coreui/dist/css/coreui.min.css'
import 'bootstrap/dist/css/bootstrap.min.css'
don't forget to install all npm packages
npm install #coreui/chartjs
npm install #coreui/coreui
npm install bootstrap

Chart js - set width to a specific bar

I am using chart.js and it's bar chart. I am displaying some data for the period of 12 months. What I would like to do is to set the width of the bar that is representing current month to a higher value than the others. But, I am not sure how to do this, since I only saw an option of setting the width to every bar in the dataset. This are my options that I currently have:
const options = {
type: "bar",
data: {
labels: counties.map(county => dateStringEU(county.Date.split(" ")[0])).reverse(),
datasets: [
{
backgroundColor: "#006BE8",
borderColor: "rgba(151,187,205,1)",
barPercentage: 0.9,
categoryPercentage: 0.9,
}
]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [
{
ticks: {
fontColor: '#736B8A',
beginAtZero: true,
stepSize: 100
},
gridLines: {
display: false
}
}
],
xAxes: [
{
ticks: {
fontColor: '#736B8A'
},
gridLines: {
display: false
}
}
]
}
}
}
Is it possible to set the width individually for each bar and how can we do it if so?

Despite it's not clearly documented, you can define barPercentage as an array of values.
barPercentage: [0.5, 0.5, 0.5, 0.5, 1, 0.5, 0.5],
Please have a look at the amended code from Chart.js bar documentation.
new Chart(document.getElementById("chart"), {
type: "bar",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First Dataset",
data: [65, 59, 80, 81, 56, 55, 40],
barPercentage: [0.5,0.5,0.5,0.5,1,0.5,0.5],
categoryPercentage: 1,
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="chart" height="80"></canvas>

Chart.JS Multiline Chart with unknown numbers of Lines from JSON

I try do to a Multi - Linechart with chart.js. I have a json dataset from a database. The number of dataset can be different. Here is a example (x can be more) with JSON Data.
[{"name":"name1","jan":4067.5,"feb":1647,
"mrz":1375,"apr":10191,"mai":0,"jun":28679,"jul":59502},
{"name":"name2","jan":47548,"feb":63280.5,
"mrz":51640.26,"apr":75029,"mai":41137,"jun":89114.26,"jul":77332},
{"name":"name3","jan":38099,"feb":55023.5,
"mrz":62668,"apr":39482,"mai":44193.3,"jun":52826.5,"jul":77072},
{"name":"namex","jan":34930.5,"feb":36831.5,
"mrz":24391,"apr":35051,"mai":38038,"jun":12700,"jul":51080}]
I have abbreviated the example, in reality it is until December.
I try to do a chart with a line for every name. The X-axis should be the months of January to December and the Y-axis sales.
34/5000

From what I understand, your dataset will get dynamically updated.
You can just change your dataset then call the update() function.
For example:
First initialize your chart with all the data using:
var canvas = document.getElementById("barChart");
var ctx = canvas.getContext('2d');
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "name 1",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(225,0,0,0.4)",
borderColor: "red",
borderCapStyle: 'square',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "black",
pointBackgroundColor: "white",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "brown",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40, ,60,55,30,78]
}, {
label: "name 2",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(167,105,0,0.4)",
borderColor: "rgb(167, 105, 0)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "white",
pointBackgroundColor: "black",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "brown",
pointHoverBorderColor: "yellow",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [10, 20, 60, 95, 64, 78, 90,,70,40,70,89]
}
]
};
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
},
scaleLabel: {
display: true,
labelString: 'Moola',
fontSize: 20
}
}]
}
};
// Chart declaration:
var myBarChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
Then if you later want to update your data, you can just:
myBarChart.data.datasets = [{
label: "name 3",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(167,105,0,0.4)",
borderColor: "rgb(167, 105, 0)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "white",
pointBackgroundColor: "black",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "brown",
pointHoverBorderColor: "yellow",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [10, 20, 60, 95, 64, 78, 90,,70,40,70,89]
},
...............
];
myBarChart.update();
Also, you will need to format your data in a way that can be used with the charts.
Format your data so that you can create a proper dataset.

Adding Chart.js line chart to Jinja2/Flask html page from JS file

I have the following code in a simple Bootstrap html file which displays a Chart.js line chart.
<div class="card-block chartjs">
<canvas id="line-chart" height="500"></canvas>
</div>
The js file that contains the chart's setup looks like this:
$(window).on("load", function(){
var ctx = $("#line-chart");
var chartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom',
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: false,
},
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: false,
},
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
},
title: {
display: true,
text: 'Chart.js Line Chart - Legend'
}
};
var chartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderDash: [5, 5],
borderColor: "#9C27B0",
pointBorderColor: "#9C27B0",
pointBackgroundColor: "#FFF",
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 4,
}, {
label: "My Second dataset",
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderDash: [5, 5],
borderColor: "#00A5A8",
pointBorderColor: "#00A5A8",
pointBackgroundColor: "#FFF",
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 4,
}, {
label: "My Third dataset - No bezier",
data: [45, 25, 16, 36, 67, 18, 76],
lineTension: 0,
fill: false,
borderColor: "#FF7D4D",
pointBorderColor: "#FF7D4D",
pointBackgroundColor: "#FFF",
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 4,
}]
};
var config = {
type: 'line',
options : chartOptions,
data : chartData
};
var lineChart = new Chart(ctx, config);
});
I would like to avoid using a separated javascript file and rather just have everything in my Jinja2/Flask html page. A working example can be found in this tutorial, this is the same way that I would like to follow. I have tried to copy any paste the js part to my html page and put between <script> tags, but unfortunately it doesn't work.
Here is how I tried:
# in my jinja2/flask html page
<div class="card-body collapse in">
<div class="card-block chartjs">
<canvas id="line-chart" height="500"></canvas>
</div>
</div>
<script>
var ctx = $("#line-chart");
var chartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom',
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: false,
},
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: false,
},
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
},
title: {
display: true,
text: 'Chart.js Line Chart - Legend'
}
};
// Chart Data
var chartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderDash: [5, 5],
borderColor: "#9C27B0",
pointBorderColor: "#9C27B0",
pointBackgroundColor: "#FFF",
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 4,
}, {
label: "My Second dataset",
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderDash: [5, 5],
borderColor: "#00A5A8",
pointBorderColor: "#00A5A8",
pointBackgroundColor: "#FFF",
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 4,
}, {
label: "My Third dataset - No bezier",
data: [45, 25, 16, 36, 67, 18, 76],
lineTension: 0,
fill: false,
borderColor: "#FF7D4D",
pointBorderColor: "#FF7D4D",
pointBackgroundColor: "#FFF",
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 4,
}]
};
var config = {
type: 'line',
// Chart Options
options : chartOptions,
data : chartData
};
// Create the chart
var lineChart = new Chart(ctx, config);
});
</script>
Unfortunately I'm not so familiar with JS and don't have more ideas about what should I do to display the chart in my Flask app. What do I need to implement to make it work?

First make sure the required JS is referenced in your template (or the template it extends).
Assuming you serve it from static/js folder:
<head>
...
<script src='/static/js/Chart.bundle.min.js'></script>
...
</head>
Your script tag content looks mostly fine, just a little modification getting the context, and you appear to have a trailing }); that you need to remove:
<script>
// get context
var ctx = document.getElementById("line-chart").getContext("2d");
....
// Create the chart
var lineChart = new Chart(ctx, config);
// REMOVE THIS FROM THE END OF YOUR SCRIPT
//});
</script>

As bgse said in his answer you need to load library first. I suggest you use CDN as that way you don't need to download ChartJS library.
Secondly, you're writing some JS that may be executed before library is fetched to the page. So what would I add is:
<div class="card-body collapse in">
<div class="card-block chartjs">
<canvas id="line-chart" height="500"></canvas>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
// Your JS code here
// ...
});
</script>
This way script code will execute when all JS is loaded.

drawing line chart with chartjs

I'm trying to draw a line chart with chartjs, but i can't get it working - keep getting 't is undefined' error.
here is my fiddle example: http://jsfiddle.net/6bjy9nxh/344/
can anyone figure out what im doing wrong here?
chartjs: http://www.chartjs.org/docs/#line-chart-example-usage
cdn: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js
html
<canvas id="myChart" width="500" height="350"></canvas>
javascript
var ctx = document.getElementById("myChart");
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
}
]
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
});

You are including version 1, you need version 2 for Chart.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js
http://jsfiddle.net/x55sgzgf/

Develop Reference

JavaScript is the programming language of the Web.

Why did my graphs from chart.js lost its animation? - javascript

Related

React COREUI CChart problem not rendering

Chart js - set width to a specific bar

Chart.JS Multiline Chart with unknown numbers of Lines from JSON

Adding Chart.js line chart to Jinja2/Flask html page from JS file

drawing line chart with chartjs

Categories

Resources