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>
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
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" />
I want to use CoffeeScript inside my views folder. As I have a partial file in my views folder as _test.html.erb which is as follows:
<canvas id="doughnutChart" width="250" height="250"></canvas>
<script type="text/javascript">
var doughnut = document.getElementById("doughnutChart").getContext("2d");
var dchart = new Chart(doughnut, {
type: 'doughnut',
data: {
},
options:{
}
});
</script>
Now I want to have CoffeeScript over here, how can I do that.
Thank you
You it is possible by using the cdn coffee script cdn
Or you can visit my js fiddle
Inline cofeescript inside html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.7.1/coffee-script.min.js"></script>
<title>CoffeScript on browser</title>
</head>
<body>
<canvas id="myChart"></canvas>
<script type="text/coffeescript">
alert 'It works!'
ctx = document.getElementById('myChart').getContext('2d')
chart = new Chart(ctx,
type: 'bar'
data:
labels: [
'January'
'February'
'March'
'April'
'May'
'June'
'July'
]
datasets: [ {
label: 'My First dataset'
backgroundColor: 'rgb(255, 99, 132)'
borderColor: 'rgb(255, 99, 132)'
data: [
0
10
5
2
20
30
45
]
} ]
options: {})
</script>
</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>