Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Beautiful charts enrich your data

Saturday, December 29th, 2018 by Servage

chartjsMany websites display data tables as part of their content. This is easily done with the <table> element in HTML, which is invented for the purpose of showing tabular data. However, graphs and charts have been more cumbersome for years, because they are more complex content elements. Initially charts were generated as images which could be included in the web page. Later the Flash technology has made more interactive charts possible, however the problems with Flash and its limitations have rendered those kinds of charts unpopular. Lately HTML has evolved a lot, and with the introduction of the <canvas> element more advanced drawings on pages have become possible.

With the <canvas> element you can now create pretty great charts with interactive functionality, like in the old days with Flash. These graphs (and other drawings, if interested) can be easily drawn using a charting library. Many such libraries are available, but the best ones have been rather expensive for years. Fortunately the community has developed some great open-source libraries, and you can get beautiful charts to enrich your data for free.

Using ChartJS

ChartJS is one of the open-source libraries, and you can start using it right away. The only requirement is a HTML5 compatible browser with Javascript enabled. The <canvas> elementĀ is drawn charts upon using Javascript by ChartJS.

Start out by adding a canvas element to your page and store the 2d context of the element in a variable in Javascript.

// HTML canvas element
<canvas id="chart" width="400" height="400"></canvas>
// Get context of the canvas element
var context = document.getElementById("myChart").getContext("2d");

DefineĀ the data you want to show in the graph. For a line chart you can add labels for the axis, and lines to be shown on the chart.

// Data
var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      label: "Line number 1",
      fillColor: "rgba(220,220,220,0.2)",
      strokeColor: "rgba(220,220,220,1)",
      pointColor: "rgba(220,220,220,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(220,220,220,1)",
      data: [65, 59, 80, 81, 56, 55, 40]
    },
    {
      label: "Line number 2",
      fillColor: "rgba(151,187,205,0.2)",
      strokeColor: "rgba(151,187,205,1)",
      pointColor: "rgba(151,187,205,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(151,187,205,1)",
      data: [28, 48, 40, 19, 86, 27, 90]
    }
  ]
};

You can also declare options to override the default options by chart js.

// Options
var options = {
  // ...
}

The final step to setup the chart is adding all the elements together like below.

// Create line chart and add the canvas context to draw on
var chart = new Chart( context ).Line(data, options);

There are numerous different chart types you can use. For example the traditional Line, Pie and Bar charts, but also other styles like Radar and Polar charts.

Beautiful charts enrich your data, 3.7 out of 5 based on 7 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.