The Canvas
You can reserve a section of your screen for drawings using the <canvas> tag.
For more information on the canvas, go here.
Any questions or comments should be directed to: The creator's email
You can reserve a section of your screen for drawings using the <canvas> tag.
For more information on the canvas, go here.
Any questions or comments should be directed to: The creator's email
You can link to external libraries by creating an empty <script> tag. Use the src attribute to actually link to the library.
For example, to link to the Chart.js library, you would say:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Information on chart.js can be found here.
Any questions or comments should be directed to: The creator's email
Charts in Chart.js are drawn using the chart object. The chart object is linked to your canvas. Each kind of chart has a different data structure. The data structure for a line chart looks like this:
var myChart=new Chart(<id of canvas>,{ //begin Chart
type: 'line',
data:{
labels: [],
datasets: [
{ //begin dataset
data: [],
label: ,
borderColor: "",
fill: false
}, //end dataset note the comma
{ //begin dataset
data: [],
label: ,
borderColor: "",
fill: false
}, //end dataset note the comma
.
.
.
{ //begin dataset
data: [],
label: ,
borderColor: "",
fill: false
} //end dataset note no comma
] //end datasets
},//end data
options: { //begin options
scales: { //begin scales
x: {
display: true,
title: { //begin scaleLable
display: true,
text: ""
} //end scaleLabel
}, //end xAxes
y: { //begin yAxes
display: true,
title: { //begin scaleLable
display: true,
text: ''
} //end scaleLabel
} //end yAxes
} //end scales
} //end options
});//end Chart
The below example is of a line chart using hardcoded data.
Information on line charts can be found here.
Any questions or comments should be directed to: The creator's email
The data structure for a bar chart looks like this:
var myChart=new Chart(<canvas id>,{ //begin Chart
type: 'bar',
data:{
labels: ['<comma delimited labels go here>'],
datasets: [
{ //begin dataset
data: [<comma delimited data set goes here>],
label: "<data set label goes here>",
backgroundColor: "<bar color goes here>"
}, //end dataset note the comma
{ //begin dataset
data: [<comma delimited data set goes here>],
label: "<data set label goes here>",
backgroundColor: "<bar color goes here>"
}, //end dataset note the comma
.
.
.
{ //begin dataset
data: [<comma delimited data set goes here>],
label: "<data set label goes here>",
backgroundColor: "<bar color goes here>"
} //end dataset note no comma
] //end datasets
}, //end data
options: { //begin options
scales: { //begin scales
y:{
beginAtZero: true,
display: true,
title: { //begin scaleLable
display: true,
text: '<y-axis label goes here>'
} //end scaleLabel
}, //end yAxis
x: {
display: true,
title: {
display: true,
text: '<x-axis label goes here>'
} //end scaleLabel
}, //end xAxes
} //end scales
} //end options
});//end Chart
The below example is of a bar chart using hardcoded data.
Information on line charts can be found here.
Any questions or comments should be directed to: The creator's email
The data structure for a pie chart looks like this:
var myChart=new Chart(<id of the canvas>,{ //begin Chart
type: 'pie',
data:{
labels: [<comma separated list describing each slice of the pie>],
datasets: [
{ //begin dataset 1
data: [<comma separated list of values of each slice of the pie>],
backgroundColor: [<comma separated list of strings denoting the color of each slice
of the pie>]
} //end dataset 1
] //end datasets
}//end data
});//end Chart
The below example is of a pie chart using hardcoded data.
Information on line charts can be found here.
Any questions or comments should be directed to: The creator's email
ChartJS was designed to work with AJAX. Read the AJAX data into a variable and then construct the various ChartJS structures. You can use the push method to add an element to an array.
When done constructing the chart object, use chart.update() to refresh the chart drawing.
The below example uses JSON formatted weather data from WeatherDB. The JSON formatted data is read into an array called citydata. Of course, citydata isn't formatted to be able to be read by ChartJS. So, we construct a set of new arrays with the appropriate data, feed that into ChartJS and display our chart.
Information on line charts can be found here.
Any questions or comments should be directed to: The creator's email