chart.js Version 2.5.0
It works fine in Google Chrome, but not in IE11. There is no charts shown.
Whats wrong?
<canvas id="ks2" width="500" height="500"></canvas>
<script>
var ctx = document.getElementById("ks2");
var ks2 = new Chart(ctx, {
type: 'bar',
data: {
labels: ["KS2 (1)", "KS2 (2)", "Differenz"],
datasets: [{
label: 'KS2',
data: [25, 35, 10, 0]
}]
}
});
</script>
You can achieve this using a meta tag as follows:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Related
I'm using Chart.Js to draw a scatter chart in VF page but in the preview, the chart is not displayed. Not getting any errors but the chart is not displayed. Below is my VF page code.Appreciate your help
<apex:page showHeader="true" sidebar="false" id="page" docType="html-5.0">
<html>
<head>
<meta charset="utf-8"/>
<title>Chart.js demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Chart.js Sample</h1>
<canvas id="myChart" width="600" height="400"></canvas>
<script>
var ctx= document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: 'Scatter Dataset',
backgroundColor: 'green',
data: [{
x: -10,
y: 0
}, {
x: 0,
y: 10
}, {
x: 10,
y: 5
}]
}]
},
options: {
scales: {
x: {
type: 'linear',
position: 'bottom'
}
}
}
});
</script>
</body>
</html>
</apex:page>
you are using a very old version of chart.js (as a matter of fact, the first ever released).
You could solve this by replacing:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>
with
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Fixed versions can also be found, e.g. here.
working codepen
Chart JS 3.9.1
Laravel 9.x
There are 50 thousand questions using 20 different versions and none of them, from what I have found are helpful. I have checked the version, checked the docs, and even checked the page source to see if data was in place. No Errors, No Chart, Nothing.
In a blade file I have done:
<div>
<canvas id="item-listing-data" width="400" height="400"></canvas>
</div>
#push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('item-listing-data').getContext('2d');
const saleDataChart = new Chart(ctx, {
type: 'line',
labels: #json($saleData['labels']),
datasets: [{
label: 'Sale Data',
data: #json($saleData['data']),
fill: false,
borderColor: 'rgb(34, 67, 156)',
tension: 0.1
}]
});
</script>
#endpush
As far as I know, from the docs this is what you do. This is how you render the chart.
If I inspect the page to see the JS that gets spit out:
const ctx = document.getElementById('item-listing-data');
const saleDataChart = new Chart(ctx, {
type: 'line',
labels: ["Mon Aug 2022 14:08:13"],
datasets: [{
label: 'Sale Data',
data: [10000],
fill: false,
borderColor: 'rgb(34, 67, 156)',
tension: 0.1
}]
});
Looks right to me.
When I investigate the page I see a div that is way too large, the canvas element - but Im sure that can be fixed with options, and no chart. Just an empty canvas.
Again, I know this question has been asked a thousand times, but I:
Followed the docs
Checked for issues in my code
Made sure I was loading the correct version of chart js
And still no chart, no errors, nothing.
Even if I replace labels and data with [1,2,3] - Nothing, no chart, no errors.
Thoughts?
AFA I can see, the issue seems to be in the chart configuration and the data node is missing.
Without it, the chart doesn't have data to show.
The code should be:
<div>
<canvas id="item-listing-data" width="400" height="400"></canvas>
</div>
#push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('item-listing-data').getContext('2d');
const saleDataChart = new Chart(ctx, {
type: 'line',
data: { // <--- this was missing
labels: #json($saleData['labels']),
datasets: [{
label: 'Sale Data',
data: #json($saleData['data']),
fill: false,
borderColor: 'rgb(34, 67, 156)',
tension: 0.1
}]
}
});
</script>
#endpush
I'm completing my cs50 final project so am coding in the cs50 ide. I am trying to create a graph using chart.js so am using the test code they provide to try and get it to work on my website. However I am getting the error written in the title when I'm on my server. I have tried putting the JavaScript code in a separate file but that does not work either. Any ideas as to what i am doing wrong?
Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<script scr="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js"></script>
<title> Chart</title>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var 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],}]
}});
</script>
</body>
</html>
You have a typo in your chart JS script inclusion.
You have done scr and not src.
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js"></script>
I use chart.js and its dependency, jQuery to draw chart. In my case, I need 2 doughnut charts in one of my page, here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<title>Document</title>
<script>
$(function () {
var ctx = document.getElementById("layanan").getContext('2d');
var data = {
datasets: [{
data: [10, 20, 30],
backgroundColor: [
'#3c8dbc',
'#f56954',
'#f39c12',
],
}],
labels: [
'Request',
'Layanan',
'Problem'
]
};
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: {
maintainAspectRatio: false,
legend: {
position: 'bottom',
labels: {
boxWidth: 12
}
}
}
});
var ctx_2 = document.getElementById("layanan_subbagian").getContext('2d');
var data_2 = {
datasets: [{
data: [10, 20, 30],
backgroundColor: [
'#3c8dbc',
'#f56954',
'#f39c12',
],
}],
labels: [
'Request',
'Layanan',
'Problem'
]
};
var myDoughnutChart_2 = new Chart(ctx_2, {
type: 'doughnut',
data: data_2,
options: {
maintainAspectRatio: false,
legend: {
position: 'bottom',
labels: {
boxWidth: 12
}
}
}
});
});
</script>
</head>
<body>
<canvas id="layanan" width="240" height="240"></canvas>
<canvas id="layanan_subbagian" width="240" height="240"></canvas>
</body>
</html>
When I only have one chart, nothing's gone wrong, but when I try to add one more chart, my charts become so large and my page layout becomes so messy. Can you guys figure out what's wrong with my code? Thanks.
As per chartjs documentation:
Detecting when the canvas size changes can not be done directly from
the CANVAS element. Chart.js uses its parent container to update the
canvas render and display sizes. However, this method requires the
container to be relatively positioned and dedicated to the chart
canvas only. Responsiveness can then be achieved by setting relative
values for the container size
Source: https://www.chartjs.org/docs/latest/general/responsive.html
You should wrap your canvas into div and add width,height into it.
Here is the change I did
<div style="width:240px;height:240px">
<canvas id="layanan"></canvas>
</div>
<div style="width:240px;height:240px">
<canvas id="layanan_subbagian" ></canvas>
</div>
$(function () {
var ctx = document.getElementById("layanan").getContext('2d');
var data = {
datasets: [{
data: [10, 20, 30],
backgroundColor: [
'#3c8dbc',
'#f56954',
'#f39c12',
],
}],
labels: [
'Request',
'Layanan',
'Problem'
]
};
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: {
maintainAspectRatio: false,
legend: {
position: 'bottom',
labels: {
boxWidth: 12
}
}
}
});
var ctx_2 = document.getElementById("layanan_subbagian").getContext('2d');
var data_2 = {
datasets: [{
data: [10, 20, 30],
backgroundColor: [
'#3c8dbc',
'#f56954',
'#f39c12',
],
}],
labels: [
'Request',
'Layanan',
'Problem'
]
};
var myDoughnutChart_2 = new Chart(ctx_2, {
type: 'doughnut',
data: data_2,
options: {
maintainAspectRatio: false,
legend: {
position: 'bottom',
labels: {
boxWidth: 12
}
}
}
});
});
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<title>Document</title>
<div style="width:240px;height:240px">
<canvas id="layanan"></canvas>
</div>
<div style="width:240px;height:240px">
<canvas id="layanan_subbagian" ></canvas>
</div>
Try to add
options: {
responsive: false
}
I found two solutions:
You have to put the charts in a container such as a div. <canvas> is an element semantically dedicated for drawing graphics dynamically via scripting. <div> is a general-purpose container. The important point is: width and height properties are not the size in px but the ratio between them. <canvas id="layanan" width="240px" height="240px"></canvas> would result into a 1:1 ratio, but you need a parent container to work with. In the example below, I put a div around each canvas.
You can disable this feature by setting maintainAspectRatio to false. Removing the divs from my code and setting this into yours gives the same result :)
Cheers!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<title>Document</title>
<script>
$(function () {
var ctx = document.getElementById("layanan").getContext('2d');
var data = {
datasets: [{
data: [10, 20, 30],
backgroundColor: [
'#3c8dbc',
'#f56954',
'#f39c12',
],
}],
labels: [
'Request',
'Layanan',
'Problem'
]
};
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: {
responsive: false,
maintainAspectRatio: false,
legend: {
position: 'bottom',
labels: {
boxWidth: 12
}
}
}
});
var ctx_2 = document.getElementById("layanan_subbagian").getContext('2d');
var data_2 = {
datasets: [{
data: [10, 20, 30],
backgroundColor: [
'#3c8dbc',
'#f56954',
'#f39c12',
],
}],
labels: [
'Request',
'Layanan',
'Problem'
]
};
var myDoughnutChart_2 = new Chart(ctx_2, {
type: 'doughnut',
data: data_2,
options: {
responsive: false,
maintainAspectRatio: false,
legend: {
position: 'bottom',
labels: {
boxWidth: 12
}
}
}
});
});
</script>
</head>
<body>
<div>
<canvas id="layanan" width="240px" height="240px"></canvas>
</div>
<div>
<canvas id="layanan_subbagian" width="240px" height="240px"></canvas>
</div>
</body>
</html>
I use ckeditor and create chart with chartjs plugin:
<div class="chartjs" data-chart="doughnut" data-chart-height="300"
data-chart-value="[{"value":70,"label":"A"},{"value":50,"label":"B"}]"></div>
BUT I don't know how can draw chart when html page loaded.
You can use canvas for your chart container
<canvas id="chartjs" width='300' height='300'></canvas>
And then run this javascript, passing your parameters as follows:
var ctx = document.getElementById("chartjs");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["A", "B"],
datasets: [{
data: [70, 50],
backgroundColor: ['red', 'pink']
}]
},
});
See working example here
I just add these lines to head and solve my problem:
<link rel="stylesheet" href="ckeditor/plugins/chart/lib/chart.css">
<script src="ckeditor/plugins/chart/chart.min.js"></script>
<script src="ckeditor/plugins/chart/widget2chart.js"></script>