Create Easy Dashboards In HTML Using ChartJS

ChartJS is one of the most widely used open source Dashboard solutions across many platforms. Leveraging HTML5 canvas, its great rendering and responsive performances across browsers makes it a developer’s first choice.

ChartJS is one of the most widely used open source dashboard solutions across many platforms. Leveraging a HTML5 canvas, its great rendering and responsive performances across browsers makes it a developer’s first choice.

This article will explain how to create a simple graph with the below data in simple HTML. We will use the simple dataset below (top 5 longest rivers of the world) to showcase a few of the graphs,

River Length in KMs
Nile 6650
Amazon 6400
Yangtze 6300
Mississippi 6275
Yenisei 5539

Getting Started

We start with a simple skeleton of HTML5. Place just a canvas element with id “myChartContainer”.

Now, ChartJS requires jQuery, Bootstrap and its ChartJS libraries. You can link them from CDN in your HTML page –

At this point, the HTML and the webpage would look like,

  1. <!DOCTYPEhtml>  
  2. <html>  
  3.     <head>  
  4.         <metacharset="utf-8"/>  
  5.         <metahttp-equiv="X-UA-Compatible"content="IE=edge">  
  6.             <title>Chart JS Demo</title>  
  7.             <scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  
  8.             </script>  
  9.             <scripttype="text/javascript"src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js">  
  10.             </script>  
  11.             <linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>  
  12.         </head>  
  13.         <body>  
  14.             <divstyle="width: 100%; text-align: center">  
  15.       This space is reserved for my Chart JS graphs!   
  16.                 <br>  
  17.                     <br>  
  18.                         <buttononclick="GenerateChart()">Generate Chart  
  19.                         </button>  
  20.                         <br>  
  21.                             <br>  
  22.                                 <divstyle="position: relative; height:800px; width:800px">  
  23.                                     <canvasid="myChartContainer"style="border:1px solid">  
  24.                                     </canvas>  
  25.                                 </div>  
  26.                             </body>  
  27.                         </html>  
Create Easy Dashboards In HTML Using ChartJS 

Adding the ChartJS elements inside your HTML

Now, moving on to the fun part! We have added a button – Generate Chart, and have added a function GenerateChart() on its onClick event.

Within the script tags, we will get the context of the canvas where the chart will be rendered and store it in a variable ‘ctx’

To make it easy, we will have a look at the minimal code representation of a dashboard. Below is the entire code – we will have explanations/description of the prime elements after the code,

  1. <!DOCTYPEhtml>  
  2. <html>  
  3. <head>  
  4. <metacharset="utf-8"/>  
  5. <metahttp-equiv="X-UA-Compatible"content="IE=edge">  
  6. <title>Chart JS Demo</title>  
  7.    <scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.    <scripttype="text/javascript"src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>  
  9. <linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>  
  10. <script>  
  11. functionGenerateChart(){  
  12. myLabels = ['Nile''Amazon''Yangtze''Mississippi''Yenisei'];  
  13. myData = [6650 ,6400 , 6300 , 6275 , 5539];  
  14.   
  15. varctx = document.getElementById('myChartContainer').getContext('2d');  
  16. varmyChart = newChart(ctx, {  
  17. type:'horizontalBar'// bar, horizontalBar, pie , line, doughnut, radar, polarArea  
  18. data:{  
  19.    labels:myLabels,  
  20.    datasets:[{  
  21.    label:'Length of River',  
  22.    data:myData,  
  23.    backgroundColor: ['green''red''blue''purple''black'],  
  24.    borderWidth:1,  
  25.    borderColor:'black',  
  26.    hoverBorderWidth:3,  
  27.    hoverBorderColor:'black',  
  28.             }]  
  29.         },  
  30. options:{  
  31. maintainAspectRatio:true,  
  32. title:{  
  33.       display:true,  
  34.       text:'Top 5 rivers of the world!',  
  35.       fontSize:20  
  36.             },  
  37. legend:{  
  38.       display:true,  
  39.       position:'right',  
  40.    labels:{  
  41.       fontColor:'#000',  
  42.                     }  
  43.             },  
  44. tooltips:{  
  45. enabled:true  
  46.                 }  
  47.             }  
  48.         });  
  49.     }  
  50. </script>  
  51. </head>  
  52. <body>  
  53.     This space is reserved for my Chart JS graphs! <br><br>  
  54. <buttononclick="GenerateChart()">Generate Chart</button><br><br>  
  55.   
  56. <divstyle="position: relative; height:800px; width:800px">  
  57. <canvasid="myChartContainer"style="border:1px solid"></canvas>  
  58. </div>  
  59. </body>  
  60. </html>  

So, this is how ChartJS is instantiated in your HTML DOM,

  1. varctx = document.getElementById('myChartContainer').getContext('2d');  
  2. varmyChart = newChart(ctx, {//... the usual chartJS configs...//});  

Chart JS relies on 3 major components. The 3 of them are explained below,

Type This indicates the type of graph you need. Acceptable values are – · Bar · horizontalBar · pie · line · doughnut · radar · polarArea
Data This is where the actual data is targeted. It has 2 basic types – · Labels (where all the labels are defined as arrays) · Datasets (where the actual data resides along with how the data is interpreted) Datasets can have the below components · label (label of the graph) · data (the MAIN data) · backgroundColor (color for all the bars, pie sections, etc. Must be an array and should match the number of data sets) · borderWidth (sample value - 1) · borderColor(sample value - red) · hoverBorderWidth (sample value - 2) · hoverBorderColor (sample value - 'black') · hoverBackgroundColor (sample value - 'black')
Options This is where you specify all the configuration options A few configuration values include below - · title · legend · layout · tooltips (enabled – true/false)

So, that pretty much covers the code. Now – time to have a look at the graph!

Create Easy Dashboards In HTML Using ChartJS

Don't like the horizontalBar graph? No problem! Just change the type to bar and see the magic. That’s how interactive these graphs are!

Create Easy Dashboards In HTML Using ChartJS