Intro to Programming Database Internet of Things IT Project Management Networking Web Development Security For Research Students

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

Linking to External Libraries

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

A Simple Line Chart

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

A Simple Bar Chart

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

A Simple Pie Chart

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

AJAX Charts

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