This question already has answers here:
Using HTML script tags to code while they have a source
(2 answers)
Closed 6 years ago.
I am working on a basic website that includes php pages. I am hosting my website on cpanel. I would like to incorporate this Javascript library (here) into my project. I have downloaded the project, copied the contents from the source file into my project, and tested their example code (here), but nothing is displaying on my page. Is importing/implementing the project as simple as that, or did I miss a few steps? Thanks!
I apologize if I misused any terms, as my knowledge with web development is significantly lacking from other fields. Thanks!
EDIT: I am not using jquery/do not have it installed; do I need to add this?
Code below:
<div class="jumbotron">
<h1> Test</h1>
<canvas id="myChart" width="400" height="400"></canvas>
<script type="text/javascript" src="assets/js/chart.js" charset="utf-8">
var ctx = document.getElementById("myChart");
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],
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: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
</div>
you can check this out because it worked for me. You were not getting any display because you included the source attribute in your script tag. What i know is that when you have a script tag while working in a particular document and you decide to put some code between the script tags then you don't include src tag unless the code is in another file.Hope this helps.
<head>
<script type="text/javascript" src="assets/js/chart.js"></script>
</head>
<div class="jumbotron">
<h1> Test</h1>
<canvas id="myChart" width="400" height="400"></canvas>
<script type="text/javascript">
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],
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: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
Related
I am trying to use Chart.js in my HTML document(main.html) by calling the the javascript function form a separate javascript file (home.js).
The HTML looks as follows:
{% block head %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script type="text/javascript" src="/static/js/home.js"></script>
{% endblock %}
{% block body %}
<div>
<canvas id='myChart'></canvas>
</div>
<script>
Chart(data, document.getElementById('myChart'))
</script>
The js file looks as follows:
function Chart(data, ctx){
console.log("JS")
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],
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: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
When I do that it somehow keeps executing the the function (ie. stuck in a loop, I checked that by using console.log('JS'). I did not figure out why it keeps doing that. The chart is never displayed.
If I add the function directly in the html in a tag it works flawlessly, but I'd rather want the js separate from the html.
I use flask as web framework and that is where the variable 'data' is coming from. Any tips or ideas?
Thanks and regards
PS: I don't use 'data' at the moment because I don't even get the chart running (it will be the result of db query later.
First, two problems unrelated to your infinite loop problem:
In main.html, the data param you are sending to Chart.js is undefined. Presumably you will fix that in your actual code.
In the selector you send to Chart.js, you are sending the canvas – document.getElementById('myChart') – when you should be sending the canvas context – document.getElementById('myChart').getContext('2d')
Once those are fixed, you could potentially be rendering a chart, but you get an infinite loop because you have called your own function Chart when that's also the name of the Chart.js function (where it says var myChart = new Chart(ctx, ...). Just change your function name to something else.
Here's an example where I just put in an empty array for data and changed your function name to drawChart.
function drawChart(data, ctx){
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],
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: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
drawChart([], document.getElementById('myChart').getContext('2d'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id='myChart'></canvas>
NB: The script error that shows up in the console log is because of cross-origin scripting on StackOverflow and is something you can fix on your own site.
I am trying to make my chart smaller but couldn't figure out how.
<canvas id="myChart"
style="position: relative" width="200" height="100">
</canvas>
My chart.js html code.
<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],
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: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
and the js script.
So the width and height in my canvas is set to 200 and 100 (been trying out different values but not success).
I want it to be smaller so i can put it next to my div but it just gets way to big.
thanks in advance.
Wrap it in a <div>, i.e:
<div style="width:100px; height:100px">
<canvas id="myChart"></canvas>
</div>
Example below:
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],
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: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div style="width:300px; height:300px">
<canvas id="myChart"></canvas>
</div>
I am working on a graph page for a project and my client does not want me to use npm, bower or CDN. so my question is how would I use the chartjs library without using these options?
I tried using it this way:
var Chart = require(['../chartjs/Chart.js']);
var ctx = document.getElementById("bar-chart");
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],
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: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
but I keep getting the following error:
Uncaught Error: Script error for "../chartjs/Chart.js".
Am I missing a step?
Try this
import chart from './chart';
console.log(chart);
I've been trying to get the ChartJS example from http://www.chartjs.org/docs/latest/ working, but I'm running into two unexpected issues:
The graph is not animating
The graph is huge (it seems to be ignoring the height/width properties on the canvas element).
Snippet (copied from the documentation) is here: https://codepen.io/anon/pen/KmOQoj
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js">
</script>
<script>
function load() {
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],
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: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
</script>
</head>
<body onload="load()">
<canvas id="myChart" width="400" height="400"></canvas>
</body>
</html>
here is working code
keep canvas inside div and set height and width for div and make chart as responsive
function load() {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
responsive:true,
maintainAspectRatio: false,
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: {
yAxes: [{
ticks: {
beginAtZero:false
}
}]
}
}
});
}
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
</head>
<body onload="load()">
<div style="width:400px;height:400px">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
</body>
</html>
I want to use a external font in my chart made with Chart JS. Does anyone know if that is possible? I've searched trough the documentation but I haven't found a solution.
It is indeed possible.
Considering you have imported your font (from GoogleFonts for instance),
you just have to edit the defaultFontFamily attribute in your chart options like this :
var options = {
// 'Raleway' is the name of the fond I imported from GoogleFonts
defaultFontFamily: Chart.defaults.global.defaultFontFamily = "'Raleway'"
}
See Lolka's answer for more information about the defaultFontFamily attribute.
A full working example:
Chart.defaults.global.defaultFontFamily = "Indie Flower";
var ctx = document.getElementById("myChart");
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],
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: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<canvas id="myChart" width="400" height="400"></canvas>
First result for google Chart.JS custom font
From documentation:
There are 4 special global settings that can change all of the fonts
on the chart. These options are in Chart.defaults.global.
...
defaultFontFamily String "'Helvetica Neue', 'Helvetica', 'Arial',
sans-serif" Default font family for all text