802 reads

Implementing Dashboards Using Google Charts.

by Maksym Mostovyi January 30th, 2022

Too Long; Didn't Read

Implementing charts without coding.

Companies Mentioned

featured image - Implementing Dashboards Using Google Charts.

In this article I will show how to develop a dashboard with several charts and spend minimum time on that. That approach does not require deep knowledge in programming, just some basic things of HTML and CSS. For charting, we will use Google charts. It has very clear documentation and a huge choice of charts, which we can just copy-paste and adjust with styles and titles we need.

For demo purposes, I have created a simple project, which contains an index file with dashboard markup, a file with styles, and several JavaScript files for charts.

So first, we just need to create some simple markup and styles, here how it looks like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Dashboard</title>
    <link rel="stylesheet" href="styles/styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="module" src="js/pieChart.js" defer></script>
    <script type="module" src="js/barChart.js" defer></script>
    <script type="module" src="js/lineChart.js" defer></script>
    <script type="module" src="js/map.js" defer></script>
</head>
<body>
<header>
    <span>Dashboard with google charts</span>
</header>
<section>
    <div class="container">
        <div class="row">
            <div class="chart-widget">
                <div class="widget-header">
                    <span>Company Performance</span>
                </div>
                <div class="chart">
                    <div id="bar-chart" style="width: 44vw; height: 400px;"></div>
                </div>
            </div>
            <div class="chart-widget">
                <div class="widget-header">
                    <span>Monthly performance for 2021 year</span>
                </div>
                <div class="chart">
                    <div id="line-chart" style="width: 44vw; height: 400px;"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="chart-widget">
                <div class="widget-header">
                    <span>Most popular products</span>
                </div>
                <div class="chart">
                    <div id="pie-chart" style="width: 34vw; height: 500px;"></div>
                </div>
            </div>
            <div class="chart-widget">
                <div class="widget-header">
                    <span>Map</span>
                </div>
                <div class="chart">
                    <div id="map" style="width: 54vw; height: 500px;"></div>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
</html>

We are almost ready to implement charts. Let's add a link to google charts in the head and we are ready to go.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

I've picked for my dashboard donat, line, bar charts, and geomap.

To implement them, we just need to drag code from documentation and paste it into our project. Then we need to adjust with the data set we need to show. We can also change colors if needed. There are also more advanced options available, but we will not use them during my example. Here is how the donut chart code looks like.

const drawChart = () => {
    var data = google.visualization.arrayToDataTable([
        ['Product', 'Sales'],
        ['TV',     9],
        ['Xbox',      3],
        ['Playstation',  3],
        ['Iphone', 6],
        ['MacBook',    3]
    ]);

    var options = {
        pieHole: 0.4,
    };

    // Here we have to pass an ID ov div where we want to append a chart.
    var chart = new google.visualization.PieChart(document.getElementById('pie-chart'));

    chart.draw(data, options);
}

google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);

The rest of the charts have very similar logic. We just change the data set and a call for the proper chart. Code for all charts you can check it out in my GitHub.

And here is a full picture, the dashboard with four charts we added.

As you see it's quite quick and simple to implement such things. Wrapping up, there are both advantages and disadvantages of using Google Charts.

Advantages

- Provides a big collection of charts;

- Easy to use and implements;

- Does not require deep knowledge of coding;

Disadvantages

- Does not provide as much flexibility in customizing charts as other libraries do;

- Some charts do not support a large amount of data;

- Requires network connection;

Wrapping up

Google charts are very easy to use and can provide a good choice of high-quality charts. They can be implemented even by a non-tech savvy person. It is a good solution in case there is a need to introduce a quick demo for the presentation of some demo app for end-user. But I believe for a bigger scale it is better to pick some other library, for example, D3.js. It provides enough flexibility in customizing the charts and can handle a huge amount of data. But the downside is that it is a bit more complicated to learn.

Hope it was useful. More about another library you get from my previous articles on Hacker Noon or on Github!