5 Charts Example To Get You Started

The numbers explain the reality, but sometimes they are not clear. Series and reports are powerful but not always understandable tools. For this reason, it is often convenient to add a graphic to your pages. But how to do it? Well, today I try to explain the simplest way I have found to add charts to a web page.

Introduction

Before, here’s what I want to create:

There are 5 different charts but the procedure is very similar:

a column chart
a pie chart
a treemap chart
a scatter plot
a calendar chart

In this tutorial I will be using data from the Medium Partner Program. I already used them a few days ago when I talked about how to create responsive tables with CSS. To see how to download and import statistics I recommend this post:

How to Get Medium Stats With JavaScript and Svelte

However, in summary, just go to medium.com/me/stats?format=json&count=100 and download the page. Of course I can create graphs with any data, but to remind me of the process in the future I need some sample data.

The toolbox

What do I need to easily create graphics with JavaScript, HTML and CSS? On the net you can find various libraries. The simplest one, in my opinion, is Google Charts. As you can easily guess from the name, it is a Google library. Google defines it like this:

Google Charts provides a perfect way to visualize data on your website

The quickstart page explains how to create a pie chart. It is a good starting point but it is not the path I intend to follow. There is an easier way.

Searching on the net you can find the Google Charts API web components. This allows you to create a graph with a syntax similar to this:

I can import the APIs into a project with the command:

npm i @google-web-components/google-chart

The second tool I intend to use is Svelte. Svelte allows you to easily create web apps. And, above all, it allows me to write some example code in a synthetic way.

Of course, it is possible to use any other framework, or even none. But Svelte simplifies the steps.

How to create a column chart

I start with the first chart:

I start by creating a GoogleChartColumn.svelte component. First I import @google-web-components/google-chart:

Then I define the props. The Google documentation is well done and allows you to understand what can be used. For the moment I will limit myself to the basics:

data: for the data to be displayed
options: to configure some details of the graph

I am not interested in many options. I just need to be able to customize the title and decide the color of the various columns. Consequently the props become:

The data is of a bizarre kind. Basically they are a matrix where the first row indicates the name and type of the columns:

The following lines instead contain the actual data:

I add a variable for the configuration options:

Since I only use one dataset the legend is useless, so I set it as none. I also change the background color so it doesn’t detach from the rest of the page (it’s transparent). Finally I change the formatting of the chart title using the CSS properties.

The complete component code is:

But how can I actually use it in an HTML page? Like this:

To get the data to insert I create the earningPerMonth function:

Obviously this function must be modified according to your data.

How to create a pie chart

Starting from this example it is possible to create other types of graphs. Obviously each has its own particular characteristics. Next is a pie chart.

I create the GoogleChartPie.svelte file

The pie chart has the data split into two different props: cols and rows.

It also allows you to pass a numerical value (between 0 and 1) to decide the minimum width of the slices of the cake. For example, if I set sliceVisibilityThreshold = 0.03 I will only be able to see categories that are at least 3% of the total. The smaller ones are grouped under Other.

The JavaScript function to get the data looks like this:

Now I can insert the graphic on the page with:

Using the same code but changing the values passed to the props I can create different graphs on the same page:

How to create a treemap chart

Wikipedia explains well what a treemap is:

In information visualization and computing, treemapping is a method for displaying hierarchical data using nested figures, usually rectangles.

I think the steps to follow are now clear. I create the GoogleChartTreemap.svelte file:

The specific props are:

maxDepth: The maximum number of node levels to show in the current view.
maxPostDepth: How many levels of nodes beyond maxDepth to show in “hinted” fashion.
minColor, midColor e maxColor

The function to extract and prepare the data looks something like this:

The HTML code is

How to create a scatter chart

The scatter plot allows you to see if there is any correlation between two data. In this example I tried to relate the length of the different posts (measured with the number of words) and the revenue from them. Also I have set a custom tooltip when we hover the mouse over the various points.

The code of the GoogleChartScatter.svelte component is similar to the above:

There are 2 specific props for this graph:

axisY: the title to show on the Y axis
axisX: the title to show on the X axis

I also add the tooltip: {isHtml: true} option. What is it for? To be able to customize the tooltip of the various points using HTML and CSS.

The function to get the data for the chart is slightly different from the previous ones:

I add to the data a string containing some HTML code. This code is then rendered by the component and displayed as an HTML element of the page.

I can insert the graphic into an HTML page using

How to create a calendar chart

The fifth chart is a calendar chart. It is used to view data on a calendar. The color intensity of the individual days indicates the relative amount per day. The classic example is the one shown in the GitHub profile:

Compared to the previous charts this one requires some CSS and a little trick. But first the code base:

In this case I need only one additional props, colorAxis. It is an array of colors. By default the lowest value is represented by a white. After importing the component into the page, however, I noticed that it was blending into the background. So I decided to start with a stronger color:

The function to prepare the data is similar to the previous ones, with obviously some small differences:

Good but not enough. There remains a problem related to the size of the graph. I don’t know why but the component is too short for the calendar length. I then have to force the size using a CSS property:

The height of the graph is also wrong. In this case I have to calculate it based on the number of years I want to show. First I have to figure out the number of years to show

Then I use the style: property directive:

By combining the whole the component becomes:

That’s all. Obviously this method is not perfect. However, I find it simpler than other implementations I’ve tried. The code, as usual, is available in the repository on GitHub: