These days I am working out some projects that have to do with analyzing text, and it would be nice to find a way to visualize that data with canvas elements. I was thinking of making my own solution, but I am glad that I have found charts.js as it is pretty much just what I had in mind, and seems to work great when it comes to quickly getting up and running with basic charts.
So there is more than one way to make charts with canvas of course as there is doing just about everything that comes to mind when it comes to working out my own solutions for presenting data. However if I just want a simple line or pie graph there are solutions out on the open interment that can be used to get that out of the way in a flash.
It is not to hard to just work out a chart with just the canvas 2d drawing context by itself. However even so it is still something that can prove to be a little time consuming, and pull attention from the aspects of the project that really matter. In any case I will be going over some char.js examples here, as well as my own copy and past native solution that I worked out for this post on canvas and charts.
So to get started with chartjs first I need to grab the version of chartjs that I want to use for thus post. In this example I was using chartjs 2.7.1. Once I have a copy of chartjs to link to with a script tag I can then write some code for a basic line chart.
Updating a chart is as simple as just changing the dataset values and calling the chart.update method in the instance of chart that is returned when calling the constructor.
Although using chartjs is a great solution for quickly getting a line chart as well as several other types of charts in a project, I often prefer to work out my own solutions for things like this. I might want to make a simple solution that will not eat up less overhead, or do something new when it comes to how to go about presenting data. Another reason that comes to mind is to just simple have control when it comes to things like licensing terms, bugs, coding style and so forth.
Of course it will be a bit time consuming compared to just adding chartjs to a project and moving on. However I have found that it is really not to hard to get a basic working solution up and running, and I also have the option to make the solution more streamlined, with features that I want, and no additional bulk that will slow down site performance.
I have a self executing function expression or Immediately Invoked Function Expression (IIFE) that returns the method that will be used to draw the line chart and inside the body of the closure I have a single helper function worked out that sets the scale of the data based on the height of the canvas. In addition the width of the canvas stipulates the delta x value that will process of each item in the data set.
So here I have an html file example in which I am using the draw line chart method that I worked out.
The project works as expected, but there is a bit more that comes to mind. I might want better control over the location and size of the area where the line chart will be placed in the canvas for example. In addition I would also want to add some labeling for the scale and a legend. However there is still only so much more that comes to mind and it still fulfills the most important aspect of such a project.
Chart.js is pretty cool for doing anything with charts, and getting such tasks out of the way real fast and moving on, at least when it comes to some usual options when it comes to charts. There is also doing way more when it comes to working out my own solutions for charts, graphs, and creative ways to go about presenting data. One idea that comes to mind is to make mu own solution that is not just my own code, but pulling the use of three.js into the mix to make all kinds of cool 3d type graphs and charts. I just wanted to put together a quick post on this one, I will likely write more about it in the future.