In this tutorial, we'll build a project that displays the historical rankings of universities around the world. It's interesting to check out and analyze which institutions consistently maintain their top-tier positions and which ones experience significant movement up or down the rankings over the years.

While building the dashboard, we'll load and structure the dataset, display all important information in a pivot table, and then create charts to visualize the top 10 universities and their ranking trends over time.

Even though we'll walk through this specific example here, you can apply this same approach to many other datasets to build data viz dashboards.

What We’ll Cover:

1. Tech Stack

2. Flexmonster Pivot Table Setup

3. Loading and Displaying the Data

4. Creating Charts

5. Adding Year Filtering Buttons

6. Styling

Tech Stack

Let’s talk about the tools we’ll be using so you know what you’ll need to have before following along.

First, we’ll use React, which is a popular JavaScript library for building interactive web interfaces. It helps create reusable components and manage data efficiently. According to the 2025 Stack Overflow Developer Survey, React is the second most popular web framework.

We’ll also use Flexmonster Pivot Table, a web component for displaying data in a table format. In general, pivot tables are widely used for data visualization because they allow you to quickly group, aggregate, filter, and explore large datasets from different perspectives.

With Flexmonster, you can easily create reports and customize your information. It also integrates smoothly with almost all popular modern frameworks (like React, which we’re using here!).

Next, we have ECharts, which complements the detailed data provided by the pivot table. It’s a powerful, open-source charting library that’ll give us the visual insights we need, offering over 20 chart types to effectively visualize historical university ranking trends.

Finally, we’ll use the World University Rankings Dataset. It contains data from three global rankings (THE, ARWU, and CWUR), providing information about well-known universities from 2012 to 2015 for detailed analytical research. The dataset size is 186.38 kB.

As a small disclaimer, this tutorial uses React, so some familiarity with it will help you follow along. But actually, you can use any other framework that's convenient for you. Flexmonster Pivot Table offers many integrations with popular frameworks, including Angular, Vue, Svelte, and more.

When we’re done with the project, we’ll get an interactive dashboard like this:

So now that you’re familiar with the tools, let’s get started!

Flexmonster Pivot Table Setup

To get started, you’ll need to integrate Flexmonster into your React project. I’ll walk you through how it works with React, but you can use other frameworks, too. You can find complete instructions in the Flexmonster docs.

First, create a React application using Vite:

npm create vite@latest flexmonster-project -- --template react

Also, don’t forget to install npm dependencies:

cd flexmonster-project
npm install

Next, we’ll install the Flexmonster wrapper for React. To do this, use this command:

npm install -g flexmonster-cli
flexmonster add react-flexmonster

Then add Flexmonster styles and the component to your App.jsx file:

import FlexmonsterReact from "react-flexmonster";
import "flexmonster/flexmonster.css";

Loading and Displaying the Data

Now it’s time to create a report object. This is a configuration that defines how the pivot table should load and display data. It describes how the fields should be interpreted, and how the table should organize and aggregate the information.

The first part of this is dataSource. It defines where the data comes from and how it should be read by the pivot table (format of the dataset, location of the file, and the structure of the fields that will be used).

In our case, we'll load a CSV file that contains the university rankings dataset and define the fields that will appear in the pivot table:

  const report = {
        dataSource: {
            type: "csv",
            filename: "/data/world-university-rankings.csv",
            mapping: {
                world_rank: { type: "number", caption: "World Rank" },
                institution: { type: "string" },
                country: { type: "string" },
                score: { type: "number", caption: "Score" },
                year: { type: "number", caption: "Year" },
            },
        },
…
}

The second part is the slice section. It defines which subset of the dataset will be displayed and how it should be organized. There, you'll render a table by setting measures, rows, and columns. You can also set the flatOrder property, where you define the order of the fields in the flat form.

You can find more detailed information about the Slice Object here. There are lots of interesting functional possibilities!

const report = {
…
       slice: {
            rows: [{ uniqueName: "institution" }],
            columns: [{ uniqueName: "[Measures]" }],
            measures: [
                { uniqueName: "world_rank", aggregation: "min" },
                {
                    uniqueName: "year",
                    aggregation: "none",
                    filter: { members: [`year.[${selectedYear}]`] },
                },
            ],
            flatOrder: ["institution", "world_rank"],
        },
        options: {
            grid: { type: "flat", showGrandTotals: "off" },
        },
    };

You’ll also need to include Flexmonster inside the React component. In this example, we'll include the FlexmonsterReact tag in JSX and pass the report object (which we defined earlier) as a property. You can do that with this code snippet:

<FlexmonsterReact
    ref={pivotRef}
    toolbar={true}
    report={report}
    width="100%"
    height="100%"
    reportcomplete={createChart}
/>

As a result, we've got pivot table with all the info about the universities:

Creating Charts

For some users, charts are easier to understand than tables, so let’s also create some now. I decided to display the top 10 universities in the world using bar charts. Bar charts are commonly used to compare values between categories, and they're quite useful for highlighting rankings or top performers.

We'll use ECharts here, but you can easily integrate Flexmonster with the most convenient chart library for you.

As a first step, make sure to install ECharts in your project:

npm install echarts

To prepare our data for display in the charts, we’ll create the prepareData() function. This function picks out the universities' names and their ranks, removes any invalid data, sorts it by rank, and keeps only the top 10. It returns two arrays: one with the names (for chart labels) and another with the rankings (for chart values):

const prepareData = (rawData) => {
    const rows = rawData.data
        .map((r) => ({ name: r.r0, rank: r.v0 }))
        .filter((r) => r.name && !isNaN(r.rank))
        .sort((a, b) => a.rank - b.rank)
        .slice(0, 10);
    return {
        labels: rows.map((r) => r.name).reverse(),
        values: rows.map((r) => r.rank).reverse(),
    };
};

Next, we'll set up chart options. You’ll need to decide in what form your dataset will be displayed: in this example, we'll choose a bar chart. We'll also set the title (here "Top 10 Universities by World Rank"), x-axis (shows the rank numbers) and y-axis (shows universities names), and tooltip, which shows info when you hover over a bar.

Also, don't forget to initialize the chart and apply these options. You can do all this with this code snippet:

const drawChart = (rawData) => {
    const { labels, values } = prepareData(rawData);
    const options = {
        title: {
            text: "Top 10 Universities by World Rank",
            left: "center",
            textStyle: { fontSize: 20, fontWeight: "bold" },
        },
        tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
        xAxis: { type: "value", name: "Rank" },
        yAxis: { type: "category", data: labels },
        series: [{ type: "bar", data: values, barMaxWidth: 30 }],
    };
    chartInstance = echarts.init(chartRef.current);
    chartInstance.setOption(options);
};

Also, an important part of chart configuration is the updateCharts() function, which redraws the chart when needed:

const updateChart = (rawData) => {
    if (chartInstance) chartInstance.dispose();
    drawChart(rawData);
};

So now we can see the charts we've created! This might look a bit basic and really hard to read, but don’t worry – we’ll make it look nicer and easier to understand in a later section.

Adding Year Filtering Buttons

You might have noticed that the dataset contains ratings for different years (from 2012 to 2015). It would be great if we could use the whole dataset, not just information for one year.

To manage this, we'll create filtering buttons for each year to provide more straightforward navigation.

First, we’ll add a div element which contains buttons for each year:

<div className="years-container">
    {[2012, 2013, 2014, 2015].map((year) => (
        <button
            key={year}
            onClick={() => handleYearChange(year)}
            className={`year-btn ${selectedYear === year ? "active" : ""}`}
        >
            {year}
        </button>
    ))}
</div>

In the above code snippet, you can see that each button calls handleYearChange(year) when being clicked. Let’s now examine what this handler does:

const handleYearChange = (year) => {
    setSelectedYear(year);

    const pivot = pivotRef.current?.flexmonster;
    if (pivot) {
        const newReport = {
            ...report,
            slice: {
                ...report.slice,
                measures: [
                    { uniqueName: "world_rank", aggregation: "min" },
                    {
                        uniqueName: "year",
                        aggregation: "none",
                        filter: { members: [`year.[${year}]`] },
                    },
                ],
            },
        };
        pivot.setReport(newReport);
    }
}; 

This function modifies the pivot table report to filter by that year, and refreshes the table. This way, clicking a button instantly shows only the data for the chosen year.

And now we've got buttons which display years from our dataset:

Styling

Finally, here’s my favorite part of every project: customization! I love experimenting with different styles and choosing the most appropriate one.

For this dashboard, I chose light violet and white colors to make the interface clean and easy to read. I personally associate the university vibe with these colors, so I think they match our dashboard perfectly. So let's go step by step through it.

The main container defines the overall layout and background. It centers the content on the page, adds some spacing, and sets the base font and colors.

.app-container {
    min-height: 100vh;
    width: 100vw;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;

    background: #ebe6f7;
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    color: #1b2a4e;
}

Next, we'll style the year filter buttons. They have rounded corners, a soft shadow, and a small hover effect so the interface feels interactive. The active button gets a violet background so it’s easy to see which year is selected.

.year-btn {
    padding: 10px 20px;
    background: #ffffff;
    border: 1px solid #cdd2e0;
    border-radius: 8px;
    cursor: pointer;
}

.year-btn:hover {
    background: #e1dffa;
}

.year-btn.active {
    background: #6c5ce7;
    color: white;
}

Also, the pivot table and the chart are located inside simple containers with rounded corners and slight shadows. This visually separates the components and keeps the layout logically structured.

.pivot-container,
.chart-container {
    width: 90%;
    background: #ffffff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 6px 20px rgba(15, 35, 95, 0.12);
}

.pivot-container {
    height: 56vh;
    margin-bottom: 24px;
}

.chart-container {
    height: 40vh;
}

And now, here's the result of our work!

Wrapping Up

In this tutorial, we've build an interactive dashboard for visualizing the world's top university rankings over the years. You learned how to load and show data in pivot table in a convenient and compact way, make bar charts to show comparative data, and add buttons to filter info by year.

You can now use these skills to visualize other datasets and play with different charts and customization options.

If you want to look closer at my code and get detailed styling code, you can check out my GitHub: https://github.com/filozopdasha/universities-dashboard

I would be delighted to hear your thoughts about this small project. I’m curious to see what you build!

Among the many data visualization libraries available, Chart.js stands out for its simplicity, flexibility, and interactivity.

This guide is like a roadmap to making charts with Chart.js. It doesn't matter if you're a coding expert or just getting started – I'll show you everything you need to know. We'll break down the basics of Chart.js, show you different types of charts (like bars and lines), and teach you how to make them look great and even respond to clicks.

Table of Contents

1. What is Chart.js?

2. Benefits of Using Chart.js for Data Visualization

3. How to Get Started with Chart.js

4. Chart Types in Chart.js

5. Customization and Interactivity in Chart.js

6. How to Work with Data in Chart.js

7. Advanced Chart.js Features

8. Best Practices for Chart Design

9. Conclusion

What is Chart.js?

Chart.js is a popular open-source JavaScript library that allows you to create beautiful and interactive charts on the web. It's easy to use and supports various types of charts, such as line, bar, pie, radar, and more.

Chart.js is highly customizable, allowing you to modify the appearance and behavior of the charts to fit your specific needs. It uses the HTML5 <canvas> element to render the charts, making it compatible with modern web browsers.

Benefits of Using Chart.js for Data Visualization

Using Chart.js for data visualization offers numerous benefits that make it an excellent choice for developers and non-developers alike. The primary advantages include:

Easy to Use

Chart.js is known for its simplicity and ease of use. Even if you're new to JavaScript, you can quickly create and customize charts with minimal code.

The library's clear and concise documentation provides step-by-step instructions and examples, making it accessible for beginners and experienced developers alike.

Versatile Chart Types

Chart.js supports a wide range of chart types, including line, bar, pie, doughnut, radar, polar area, bubble, and scatter charts. This versatility allows you to choose the best chart type to represent your data effectively.

Whether you need to show trends over time, compare different categories, or display proportions, Chart.js has you covered.

Highly Customizable

One of the standout features of Chart.js is its high level of customization. You can tweak almost every aspect of your charts, from colors, fonts, and sizes to tooltips, legends, and animations. This flexibility ensures that your charts match the look and feel of your website or application perfectly.

Responsive Design

Chart.js charts are responsive by default, meaning they automatically adjust their size and layout based on the screen size. This is particularly important in today's world, where users access websites and applications from various devices, including desktops, tablets, and smartphones. With Chart.js, you can be confident that your charts will look great on any device.

Interactive Features

Interactivity is a key component of modern data visualization, and Chart.js excels in this area. Charts created with Chart.js can include interactive features like tooltips, which display detailed information when users hover over data points, and clickable legends, which allow users to toggle the visibility of different datasets. These features make your charts more engaging and informative.

Lightweight and Fast

Chart.js is a lightweight library, meaning it doesn't add significant load time to your website or application. Despite its small size, it is highly efficient and capable of rendering complex charts quickly. This performance is crucial for maintaining a smooth user experience, especially when dealing with large datasets.

Open Source and Community Support

As an open-source project, Chart.js is free to use and benefits from a vibrant community of developers who contribute to its improvement and extension.

The active community support means you can find numerous plugins, extensions, and third-party integrations to enhance the functionality of Chart.js. You can also rely on community forums and resources for troubleshooting and inspiration.

Compatibility with Modern Web Technologies

Chart.js leverages the HTML5 <canvas> element to render charts, making it compatible with modern web browsers. This compatibility ensures that your charts will display correctly across different platforms and devices.

Also, you can easily integrate Chart.js with popular JavaScript frameworks and libraries, such as React, Angular, and Vue.js, allowing you to incorporate charts seamlessly into your projects.

Accessibility Features

Accessibility is a crucial consideration in web development, and Chart.js includes features to support this. You can add alternative text descriptions and ARIA labels to your charts, making them more accessible to users with disabilities.

This commitment to accessibility helps you create inclusive data visualizations that can be enjoyed by a wider audience.

Continuous Improvement

The development team behind Chart.js is committed to continuously improving the library. Regular updates bring new features, performance enhancements, and bug fixes, ensuring that Chart.js remains a cutting-edge tool for data visualization.

How to Get Started with Chart.js

Creating interactive and visually appealing charts is straightforward thanks to Chart.js. In this section, I'll walk you through the initial steps to get Chart.js up and running in your project, including setting up the library and creating your first chart.

Set Up Your Project

To get started with Chart.js, you need to include the library in your project. You can do this by either downloading the Chart.js library or linking to it via a Content Delivery Network (CDN). Using a CDN is often the easiest way to get started.

Include Chart.js via CDN

Add the following <script> tag to the <head> or <body> section of your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <!-- Chart container -->
    <canvas id="myChart" width="400" height="200"></canvas>

    <!-- Your JavaScript code will go here -->

</body>
</html>

Create Your First Chart

Next, you need to create a <canvas> element in your HTML file where the chart will be rendered. This element acts as a container for the chart. In the example above, we already added a <canvas> element with the id of myChart.

Write the JavaScript Code

Now, let's write some JavaScript to create a basic chart. Place the following script in the <body> section of your HTML file, below the <canvas> element, or in an external JavaScript file:

<script>
    // Get the context of the canvas element we want to select
    var ctx = document.getElementById('myChart').getContext('2d');

    // Create a new Chart object
    var myChart = new Chart(ctx, {
        type: 'bar', // The type of chart we want to create
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], // Labels for the chart
            datasets: [{
                label: 'Votes',
                data: [12, 19, 3, 5, 2, 3], // Data points for the chart
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true // Start the y-axis at 0
                }
            }
        }
    });
</script>

Alright, let's understand what's going on in this code:

1. Get the Canvas Context: The first line of the script selects the <canvas> element by its id and gets its 2D drawing context. This context is necessary for creating the chart.

    var ctx = document.getElementById('myChart').getContext('2d');
   

2. Create a New Chart: The Chart constructor creates a new chart. You need to pass two arguments: the context and a configuration object.

    var myChart = new Chart(ctx, {
        type: 'bar', // The type of chart we want to create
   

3. Data Object: The data property of the configuration object defines the chart's data and labels. In this example, we use an array of colors as labels and an array of numbers as data points.

    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5, 2, 3],
   

4. Styling: The backgroundColor and borderColor properties specify the colors for the bars and their borders. The borderWidth sets the width of the borders.

    backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
    ],
    borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
    ],
    borderWidth: 1
   

5. Options Object: The options property contains configuration options for the chart. In this example, we set the beginAtZero option to true to start the y-axis at 0.

    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
   

View Your Chart

Once you've added the code, open the HTML file in a web browser. You should see a bar chart displaying the data you provided.

Congratulations, you've created your first chart with Chart.js!

Feel free to experiment with different chart types, data, and customization options to explore the full potential of Chart.js.

Chart Types in Chart.js

Chart.js supports a variety of chart types, each designed to visualize data in different ways. Below are some of the most commonly used chart types available in Chart.js:

1. Line Chart

A line chart is used to show trends over time or to demonstrate continuous data. It's effective for displaying data that changes continuously over a period. Here's an example of a simple line chart:

var ctx = document.getElementById('myChart').getContext('2d');
    var lineChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [{
          label: 'Sales',
          data: [30, 45, 60, 35, 50, 40],
          borderColor: 'rgba(54, 162, 235, 1)',
          borderWidth: 2,
          fill: false
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

2. Bar Chart

A bar chart is used to compare different categories of data. It's ideal for showing discrete data points and comparing magnitudes between categories. Here's how you can create one:

var ctx = document.getElementById('myChart').getContext('2d');
var barChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

3. Pie Chart

A pie chart is used to show proportions or percentages of a whole. It's effective for illustrating how parts contribute to the whole. Here's what one looks like in code:

var ctx = document.getElementById('myChart').getContext('2d');
var pieChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            },
            tooltip: {
                callbacks: {
                    label: function(tooltipItem) {
                        return tooltipItem.label + ': ' + tooltipItem.raw.toFixed(2);
                    }
                }
            }
        }
    }
});

4. Doughnut Chart

A doughnut chart is similar to a pie chart but has a hollow center. It's useful for comparing proportions while also displaying total values.

var ctx = document.getElementById('myChart').getContext('2d');
var doughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            },
            tooltip: {
                callbacks: {
                    label: function(tooltipItem) {
                        return tooltipItem.label + ': ' + tooltipItem.raw.toFixed(2);
                    }
                }
            }
        }
    }
});

5. Scatter Charts

A scatter chart is used to display relationships between two or more variables. It's effective for showing correlations and distributions of data points.

var ctx = document.getElementById('myChart').getContext('2d');
var scatterChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Scatter Dataset',
            data: [
                { x: 10, y: 20 },
                { x: 15, y: 25 },
                { x: 7, y: 10 },
                { x: 12, y: 18 },
                { x: 20, y: 30 }
            ],
            backgroundColor: 'rgba(54, 162, 235, 0.5)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            x: {
                type: 'linear', // Scatter charts support only 'linear' scale type for x-axis
                position: 'bottom'
            },
            y: {
                type: 'linear', // Scatter charts support only 'linear' scale type for y-axis
                position: 'left'
            }
        }
    }
});

6. Bubble Charts

A bubble chart is similar to a scatter chart but uses bubble-like markers to represent data points. It's useful for comparing relationships between variables and showing data distribution with sizes of bubbles.

var ctx = document.getElementById('myChart').getContext('2d');
var bubbleChart = new Chart(ctx, {
    type: 'bubble',
    data: {
        datasets: [{
            label: 'Bubble Dataset',
            data: [
                { x: 10, y: 20, r: 5 },
                { x: 15, y: 25, r: 8 },
                { x: 7, y: 10, r: 6 },
                { x: 12, y: 18, r: 10 },
                { x: 20, y: 30, r: 7 }
            ],
            backgroundColor: 'rgba(255, 99, 132, 0.5)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            x: {
                type: 'linear', // Bubble charts support only 'linear' scale type for x-axis
                position: 'bottom'
            },
            y: {
                type: 'linear', // Bubble charts support only 'linear' scale type for y-axis
                position: 'left'
            }
        }
    }
});

7. Radar Chart

A radar chart (or spider chart) is used to display multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point. Here's how you can create one:

var ctx = document.getElementById('myChart').getContext('2d');
var radarChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ['Math', 'Physics', 'Chemistry', 'Biology', 'English', 'History'],
        datasets: [{
            label: 'Student A',
            data: [85, 90, 75, 80, 70, 85],
            fill: true,
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            pointBackgroundColor: 'rgba(54, 162, 235, 1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }, {
            label: 'Student B',
            data: [70, 85, 80, 75, 85, 90],
            fill: true,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            pointBackgroundColor: 'rgba(255, 99, 132, 1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            r: {
                suggestedMin: 0,
                suggestedMax: 100
            }
        }
    }
});

8. Polar Area Chart

A polar area chart is similar to a pie chart, but the sectors are equal angles and differ in how far they extend from the center of the circle. It's useful for showing data distributions with the proportion of each category.

var ctx = document.getElementById('myChart').getContext('2d');
var polarAreaChart = new Chart(ctx, {
    type: 'polarArea',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.5)',
                'rgba(54, 162, 235, 0.5)',
                'rgba(255, 206, 86, 0.5)',
                'rgba(75, 192, 192, 0.5)',
                'rgba(153, 102, 255, 0.5)',
                'rgba(255, 159, 64, 0.5)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            r: {
                suggestedMin: 0,
                suggestedMax: 20
            }
        }
    }
});

These are just a few examples of the chart types available in Chart.js. Each chart type has its own unique features and is suitable for different types of data visualization tasks. Experiment with these chart types and explore Chart.js documentation for more advanced options and customization.

Customization and Interactivity in Chart.js

Chart.js offers extensive options for customizing the appearance and interactivity of your charts. This section covers customizing chart appearance, adding tooltips and legends, and making charts interactive with features like zooming and hovering.

Customizing Chart Appearance

Customizing the appearance of your charts helps make them more visually appealing and tailored to your specific needs. You can customize colors, fonts, borders, and other properties.

var customChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.8)',
                'rgba(54, 162, 235, 0.8)',
                'rgba(255, 206, 86, 0.8)',
                'rgba(75, 192, 192, 0.8)',
                'rgba(153, 102, 255, 0.8)',
                'rgba(255, 159, 64, 0.8)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 2
        }]
    },
    options: {
        plugins: {
            legend: {
                display: true,
                labels: {
                    color: 'rgb(255, 99, 132)',
                    font: {
                        size: 16,
                        family: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
                    }
                }
            },
            tooltip: {
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                titleFont: {
                    size: 18
                },
                bodyFont: {
                    size: 14
                },
                callbacks: {
                    label: function(context) {
                        return context.dataset.label + ': ' + context.raw + ' votes';
                    }
                }
            }
        },
        scales: {
            x: {
                ticks: {
                    color: 'rgba(54, 162, 235, 1)',
                    font: {
                        size: 14
                    }
                }
            },
            y: {
                ticks: {
                    color: 'rgba(54, 162, 235, 1)',
                    font: {
                        size: 14
                    }
                }
            }
        }
    }
});

In this example:

• Chart Type: The chart is defined as a bar chart.

• Background and Border Colors: The backgroundColor and borderColor arrays are customized for each bar. For example, the "Red" bar is colored with a semi-transparent background (rgba(255, 99, 132, 0.8)) and a solid border (rgba(255, 99, 132, 1)).

• Font and Color for Legends: The legend configuration customizes the display of the chart’s legend, where the font size is set to 16, and the font family is 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif'. Additionally, the text color of the legend labels is customized to rgb(255, 99, 132).

• Font and Color for Axes: The scales section customizes the appearance of both the X and Y axes. The font size for axis labels is set to 14, and their color is rgba(54, 162, 235, 1).

Adding Tooltips and Legends

Tooltips provide additional information when you hover over chart elements. Legends help users understand the data by showing which dataset each color represents. Both can be customized extensively, like this for example:

var chartWithTooltipsAndLegend = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [{
            label: 'Sales',
            data: [30, 45, 60, 35, 50, 40],
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 2,
            fill: false
        }]
    },
    options: {
        plugins: {
            legend: {
                display: true,
                position: 'top',
                labels: {
                    font: {
                        size: 14
                    }
                }
            },
            tooltip: {
                enabled: true,
                callbacks: {
                    label: function(tooltipItem) {
                        return 'Sales: $' + tooltipItem.raw;
                    }
                }
            }
        }
    }
});

In this example:

• Tooltips: Tooltips appear when the user hovers over elements of the chart. The tooltip background is customized to be black (rgba(0, 0, 0, 0.8)) with font sizes for both the title (18) and body text (14). The content of the tooltip is dynamically generated by a callback function, which appends the word "votes" to the dataset value.

• Legends: The legends describe the data on the chart and are placed at the top. The customization here includes setting the font size to 14 and making the legend displayable by configuring display: true.

Making Charts Interactive (Zooming, Hovering, and so on)

Adding interactivity to your charts can enhance the user experience. Features like zooming, panning, and custom hover effects can be implemented using additional Chart.js plugins such as chartjs-plugin-zoom.

First, include the zoom plugin in your project:

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@1.0.0"></script>

Then, configure your chart to enable zooming and panning:

var interactiveChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [{
            label: 'Sales',
            data: [30, 45, 60, 35, 50, 40],
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 2,
            fill: false
        }]
    },
    options: {
        plugins: {
            zoom: {
                pan: {
                    enabled: true,
                    mode: 'xy'
                },
                zoom: {
                    enabled: true,
                    mode: 'xy'
                }
            }
        },
        hover: {
            mode: 'nearest',
            intersect: true
        }
    }
});

In this example:

• Zoom and Pan: The chartjs-plugin-zoom plugin is used to add zooming and panning capabilities. Users can zoom in and out using the mouse wheel or pan by dragging.

• Hover Mode: The hover option is set to nearest, ensuring the nearest data point is highlighted when hovered over.

Complete HTML Example

Here's the complete HTML file incorporating the examples above:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Customization and Interactivity</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@1.0.0"></script>
</head>
<body>
    <h1>Chart.js Customization and Interactivity</h1>
    <h2>Customizing Chart Appearance</h2>
    <canvas id="customChart" width="400" height="200"></canvas>

    <h2>Adding Tooltips and Legends</h2>
    <canvas id="tooltipsAndLegendChart" width="400" height="200"></canvas>

    <h2>Making Charts Interactive (Zooming, Hovering, etc.)</h2>
    <canvas id="interactiveChart" width="400" height="200"></canvas>

    <script>
        // Customizing Chart Appearance
        var customCtx = document.getElementById('customChart').getContext('2d');
        var customChart = new Chart(customCtx, {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: 'Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.8)',
                        'rgba(54, 162, 235, 0.8)',
                        'rgba(255, 206, 86, 0.8)',
                        'rgba(75, 192, 192, 0.8)',
                        'rgba(153, 102, 255, 0.8)',
                        'rgba(255, 159, 64, 0.8)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 2
                }]
            },
            options: {
                plugins: {
                    legend: {
                        display: true,
                        labels: {
                            color: 'rgb(255, 99, 132)',
                            font: {
                                size: 16,
                                family: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
                            }
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        titleFont: {
                            size: 18
                        },
                        bodyFont: {
                            size: 14
                        },
                        callbacks: {
                            label: function(context) {
                                return context.dataset.label + ': ' + context.raw + ' votes';
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        ticks: {
                            color: 'rgba(54, 162, 235, 1)',
                            font: {
                                size: 14
                            }
                        }
                    },
                    y: {
                        ticks: {
                            color: 'rgba(54, 162, 235, 1)',
                            font: {
                                size: 14
                            }
                        }
                    }
                }
            }
        });

        // Adding Tooltips and Legends
        var tooltipsAndLegendCtx = document.getElementById('

tooltipsAndLegendChart').getContext('2d');
        var chartWithTooltipsAndLegend = new Chart(tooltipsAndLegendCtx, {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June'],
                datasets: [{
                    label: 'Sales',
                    data: [30, 45, 60, 35, 50, 40],
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 2,
                    fill: false
                }]
            },
            options: {
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            font: {
                                size: 14
                            }
                        }
                    },
                    tooltip: {
                        enabled: true,
                        callbacks: {
                            label: function(tooltipItem) {
                                return 'Sales: $' + tooltipItem.raw;
                            }
                        }
                    }
                }
            }
        });

        // Making Charts Interactive (Zooming, Hovering, etc.)
        var interactiveCtx = document.getElementById('interactiveChart').getContext('2d');
        var interactiveChart = new Chart(interactiveCtx, {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June'],
                datasets: [{
                    label: 'Sales',
                    data: [30, 45, 60, 35, 50, 40],
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 2,
                    fill: false
                }]
            },
            options: {
                plugins: {
                    zoom: {
                        pan: {
                            enabled: true,
                            mode: 'xy'
                        },
                        zoom: {
                            enabled: true,
                            mode: 'xy'
                        }
                    }
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                }
            }
        });
    </script>
</body>
</html>

This HTML file includes examples of customizing chart appearance, adding tooltips and legends, and making charts interactive. You can view the results by opening this HTML file in a web browser.

How to Work with Data in Chart.js

Chart.js provides versatile capabilities for handling data, accommodating various formats and requirements for data visualization:

Data Formats Supported by Chart.js

Chart.js provides flexible support for various data formats to accommodate different data structures and needs:

• Arrays: Simple arrays of values are the most basic format and can be directly used to plot data points.

    const data = [10, 20, 30, 40, 50];
  

• Objects: Arrays of objects are useful for more complex data where each object represents a data point with multiple properties.

    const data = [
        { x: 10, y: 20 },
        { x: 15, y: 25 },
        { x: 20, y: 30 }
    ];
  

• JSON: JSON (JavaScript Object Notation) is ideal for structured data interchange, allowing for clear organization of labels and datasets.

    {
        "labels": ["January", "February", "March", "April"],
        "datasets": [{
            "label": "Sales",
            "data": [10, 20, 30, 40]
        }]
    }
  

• CSV: Comma-Separated Values (CSV) are commonly used for tabular data and can be parsed into arrays or objects for Chart.js.

How to Load Data from External Files (JSON, CSV)

Loading data from external files is essential for handling dynamic or large datasets efficiently:

• Loading JSON Data: Use the fetch API to retrieve JSON data and integrate it into Chart.js.

    <script>
        fetch('data.json')
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('myChart').getContext('2d');
                new Chart(ctx, {
                    type: 'bar',
                    data: data,
                    options: {}
                });
            });
    </script>
  

• Loading CSV Data: Utilize libraries like PapaParse to parse CSV files into usable data formats for Chart.js visualization.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
    <script>
        Papa.parse('data.csv', {
            download: true,
            header: true,
            complete: function(results) {
                const labels = results.data.map(row => row['Month']);
                const data = results.data.map(row => parseFloat(row['Sales']));
  
                const ctx = document.getElementById('myChart').getContext('2d');
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Sales',
                            data: data
                        }]
                    },
                    options: {}
                });
            }
        });
    </script>
  

Dynamic Data Updates

Chart.js supports dynamic data updates, which is crucial for real-time data visualization:

• Updating Data Dynamically: Use Chart.js methods to update chart data dynamically and re-render the chart as needed.

    <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['January', 'February', 'March', 'April'],
                datasets: [{
                    label: 'Sales',
                    data: [10, 20, 30, 40]
                }]
            },
            options: {}
        });
  
        // Example function to update the chart data
        function updateChartData() {
            myChart.data.datasets[0].data = [50, 60, 70, 80];
            myChart.update();
        }
  
        // Call the update function after 2 seconds
        setTimeout(updateChartData, 2000);
    </script>
  

In this section, we've explored the various data formats supported by Chart.js, methods for loading data from external files such as JSON and CSV, and how to implement dynamic data updates for real-time visualization. These features make Chart.js a powerful tool for interactive data visualization in web applications.

Advanced Chart.js Features

Chart.js offers advanced features that enhance data visualization capabilities beyond basic charts. Let's delve into these features:

How to Combine Different Chart Types

Chart.js allows you to combine different chart types within a single chart, offering flexibility in visualizing complex data sets:

• Mixed Chart Types: You can mix line, bar, radar, and other chart types in a single chart to represent diverse datasets effectively.

    const ctx = document.getElementById('mixedChart').getContext('2d');
    const mixedChart = new Chart(ctx, {
        type: 'bar', // Default type for the main dataset
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June'],
            datasets: [{
                label: 'Sales',
                data: [50, 60, 70, 80, 90, 100],
                type: 'line', // Specific type for this dataset
                borderColor: 'rgba(75, 192, 192, 1)',
                tension: 0.1
            }]
        },
        options: {}
    });
  

How to Create Chart Animations

Animations in Chart.js can bring your data visualizations to life, providing a dynamic and engaging user experience:

• Animated Transitions: Configure animations to smoothly transition between different states, enhancing the clarity of data changes over time.

    const ctx = document.getElementById('animatedChart').getContext('2d');
    const animatedChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June'],
            datasets: [{
                label: 'Sales',
                data: [50, 60, 70, 80, 90, 100],
                borderColor: 'rgba(75, 192, 192, 1)',
                tension: 0.1
            }]
        },
        options: {
            animation: {
                duration: 2000, // Animation duration in milliseconds
                easing: 'easeInOutQuart' // Easing function for smooth animation
            }
        }
    });
  

How to Use Third-Party Plugins

Extend Chart.js functionality with third-party plugins to add custom features and enhance visualization capabilities:

• Integration of Plugins: Integrate plugins like zoom, tooltip enhancements, or data label customization to tailor charts to specific needs.

    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
    <script>
        const ctx = document.getElementById('pluginChart').getContext('2d');
        const pluginChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June'],
                datasets: [{
                    label: 'Sales',
                    data: [50, 60, 70, 80, 90, 100],
                    borderColor: 'rgba(75, 192, 192, 1)',
                    tension: 0.1
                }]
            },
            options: {
                plugins: {
                    zoom: {
                        pan: {
                            enabled: true,
                            mode: 'xy'
                        },
                        zoom: {
                            enabled: true,
                            mode: 'xy'
                        }
                    }
                }
            }
        });
    </script>
  

Best Practices for Chart Design

Effective chart design ensures that your data is presented clearly and accurately, making it easy for users to understand and interpret. Here are some best practices to consider:

Choose the Right Chart Type

Selecting the appropriate chart type is crucial for conveying your data effectively:

• Bar Charts: Ideal for comparing different categories or tracking changes over time. Use bar charts when you have discrete data points.

    const ctx = document.getElementById('barChart').getContext('2d');
    const barChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: 'Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
  

• Line Charts: Best for showing trends over time or continuous data. Line charts are useful when you want to highlight changes and patterns.

    const ctx = document.getElementById('lineChart').getContext('2d');
    const lineChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June'],
            datasets: [{
                label: 'Sales',
                data: [10, 20, 30, 40, 50, 60],
                borderColor: 'rgba(75, 192, 192, 1)',
                tension: 0.1
            }]
        },
        options: {}
    });
  

• Pie and Doughnut Charts: Suitable for displaying proportions and parts of a whole. Use these charts when you want to highlight distribution.

    const ctx = document.getElementById('doughnutChart').getContext('2d');
    const doughnutChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Red', 'Blue', 'Yellow'],
            datasets: [{
                label: 'Votes',
                data: [300, 50, 100],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {}
    });
  

Design for Clarity and Readability

Clear and readable charts help users understand data quickly and accurately:

• Use Appropriate Labels: Ensure that all axes, data points, and legends are clearly labeled. Avoid cluttering the chart with too much information.

• Color Choices: Use contrasting colors to differentiate between data points or categories. Ensure that color choices are accessible to those with color vision deficiencies.

• Simplify Data: Avoid overloading the chart with too much data. Focus on the key message you want to convey and use additional charts for supplementary information.

• Consistent Scale: Use a consistent scale across charts when comparing similar data sets. This helps users make accurate comparisons without recalibrating their understanding of the scale.

    const ctx = document.getElementById('clarityChart').getContext('2d');
    const clarityChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June'],
            datasets: [{
                label: 'Sales',
                data: [10, 20, 30, 40, 50, 60],
                borderColor: 'rgba(75, 192, 192, 1)',
                tension: 0.1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
  

Make Charts Accessible

Accessibility ensures that your charts can be understood by all users, including those with disabilities:

• Use ARIA Labels: Implement ARIA (Accessible Rich Internet Applications) labels to provide additional context to screen readers.

    <canvas id="accessibleChart" aria-label="Sales Data" role="img"></canvas>
  

• Provide Alternative Text: Include descriptive alternative text for charts, especially if the chart is complex. This helps users who rely on screen readers to understand the chart's content.

• Keyboard Navigation: Ensure that all interactive elements of the chart, such as tooltips and legends, are accessible via keyboard navigation.

• High Contrast Colors: Use high contrast colors for better visibility, especially for users with low vision or color blindness.

    const ctx = document.getElementById('accessibleChart').getContext('2d');
    const accessibleChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: 'Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.8)',
                    'rgba(54, 162, 235, 0.8)',
                    'rgba(255, 206, 86, 0.8)',
                    'rgba(75, 192, 192, 0.8)',
                    'rgba(153, 102, 255, 0.8)',
                    'rgba(255, 159, 64, 0.8)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
  

Conclusion

Using Chart.js for interactive data visualization is a great way to turn raw data into clear, engaging charts. This tool is easy to use and offers many types of charts, like bar, line, and pie charts. You can also customize your charts to make them look exactly how you want.

Chart.js is not only good for basic charts but also has advanced features. You can combine different types of charts, add animations, and use plugins to add extra functions like zooming. It supports various data formats, can load data from files, and update data in real-time.

When designing your charts, it’s important to choose the right type of chart for your data, keep your charts clear and easy to read, and make sure they are accessible to everyone, including people with disabilities.

To illustrate just how innovative real time technologies are, we will build a chart application which automatically updates with new dynamic online data.

This is going to be a really good example of how we can implement user data into useful commercial products such as sports leaderboards, social media analytics, financial money trackers, medical instruments, games and many more.

As you can see, there are numerous use cases for this technology. So let's get under way and first learn about the main platform that we will be using to create our realtime data: Pusher.

You can find the codebase online here.

Prerequisites

• An IDE/code editor installed
• Basic knowledge of JavaScript and React
• An understanding of Node.js and npm
• An account on Pusher

Table of Contents

1. What are WebSockets?
2. What is Pusher?
3. What we will be building
4. How to Create an Account on Pusher
5. How to Build the Company Annual Income Application
6. Conclusion

What are WebSockets?

WebSockets are a communications protocol which allows for data to travel bidirectionally between a client and a server. This essentially means that it's possible for a client and server to simultaneously send data back and forth independently of each other.

Being able to send data this way brings many advantages, such as preventing blocking. This can occur if the system is only capable of either sending or receiving and not both at the same time.

Another advantage is the fact that the Transmission Control Protocol (TCP) connection remains long-lived and connected. This is a drawback of traditional Hypertext Transfer Protocol (HTTP) connections, as they are regularly opening and closing each time there is a request or a response. This prevents communication from being instant and realtime.

Not having to worry about the opening and closing of connections results in dramatically less network traffic – so in terms of speed and resources, this is a welcome bonus.

Now that you know why WebSockets are helpful, let's take a look at Pusher and see what the platform is capable of.

What is Pusher?

Pusher is an online platform you can use to build and develop applications that require real-time communication. These communications typically take place between web browsers, mobile phones, and other internet connected devices.

The platform is designed to make it easy to implement real-time communication systems which are nowhere near as complicated as raw WebSocket connections in terms of setup and management. This allows for better scaling and even a way to handle fallbacks for legacy environments that do not support WebSockets.

Pusher is capable of using numerous technologies such as WebSockets, HTTP fallbacks, and even its own propriety protocol called ws-longpolling. This enables the platform to work in places where WebSockets is not supported.

Pusher also has a lot of other useful features. For example, it fully supports WebSockets, so bidirectional communication works as you would expect. The platform also follows the publish-subscribe (Pub/Sub) pattern which is a popular messaging pattern used in the industry. It pretty much guarantees that anyone subscribed to any of the channels can receive the messages in realtime.

A good example of this would be everyone getting the latest news notification who is subscribed to that social media channel. Subscriptions can be public and private, which requires authentication to gain access to those messages.

There's also wide platform support, as the Pusher SDK is available in different programming languages like JavaScript, Python, iOS, Android and many others. It's available as a service online, so all of the scaling and communications infrastructure is already handled. This means one less system for developers to handle when building an application.

Pusher is a great option, as I hope you can tell. But there are other tools out there that do similar things:

• PubNub
• deepstreamHub
• AWS IoT
• AWS SNS
• Google Cloud Pub/Sub
• Fanout

Ok, you've learned quite a lot about WebSockets and Pusher. Now, we'll take a look at the application that we are going to build.

What We Will Be Building

To help you learn how Pusher works, we are going to build a Company Annual Income dashboard application. The application has a graph, a 3D Mode toggle, and three buttons.

We'll build our application using Next.js, Pusher, and HighCharts (the tool that we'll use to create our graph component). This will be a full stack application with one API endpoint for our Pusher REST API. We just need one GET endpoint which will connect to the Pusher API.

The graph data will come directly from Pusher, and the 3D Mode toggle essentially lets us switch our chart between 2D and 3D mode. The buttons let us change the type of chart that is displayed on screen, and all 3 charts can work in 2D and 3D mode. The chart has some starting data, and new data is automatically added to the end for each new year.

Here you can see our Company Annual Income Application in 2D Graph Mode.

Company Annual Income Application 2D Mode

And here you can see our Company Annual Income Application in 3D Graph Mode.

Company Annual Income Application 3D Mode

As you can see, the HighCharts library is very good when it comes to building applications that require data visualisation. If you are interested in other libraries which work just as well, I have put together a list of some of them here. Each one has its own unique benefits and it's possible to use more than one library if you want to:

• Chart.js
• D3
• Recharts
• Google Charts
• Apex Charts
• dyagraphs
• Victory

Alright, we know what we are going to build. In the next section, we will quickly go through how to create an account on Pusher followed by actually building our application afterwards.

How to Create an Account on Pusher

Creating an account on Pusher only requires a few steps. Depending on when you follow this tutorial, the website might look a bit different – but the sign up process should be the same.

Start by going to the Pusher website as shown below:

Pusher website home page

Click on either the Get your free account button in the middle of the page, or the Sign up button in the top right hand corner.

You should now be on the Sign up page as shown here:

Pusher website sign up for account page

Either use your GitHub, Google, or email to create an account.

The next page to load should be your main dashboard after you have completed the sign up as shown in the image below:

Pusher website main dashboard page

Click on the Manage button in the Channels section in the image shown above to get to the Channels page.

The Channels page can be seen below which displays all of the data for our app.

Pusher website Channels page

We need to create an app, so click on the Create app button in the top right hand corner.

Clicking on the button should give you this Create your Channels app box shown here:

Pusher website Create your channels app page

Give your app a name and then choose React for the front end and Node.js for the back end. Then click the Create app button at the bottom of the form.

That's it – you should now see the main screen for your app as shown in the example image below (with data for connections and messages shown in the middle). The sidebar on the left has the features and App keys which we need to use later.

Pusher website app page

Great! Up next we will start building our app...so lets get to it.

How to Build the Company Annual Income Application

The first thing we have to do is setup our project architecture and the folder structure so let's start with that. Create a folder on your computer called realtime-chart-pusher and then cd into it.

Create a Next.js project by running the usual install and setup command here:

npx create-next-app .

On the configuration screen, our project needs to use Tailwind CSS for styling and its recommended that you use the App Router. The other defaults should be fine.

Now we have to install our dependencies for the project. Go ahead and do that with this command:

npm i axios highcharts-react-official pusher pusher-js

Here is a quick breakdown of the purpose of each package we are installing:

• Axios: for making API requests to our backend API which is connected to the Pusher API
• highcharts-react-official: for building our realtime chart
• pusher and pusher-js: for connecting to our Pusher account and the Pusher API

Right, with that done, we just have to setup our project files. You can use this run script in your terminal while still in the project root folder:

touch .env.local
cd src/app
mkdir -p api/pusher components/ChartButton components/CompanyIncomeChart components/Toggle3DButton
touch api/pusher/route.js
touch components/ChartButton/ChartButton.js components/CompanyIncomeChart/CompanyIncomeChart.js components/Toggle3DButton/Toggle3DButton.js

This script creates a .env.local file for our Pusher App keys. It also creates files and folders for our backend and frontend.

Before we begin adding the code to our codebase, we need to get our Pusher App Keys. You can find them on your Pusher account as shown in this example below:

Pusher website App keys page

Add your app keys to the .env.local file like in this code example here:

NEXT_SECRET_PUSHER_APP_ID = "yourid"
NEXT_SECRET_PUSHER_KEY = "yourkey"
NEXT_SECRET_PUSHER_SECRET = "yoursecret"
NEXT_SECRET_PUSHER_CLUSTER = "yourlocation"

We just added NEXT_SECRET at the start of all of the variables because it is a Next.js convention and ensures that the variables work properly.

Now we can start with the bulk of our codebase. First we will do the route.js file inside of the api/route folder. This is the code needed for the file:

import Pusher from 'pusher';

const pusher = new Pusher({
  appId: process.env.NEXT_SECRET_PUSHER_APP_ID,
  key: process.env.NEXT_SECRET_PUSHER_KEY,
  secret: process.env.NEXT_SECRET_PUSHER_SECRET,
  cluster: process.env.NEXT_SECRET_PUSHER_CLUSTER,
  useTLS: true,
});

export async function GET() {
  // Define the initial value
  const value = Math.random() * 800000 + 200000;

  setInterval(() => {
    pusher.trigger('company-income', 'new-price', {
      value: value,
    });

    return Response.json({ value: value }, { status: 200 });
    // Every ten seconds, the setInterval method will get data from the API because its value is set to ten seconds. Pusher's free plans are limited to 200,000 messages a day, so be careful while reducing the interval or you risk exceeding your limit too soon.
  }, 10000);
  return Response.json({ value: value }, { status: 200 });
}

The code in this file lets us connect to Pusher using our App Keys. The value is a randomly generated number that gets sent as JSON to our Pusher channel. This number is what we use to show the company income in each new year which is automatically generated in our chart.

This update occurs every 10 seconds and can be changed in the setInterval function. Pusher's free plans are limited to 200,000 messages a day, so be careful while reducing the interval or you risk exceeding your limit too soon.

The next file we will work on is the ChartButton.js file which you can find inside its folder ChartButton.

Add this code to the file:

export default function ChartButton({ chartRef, type, name }) {
  const switchToLineChart = () => {
    chartRef.current.update({
      chart: {
        type: type,
      },
    });
  };

  return (
    <button
      onClick={() => switchToLineChart()}
      className="bg-indigo-500 hover:bg-indigo-700 p-2 rounded text-white shadow-md"
    >
      {name}
    </button>
  );
}

Our chart application has three buttons for Area Chart, Bar Chart, and Line Chart. This is basically just the component that creates the buttons.

Good, up next will be our CompanyIncomeChart.js file which you can find in the CompanyIncomeChart folder. This file will be taking this code here:

'use client';

import { useEffect, useRef, useState } from 'react';
import axios from 'axios';
import ChartButton from '../ChartButton/ChartButton';
import Toggle3DButton from '../Toggle3DButton/Toggle3DButton';

export default function CompanyIncome() {
  const initialData = [
    [1965, 360202],
    [1966, 400123],
    [1967, 460331],
    [1968, 460346],
    [1969, 460339],
    [1970, 460370],
  ];

  const chartRef = useRef(null);
  const [chartData, setChartData] = useState([...initialData]);
  const [toggle3D, setToggle3D] = useState(false);

  useEffect(() => {
    // Dynamically import Highcharts and its 3D module
    import('highcharts/highcharts-3d').then((Highcharts3D) => {
      import('highcharts').then((Highcharts) => {
        Highcharts3D.default(Highcharts.default);

        chartRef.current = Highcharts.default.chart('chart-container', {
          colors: ['#F3F7FB', '#F3F7FB'],
          chart: {
            style: {
              fontFamily: ['Prompt', 'sans-serif'],
              fontSize: '16px',
            },
            type: 'column',
            options3d: {
              enabled: toggle3D,
              alpha: 10,
              beta: 25,
              depth: 70,
              viewDistance: 25,
            },
            backgroundColor: {
              linearGradient: [0, 0, 500, 500],
              stops: [
                [0, 'rgb(128, 130, 221)'],
                [1, 'rgb(128, 130, 221)'],
              ],
            },
          },
          title: {
            text: 'COMPANY ANNUAL INCOME',
            style: {
              fontSize: '27px',
            },
          },
          xAxis: {
            title: {
              text: 'Year',
              style: {
                color: 'white',
              },
            },
            labels: {
              style: {
                color: 'white',
              },
            },
            type: 'category',
          },
          yAxis: {
            title: {
              text: 'Income',
              style: {
                color: 'white',
              },
            },
            labels: {
              style: {
                color: 'white',
              },
            },
            min: 0,
          },
          credits: {
            text: '',
          },
          series: [
            {
              name: 'Income',
              data: chartData,
            },
          ],
          animation: {
            duration: 100,
          },
        });
      });
    });

    const interval = setInterval(async () => {
      try {
        const response = await axios.get('/api/pusher');
        const newDataPoint = [
          chartData[chartData.length - 1][0] + 1,
          response.data.value,
        ];
        chartRef.current.series[0].addPoint(newDataPoint, true, true);
        setChartData((prevData) => [...prevData, newDataPoint]);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
      // Every ten seconds, the setInterval method will get data from the API because its value is set to ten seconds. Pusher's free plans are limited to 200,000 messages a day, so be careful while reducing the interval or you risk exceeding your limit too soon.
    }, 10000);
    return () => {
      clearInterval(interval);
    };
  }, [toggle3D]);

  return (
    <div>
      <div id="chart-container" className="w-full h-96"></div>
      <div className="border-solid border-2 border-indigo-500 m-10">
        <div className="grid justify-center mt-5 text-center">
          <p>3D Mode</p>
          <div className="w-20">
            <Toggle3DButton toggle3D={toggle3D} setToggle3D={setToggle3D} />
          </div>
        </div>
        <div className="grid gap-4 justify-center mt-5 xl:grid-cols-3 p-4">
          <ChartButton chartRef={chartRef} type={'area'} name={'Area Chart'} />
          <ChartButton chartRef={chartRef} type={'bar'} name={'Bar Chart'} />
          <ChartButton chartRef={chartRef} type={'line'} name={'Line Chart'} />
        </div>
      </div>
    </div>
  );
}

This component creates our Company Income Chart and is already set with some initial loading data so that the chart loads some data when it first starts.

The file contains our chart configuration settings. There is a function that does a GET request to our Next.js backend which then connects to our Pusher account. This is how the data is retrieved for our chart file. Like on the backend, there is a setInterval function that runs every 10 seconds to get the latest data from our backend (we we can increase or decrease).

Next is the Toggle3DButton.js file in the Toggle3DButton folder. Here is the code for the file:

export default function Toggle3DButton({ toggle3D, setToggle3D }) {
  const toggle3DMode = () => {
    setToggle3D(!toggle3D);
  };

  return (
    <label className="flex items-center cursor-pointer border border-gray-400 rounded-full p-1 relative">
      <input
        type="checkbox"
        className="hidden"
        checked={toggle3D}
        onChange={toggle3DMode}
      />
      <span
        className={`toggle__line w-full h-4 bg-gray-400 rounded-full shadow-inner ${
          toggle3D ? 'bg-green-500' : 'bg-gray-400'
        }`}
      ></span>
      <span
        className={`toggle__dot absolute w-6 h-6 bg-white rounded-full shadow inset-y-0 ${
          toggle3D ? 'right-0' : 'left-0'
        }`}
      ></span>
    </label>
  );
}

Our application has a 3D Mode toggle and this component is used to create it.

The main files are completed – we just have three left and then we're done. Next is the globals.css file which needs this code to replace the existing code:

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: 'Prompt', sans-serif;
  font-weight: 400;
  font-style: normal;
}

We just imported the Prompt font to use in our application.

Continuing on from before, now we have to update the layout.js file so that it also uses the Prompt font. Add this code:

import { Prompt } from 'next/font/google';
import './globals.css';

const prompt = Prompt({ subsets: ['latin'], weight: '400' });

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={prompt.className}>{children}</body>
    </html>
  );
}

Now we can access the Prompt font throughout our application with this import and update.

All that remains is our page.js file which is the main entry point for all of our components. Replace all the code in that file with this final code shown here:

import CompanyIncomeChart from './components/CompanyIncomeChart/CompanyIncomeChart';

export default function Home() {
  return <CompanyIncomeChart />;
}

Alright all done – our project codebase is complete!

Just return to the root project folder and run the command below. Your application should be up and running in a web browser.

npm run dev

Everything should be working, and now you should have a realtime chart with live random dates.

Conclusion

Realtime communication platforms are essential for all of the tech that we use. Today you learned about Pusher and how it can help you build realtime data applications that can integrate with a chart library like HighCharts.

There are lots of potential applications you can build with these tools. Today's introduction should open the door and give you many ideas for future projects.

Data visualization is an essential part of data analysis. And charts are one of the most effective ways to present data in a clear and concise manner.

Marimekko charts are an excellent choice for displaying complex data sets in a compact and visually appealing format.

A Marimekko chart, also known as a mosaic chart or mekko chart, is a combination of a stacked bar chart and a 100% stacked bar chart. The width of each bar represents the total value of the corresponding category, and the height of each bar represents the relative contribution of each sub-category to that total.

In this tutorial, we will explore how to create a Marimekko chart using Chart.js, a powerful charting library. We'll delve into the details of how to structure the data for Marimekko charts, as well as how to customize the chart's appearance and behavior using Chart.js options and APIs.

Getting Started

I am assuming that you already have familiarity with creating simple line and bar charts using Chart.js in an Angular application. In this guide, there are certain concepts that will be easier to comprehend if you have prior knowledge.

Don't worry if you don't – I've got you covered. You can follow my Chart.js Tutorial – How to Make Bar and Line Charts in Angular to get started.

How to Structure Data for Marimekko Charts

Let's discuss the data structure required for Marimekko charts before creating the chart.

Marimekko charts need an array of objects, with each object representing a category. Each object must have a label and a sub-array of objects, where each sub-object represents a sub-category.

Each sub-object must have a label and a value. The value represents the proportion of the sub-category in relation to the total of its category.

Here's an example of how to structure data for a Marimekko chart:

data: [
  {
    label: 'Category 1',
    subcategories: [
      { label: 'Subcategory 1', value: 10 },
      { label: 'Subcategory 2', value: 20 },
      { label: 'Subcategory 3', value: 30 }
    ]
  },
  {
    label: 'Category 2',
    subcategories: [
      { label: 'Subcategory 1', value: 40 },
      { label: 'Subcategory 2', value: 50 },
      { label: 'Subcategory 3', value: 60 }
    ]
  }
]

In this example, we have two categories: Category 1 and Category 2, with three subcategories each. The values for the subcategories represent the proportion of the subcategory in relation to the total of its category. For example, in Category 1, Subcategory 1 represents 10 out of 60, or 16.7% of the total.

How to Create a Marimekko Chart with Chart.js

Now that we have our data structured correctly, let's move on to creating our Marimekko chart using Chart.js.

First, we need to create a canvas element in our HTML code to hold the chart:

<canvas id="marimekkoChart"></canvas>

Next, we'll need to install Chart.js and import it into our Angular component:

npm install chart.js

import Chart from 'chart.js/auto';

In our component class, we can then create a new Chart object and pass in our data and options:

ngAfterViewInit() {
  const canvas = document.getElementById('marimekkoChart') as HTMLCanvasElement;
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

  const data = {
    labels: ['Category 1', 'Category 2'],
    datasets: [
      {
        label: 'Subcategory 1',
        data: [10, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 2',
        data: [20, 50],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 3',
        data: [30, 60],
        backgroundColor: 'rgba(255, 206, 86, 0.7)',
        borderWidth: 1
      }
    ]
  };

  const options = {
    indexAxis: 'y',
    plugins: {
      legend: {
        position: 'bottom'
      }
    }
  };

  const marimekkoChart = new Chart(ctx, {
    type: 'bar',
    data: data,
  });
}

In this example, we're creating a Marimekko chart with three subcategories for two categories. We've set the type of chart to 'bar', and we're passing in our data and options. The 'indexAxis' option is set to 'y' to make the chart horizontal, and the 'legend' option is set to position the legend at the bottom of the chart.

Congratulations! If you have followed along carefully then you shouldn’t run into any errors and your output may look like the following:

And that's it! With this code, we can create a Marimekko chart in Chart.js in Angular.

You can further customize your chart using various Chart.js options and APIs, such as adjusting the colors, labels, and tooltip behaviors, to make it even more informative and engaging.

Conclusion

Chart.js is a very useful and powerful library. In this quick tutorial, we've covered how to create a Marimekko chart in Chart.js in Angular. If you want to include any type of chart in your Angular application, then it is very easy to make them with Chart.js.

The full code for this Angular application is hosted on my GitHub Repo.

I hope you found this tutorial helpful and informative. If you have any questions or feedback, feel free to to contact me on LinkedIn!

Related Articles I've Written about Chart.js:

• How to Make Bar and Line Charts using Chart.js in Angular
• Chart.js Tutorial – How to Make Pie and Doughnut Charts in Angular
• How to Add the Chart.js Zoom Plugin to an Angular App

Photo by Austin Distel on Unsplash.

With pivot tables, you can make comparisons and create calculations more quickly. You can even create charts to visualize your data.

Creating pivot tables might be intimidating if you're doing it for the first time. But in this article, I’m going to explain everything you need to start creating pivot tables.

It doesn’t end there – I will also show you how to add charts so you can visualize your data.

In addition, the version of Excel you’re using doesn’t matter. You can even create a Pivot table in Excel 2013. In fact, I used Excel 13 to get set for this article.

What We'll Cover

• How to Create a Pivot Table in Excel
  • How to Create Rows and Make Calculations with a Pivot Table
  • How to Create Entirely New Rows with a Pivot Table
• How to Implement Graphical Visualization for a Pivot Table
• Wrapping Up

How to Create a Pivot Table in Excel

To show you how to create a pivot table, I have created a table of some fictional footballers showing:

• their names
• the number of matches they've played
• their assists and goals

I will be creating extra rows of Goal Contributions and Goal Ratio, also called Goals per Game.

In football (Soccer), goal contributions is the total number of goals and assists. The goal ratio is derived when the number of goals is divided by the number of matches played.

To create a pivot table, follow the steps below:

Step 1: In the menu bar, click “Insert” and select “Pivot Table”:

Step 2: Leave everything as it is and select “OK”:

You should use a new worksheet so you can have a dedicated sheet for your pivot table.

The next interface you’ll see looks like this:

You’ll be working with the part where you see “PivotTable Fields”. You will even see the columns of your table there.

How to Create Rows and Make Calculations with a Pivot Table

This is the part where you can create rows, columns, and make calculations.

To create rows for your pivot table, drag one of the rows in the existing table to the part where you see “ROWS”.

For instance, I want to create a row for the pivot table with the name row of the original table. That means I have to drag the name row to the ROWS area:

You can see I’ve created a row with the name row of the original table.

To make calculations easily, you can use the “VALUES” area.

I want to see the number of goals scored by each player. So, I’ll drag the “Goal scored” row to the “VALUES” area:

You can see I can directly visualize the number of goals scored by each footballer.

You can also make other calculations in the Values area. Just click the dropdown in front of the column right there and select “Value Field Settings…”:

I want to see the highest goal scored instead of the total goals scored by all the players. So I’ll select “MAX” and click “OK”:

Now I can see the maximum goals scored instead of the total of all goals scored:

How to Create Entirely New Rows with a Pivot Table

Remember I said I would create extra rows of Goal Contributions and Goal Ratio, also called Goals per Game? So, let’s do it.

I need the Assists Created and Goal Scored rows to calculate goal contributions. So, I’ll make sure both of them are in the Values area:

Now, I’ll make sure the “Analyze” tab is selected, click “Fields, Items, & Sets”, then select “Calculated Field…”:

The next interface you’ll see looks like this:

Here, I’ll do three things:

• type the name of the row in the name field
• write the formula – in this case, “Assists Created + Goal Scored”
• click Add and OK

Now, I have successfully created the Goal Contributions row:

To create the Goal Ratio, I have to make sure the matches played row is in the VALUES area:

The formula I’ll use is Goal Scored / Matches played. So, I’ll implement calculated fields again:

I can now see the goal ratio of each footballer:

How to Implement Graphical Visualization for a Pivot Table

It’s nice to create a pivot table and implement calculations easily, but it’s nicer to see the graphical representation of that pivot table in a chart.

To represent the pivot table in a chart:

Step 1: Make sure the “Analyze” tab is selected, then select PivotChart:

Step 2: Select the type of chart you want on the right. It could be a column, pie chart, or bar chart. Also, select the format in the upper part. It could be 2D or 3D.

Click OK when you are satisfied.

That’s the chart representing the data.

Wrapping Up

Pivot tables are one of the most powerful features of Excel. If you have large datasets you have to work with, a pivot table can save you a lot of time when it comes to analysis and visualization.

Pivot tables are nice, but being able to create different types of charts to represent the data is really helpful, too.

I hope this article helps you create a pivot table and charts for the data you’re working with.

If you find this article helpful, don’t hesitate to pass it along to others.

In this tutorial you will learn how to the Add Chart.js Zoom plugin to an Angular application.

When you have a lot of data in a chart, you may want to zoom in and see the details. Line charts are a good way to visualise large amounts of data. You can use the zooming feature in Chart.js to explore your data more closely.

Chart.js is an open-source library you can use to create beautiful charts in any part of your Angular application. The Zooming feature was created to allow you to magnify certain data points for closer inspection. You can quickly and easily zoom by scrolling with the mouse wheel.

Let's see how it works.

Getting Started

I'm going to assume that you already know how to use Chart.js in an Angular application to create simple line and bar charts.

Don't worry if you don't – I've got you covered. You can follow my Chart.js Tutorial – How to Make Bar and Line Charts in Angular to get started.

We will create a new Angular component just for the line chart and then incorporate the zoom plugin into it. We will be using a large amount of data to see how useful the Zoom plugin is.

But first, in your Angular application, you'll need to install the Chart.js Zoom plugin if you don't already have it.

Open up a new terminal in the Angular project folder and paste in the following command:

npm install chartjs-plugin-zoom

This will install the plugin into your Angular application.

Now let’s create a new Angular component and make the line chart. Use the following to create a new Angular component:

ng g c line-chart

This will create a new Angular component in the /src directory.

Then open the line-chart.component.html file and paste in the following code:

<div class="chart-container">
      <canvas  id="MyChart" >{{ chart }}</canvas>
</div>

Now open the line-chart.component.ts file and delete all the code inside it. Then paste in the following code:

import { Component, OnInit } from '@angular/core';
import Chart from 'chart.js/auto';

@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    this.createChart();
  }
  public chart: any;

  createChart() {

    this.chart = new Chart("MyChart", {
      type: 'line', //this denotes tha type of chart

      data: {// values on X-Axis
        labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
        datasets: [
          {
            label: "Sales",
            data: ['467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573', ],
            backgroundColor: 'blue',
            borderColor: "#084de0"
          }
        ]
      },
      options: {
        aspectRatio: 3
      }

    });
  }

}

Again, if you don’t know how this code works, you can always refer back to this Chart.js Tutorial.

We need to add the HTML selector of the line-chart component to the app.component.html file. Remove the initial template code of Angular and add the following:

<app-line-chart></app-line-chart>

Start the local development server using the following command:

ng serve -o

A browser window will open on http://localhost:4200/ and you can see your running Angular application.

As you can see, in order to present the entire chart, this graph begins to skip some labels. It will seem more worse if the graph has more data.

Let's now add a zooming function to our chart so we can enlarge the data points for a closer look.

How to Add the Chart.js Zoom Plugin

Open the line-chart.component.ts file and import the chart.js Zoom plugin. Make sure you register it after importing it. The following code will show you how to do it:

import zoomPlugin from 'chartjs-plugin-zoom';
Chart.register(zoomPlugin);

Now that you have imported the plugin, in the Chart.js option we will add the plugin and enable the zoom on the wheel.

options: {
        aspectRatio: 3,
        plugins: {
          zoom: {
            zoom: {
              wheel: {
                enabled: true,
              },
              pinch: {
                enabled: true
              },
              mode: 'xy',
            }
          }
        }
      }

As you can see , now we can zoom in into the point we want to see closely.

Wrapping Up

The full code for this Angular application is hosted on my GitHub.

I hope you found this tutorial helpful.If you have any questions or comments, please do not hesitate to contact me on LinkedIn. I'll be more than pleased to assist you with your questions.

Thank you for reading!

Photo by Isaac Smith on Unsplash

Data visualization is a vast field with so many different types of charts to learn and create.

But there are several basic, evergreen graphs that every data designer and web developer dealing with analytics should know how to build.

One of them is a Line Chart (or Line Graph). It's primarily designed to represent data over time.

You can follow along with this tutorial to learn how to quickly create beautiful interactive line (and step-line) charts using JavaScript. We'll look at some cool examples and build them step by step, which will make the process both clear and entertaining.

For your convenience, you can find all of them on CodePen so you could play with the line charting code further without limits.

Our Dataset

The last two decades have been nothing short of spectacular in the world of tennis. The Big Three — Roger Federer, Rafael Nadal, and Novak Djokovic — have won an astonishing combined 63 (of the past 78) Grand Slam tournaments. These are the most prestigious championships.

I decided to plot their outstanding rivalry. So, the JS line graphs in this tutorial will visualize the Big Three’s Grand Slam title race. And the first serve is already coming!

How to Build Line Charts in 4 Steps

Generally speaking, the whole process of creating any chart in JavaScript is broken down into four steps, and a line chart is no exception:

1. Make an HTML page with a container.
2. Include JavaScript files.
3. Add your data.
4. Code a visualization.

Let's go through each of these steps now.

1. Make an HTML page with a container

To start with, you need a place where you want your chart to appear.

If you don’t have one yet, create a basic web page. Then create a container for the line chart — add an HTML block-level element and give it a unique ID for further reference.

Here’s what such a page might look like:

<html>
  <head>
    <title>Line Chart JS</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

The width and height parameters of the element are set as 100%. As a result, the line chart will render all over the web page. Of course you can set the style settings to your own liking and needs.

2. Include JavaScript files

Next, include all JavaScript files, which we'll use to create the line chart, in the <head> section.

There are a whole lot of different JavaScript charting libraries which let you visualize data in a fast and simple way. Many of them support line charts, and you can choose one or another depending on your project requirements.

For illustration purposes, in this tutorial, I am using AnyChart JS Charts. It’s flexible, comes with extensive charting docs and API references, and you can use it for free (unless you are building something for a business.)

For the line chart, I add the “Base” module from the CDN. (Of course, you can download it, put it in a folder on your website, and use your own link in that case.)

<html>
  <head>
    <title>Line Chart JS</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // JavaScript code for the line chart.
    </script>
  </body>
</html>

The JavaScript code for the line graph will be inserted between <script> and </script> tags located in the <body> section (you may put those in the <head> section if you want).

3. Add your data

Then, add the data you want to visualize in your line chart.

I counted all Grand Slam singles titles won by Federer, Nadal, and Djokovic, by year. I will add it just like that as an array of arrays.

If you prefer other formats in your particular case, such as JSON, XML, CSV, or something else, check the ways to work with data.

var data = [
  ["2003", 1, 0, 0],
  ["2004", 4, 0, 0],
  ["2005", 6, 0, 0],
  ["2006", 9, 1, 0],
  ["2007", 12, 2, 0],
  ["2008", 13, 5, 1],
  ["2009", 15, 6, 1],
  ["2010", 16, 9, 1],
  ["2011", 16, 10, 4],
  ["2012", 17, 11, 5],
  ["2013", 17, 13, 6],
  ["2014", 17, 14, 7],
  ["2015", 17, 14, 10],
  ["2016", 17, 14, 12],
  ["2017", 19, 16, 12],
  ["2018", 20, 17, 14],
  ["2019", 20, 19, 16],
  ["2020", 20, 20, 17],
  ["2021", 20, 20, 20],
  ["2022", 20, 22, 20]
];

In each array, the year is the first parameter (column #0). Then comes the number of titles won by the three players subsequently (cumulative for each).

4. Code a visualization

Now, the warm-up session is done, and the court is all set. So let’s get the match started and do some quick JavaScript coding!

First, add anychart.onDocumentReady() as shown below:

<script>
  anychart.onDocumentReady(function() {
    // The main JS line charting code will be here.
  });
</script>

Everything else goes inside of that function.

So, second, include the data (from the previous step).

Third, create a data set and map it for each series (one for each player):

// create a data set
var dataSet = anychart.data.set(data);

// map the data for all series
var firstSeriesData = dataSet.mapAs({x: 0, value: 1});
var secondSeriesData = dataSet.mapAs({x: 0, value: 2});
var thirdSeriesData = dataSet.mapAs({x: 0, value: 3});

Fourth, create a line chart instance and three series with the mapped data:

// create a line chart
var chart = anychart.line();

// create the series and name them
var firstSeries = chart.line(firstSeriesData);
firstSeries.name("Roger Federer");
var secondSeries = chart.line(secondSeriesData);
secondSeries.name("Rafael Nadal");
var thirdSeries = chart.line(thirdSeriesData);
thirdSeries.name("Novak Djokovic");

Fifth, to make it clear at a glance what is shown in the line chart, a good idea is to add a legend and a title:

// add a legend
chart.legend().enabled(true);

// add a title
chart.title("Big Three's Grand Slam Title Race");

Finally, reference the container element ID and draw the resulting line chart:

// specify where to display the chart
chart.container("container");

// draw the resulting chart
chart.draw();

That’s it! A fully functional line graph built with JS is ready. Feels like a straight-sets victory, doesn’t it?

Line chart showing the Big 3't title race - created with AnyChart

Check out this basic version of the line chart with the full HTML/CSS/JS code on CodePen. Just in case, here’s the code too:

<html>
  <head>
    <title>Line Chart JS</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {

        // add data
        var data = [
          ["2003", 1, 0, 0],
          ["2004", 4, 0, 0],
          ["2005", 6, 0, 0],
          ["2006", 9, 1, 0],
          ["2007", 12, 2, 0],
          ["2008", 13, 5, 1],
          ["2009", 15, 6, 1],
          ["2010", 16, 9, 1],
          ["2011", 16, 10, 4],
          ["2012", 17, 11, 5],
          ["2013", 17, 13, 6],
          ["2014", 17, 14, 7],
          ["2015", 17, 14, 10],
          ["2016", 17, 14, 12],
          ["2017", 19, 16, 12],
          ["2018", 20, 17, 14],
          ["2019", 20, 19, 16],
          ["2020", 20, 20, 17],
          ["2021", 20, 20, 20],
          ["2022", 20, 22, 20]
        ];

        // create a data set
        var dataSet = anychart.data.set(data);

        // map the data for all series
        var firstSeriesData = dataSet.mapAs({x: 0, value: 1});
        var secondSeriesData = dataSet.mapAs({x: 0, value: 2});
        var thirdSeriesData = dataSet.mapAs({x: 0, value: 3});

        // create a line chart
        var chart = anychart.line();

        // create the series and name them
        var firstSeries = chart.line(firstSeriesData);
        firstSeries.name("Roger Federer");
        var secondSeries = chart.line(secondSeriesData);
        secondSeries.name("Rafael Nadal");
        var thirdSeries = chart.line(thirdSeriesData);
        thirdSeries.name("Novak Djokovic");

        // add a legend
        chart.legend().enabled(true);

        // add a title
        chart.title("Big Three's Grand Slam Title Race");

        // specify where to display the chart
        chart.container("container");

        // draw the resulting chart
        chart.draw();

      });
    </script>
  </body>
</html>

How to Customize Your Line Charts

The basic line chart we created by following the four steps above already looks good. But what if you want to customize it?

Let me show you how to make some changes in the same quick and easy manner.

1. Name the axes

It is always a good idea to explain what each axis of the line chart represents, even if it seems quite obvious. To add titles to both the X and Y axes, use the following:

chart.yAxis().title("Titles won");
chart.xAxis().title("Year");

2. Customize the markers

By default, when you move the mouse pointer over the plot, markers show up on each line series, and their shapes are different. Why not give the markers the same shape? Plus, it would be great to make them smaller.

Look how you can customize the appearance of the line series markers:

firstSeries.hovered().markers().type("circle").size(4);
secondSeries.hovered().markers().type("circle").size(4);
thirdSeries.hovered().markers().type("circle").size(4);

3. Enable crosshairs

Crosshairs are a pair of perpendicular lines following the mouse pointer to help you better understand the X and Y values at any currently hovered point.

In this case, it could be enough to get only one such line, vertical, to highlight the year. Here’s how it’s done:

chart.crosshair().enabled(true).yStroke(null).yLabel(false);

4. Change the tooltip position

Currently, the tooltip is following the mouse pointer. But in this situation, it could be better to make it stick to the data points.

To achieve that kind of behavior, just define the line chart tooltip position mode as “point” and fine-tune other position settings to your liking. For example:

chart.tooltip().positionMode("point");
chart.tooltip().position("right").anchor("left-center").offsetX(5).offsetY(5);

Check out how the JavaScript line chart looks now after all these customizations. (See it live with the full code on CodePen.)

5. Change the colors

One of the simplest, yet most effective ways to personalize a data visualization is by playing with the colors.

The code below changes the color of each player’s line to the main color of the Grand Slam tournament he has won the most times: Wimbledon’s purple for Federer, French Open’s brown for Nadal, and Australian Open’s blue for Djokovic. Additionally, the thickness of the lines is adjusted.

firstSeries.normal().stroke("#7b60a2", 2.5);
secondSeries.normal().stroke("#db7346", 2.5);
thirdSeries.normal().stroke("#43a7dc", 2.5);

6. Improve the title and legend text

The last changes I want to demonstrate in this tutorial — and make the interactive line chart complete — are title and legend customizations.

You can add a subtitle to provide more context, and you can make the text styling more attractive in a few quick tweaks with the help of HTML:

chart
  .title()
  .enabled(true)
  .useHtml(true)
  .text(
    '<span style="color: #006331; font-size:20px;">Big Three&#39;s Grand Slam Title Race</span>' +
      '<br/><span style="font-size: 16px;">(Triumphs at Australian Open, French Open, Wimbledon, U.S. Open)</span>'
  );

For the chart legend, it’s easy to modify the font size and the padding:

chart.legend().enabled(true).fontSize(14).padding([10, 0, 10, 0]);

See what we’ve got! (Check out this JS line chart on CodePen.)

How to Create a Step Line Chart

Just like it’s always more exciting when a tennis match is a five-setter one, here is something extra to make this tutorial and this line graph visualization even more awesome.

From the point of view of data visualization, a stepped line chart will actually work better in this case. And we can make one with just one small modification.

Just change the line() function to stepLine() and your line chart will become your stepped line chart:

// create a stepped line chart
var chart = anychart.stepLine();

// create the series and name them
var firstSeries = chart.stepLine(firstSeriesData);
firstSeries.name("Roger Federer");
var secondSeries = chart.stepLine(secondSeriesData);
secondSeries.name("Rafael Nadal");
var thirdSeries = chart.stepLine(thirdSeriesData);
thirdSeries.name("Novak Djokovic");

Enjoy the elegant JavaScript-powered stepped line chart visualizing the Grand Slam title race between the Big Three in tennis. (Feel free to explore and continue playing with its full source code on CodePen.)

And here's the full code:

<html>
  <head>
    <title>Line Chart JS</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {

        // add data
        var data = [
          ["2003", 1, 0, 0],
          ["2004", 4, 0, 0],
          ["2005", 6, 0, 0],
          ["2006", 9, 1, 0],
          ["2007", 12, 2, 0],
          ["2008", 13, 5, 1],
          ["2009", 15, 6, 1],
          ["2010", 16, 9, 1],
          ["2011", 16, 10, 4],
          ["2012", 17, 11, 5],
          ["2013", 17, 13, 6],
          ["2014", 17, 14, 7],
          ["2015", 17, 14, 10],
          ["2016", 17, 14, 12],
          ["2017", 19, 16, 12],
          ["2018", 20, 17, 14],
          ["2019", 20, 19, 16],
          ["2020", 20, 20, 17],
          ["2021", 20, 20, 20],
          ["2022", 20, 22, 20]
        ];

        // create a data set
        var dataSet = anychart.data.set(data);

        // map the data for all series
        var firstSeriesData = dataSet.mapAs({x: 0, value: 1});
        var secondSeriesData = dataSet.mapAs({x: 0, value: 2});
        var thirdSeriesData = dataSet.mapAs({x: 0, value: 3});

        // create a stepped line chart
        var chart = anychart.stepLine();

        // create the series and name them
        var firstSeries = chart.stepLine(firstSeriesData);
        firstSeries.name("Roger Federer");
        var secondSeries = chart.stepLine(secondSeriesData);
        secondSeries.name("Rafael Nadal");
        var thirdSeries = chart.stepLine(thirdSeriesData);
        thirdSeries.name("Novak Djokovic");

        // add a legend and customize it
        chart.legend().enabled(true).fontSize(14).padding([10, 0, 10, 0]);

        // add a title and customize it
        chart
          .title()
          .enabled(true)
          .useHtml(true)
          .text(
            '<span style="color: #006331; font-size:20px;">Big Three&#39;s Grand Slam Title Race</span>' +
              '<br/><span style="font-size: 16px;">(Triumphs at Australian Open, French Open, Wimbledon, U.S. Open)</span>'
          );

        // name the axes
        chart.yAxis().title("Titles won");
        chart.xAxis().title("Year");

        // customize the series markers
        firstSeries.hovered().markers().type("circle").size(4);
        secondSeries.hovered().markers().type("circle").size(4);
        thirdSeries.hovered().markers().type("circle").size(4);

        // turn on crosshairs and remove the y hair
        chart.crosshair().enabled(true).yStroke(null).yLabel(false);

        // change the tooltip position
        chart.tooltip().positionMode("point");
        chart.tooltip().position("right").anchor("left-center").offsetX(5).offsetY(5);

        // customize the series stroke in the normal state
        firstSeries.normal().stroke("#7b60a2", 2.5);
        secondSeries.normal().stroke("#db7346", 2.5);
        thirdSeries.normal().stroke("#43a7dc", 2.5);

        // specify where to display the chart
        chart.container("container");

        // draw the resulting chart
        chart.draw();

      });
    </script>
  </body>
</html>

Conclusion

As you can see in this tutorial, creating interactive line (and stepped line) charts with JavaScript can be pretty straightforward. Let me know if you have any questions or suggestions.

It is motivating to see how these greats have achieved so much in their professional life.

Let’s use this inspiration to get ahead in the field of data visualization development by building even more (and all the more awesome) charts and graphs!

In this tutorial we will learn how to create simple bar and line charts using the Chart.js library in an Angular application.

But first of all, what is Chart.js and what does it do?

What is Chart.js?

Chart.js is a JavaScript library for building charts. It's designed to be intuitive and simple, but powerful enough to build complex visualizations. It has a wide range of chart types including bar charts, line charts, pie charts, scatter plots, and many more.

ChartJs is open-source and you can use it without any restrictions on private or commercial projects. It's written in pure JavaScript and has no dependencies on other libraries such as jQuery or D3.

It also provides options for animating data updates and adding interactivity to charts such as tooltips and click events.

It was created by the team at Plotly and it’s free to use.

Now we can move on with creating our first bar graph in Chart.js

##Prerequisites Before we get started making the charts, just make sure you meet the following prerequisites:

• You have a basic understanding of HTML, CSS, and TypeScript, especially Object Oriented concepts of TypeScript classes and methods.
• You have Node.js version 10 or higher and NPM or Yarn package manager. You can download Node.js from here.

How to Install Angular CLI

Angular CLI is an official tool from the developers of Angular. It is a command-line interface tool which is very useful for initialising and developing Angular applications.

You can install Angular CLI by executing the following command in a terminal or powershell window:

npm install -g @angular/cli

How to Create an Angular Application

Now let’s create an Angular application that will hold our graphs. In a terminal, execute the following commands:

 ng new angular-chartjs

Now that you've created your angular application, navigate to the project folder and start the local development server using the following command:

cd angular-chartjs
ng serve -o

A browser window will open on http://localhost:4200/ and you can see your running Angular application there.

Now open a new terminal window in the same directory and install the Chart.js library using the following command:

npm install chart.js

Now we need to create two angular components: one for the Bar graph and the other for the line chart.

You can create them easily with the Angular CLI by executing the following commands:

ng generate component bar-chart
ng generate component line-chart

How to Create a Bar Graph with Chart.js

A bar graph is a graphical representation of data, in which the horizontal and vertical axes represent the values, and the length of each bar represents the values specified on the axis.

Bar graphs are one of the most common forms of graphs when it comes to representing data visually. We use them to identify trends and patterns in various data sets.

When to use bar charts:

• To show multiple values at once
• To provide a graphical representation of data
• To compare datasets
• To examine relationships between different variables.

A bar chart is often used in business and economics to show comparisons between products, services, or companies. In our example, we have taken the data of sales and profits made on each day during an 8-day period.

Now that we have created the components, we will move on with creating the bar chart.

Inside the bar-chart component, open the bar-chart.component.html file and paste the following code:

<div class="chart-container">
      <canvas  id="MyChart" >{{ chart }}</canvas>
</div>

We have simply created a container and inside that container a canvas with an id of MyChart. We have used Angular’s string interpolation to render the chart variable, which we will create in the canvas.

Inside the bar-chart component, open the bar-chart.component.ts file and import the Chart.js library using the following commands:

import Chart from 'chart.js/auto';
//or
import Chart from 'chart.js';

Now let’s make the chart veritable we mentioned earlier. This variable will hold the information of our graphs.

public chart: any;

Now we will create a method for the bar chart. This will include the data and labels for our bar chart. Copy the following code and paste it in the bar-chart.component.ts file below the ngOnInit() function:

createChart(){

    this.chart = new Chart("MyChart", {
      type: 'bar', //this denotes tha type of chart

      data: {// values on X-Axis
        labels: ['2022-05-10', '2022-05-11', '2022-05-12','2022-05-13',
                                 '2022-05-14', '2022-05-15', '2022-05-16','2022-05-17', ], 
           datasets: [
          {
            label: "Sales",
            data: ['467','576', '572', '79', '92',
                                 '574', '573', '576'],
            backgroundColor: 'blue'
          },
          {
            label: "Profit",
            data: ['542', '542', '536', '327', '17',
                                     '0.00', '538', '541'],
            backgroundColor: 'limegreen'
          }  
        ]
      },
      options: {
        aspectRatio:2.5
      }

    });
  }

The above code might look daunting at first, but it's quite simple. We are providing the type of chart, the labels, and the data.

We want our createChart() function to run as soon as the page loads. In order to do that we need to call the function in the ngOnInit() like this:

ngOnInit(): void {
    this.createChart();
  }

Finally, we need to add the HTML selector of the bar-chart component to the app.component.html file.. Remove the initial Angular template code and add the following:

<app-bar-chart></app-bar-chart>

Congratulations! If you have followed along carefully then you shouldn’t run into any errors and your output may look like the following:

How to Create a Line Graph with Chart.js

Line charts similar to bar charts are often used to show trends in data over time, such as economic growth or changes in stock prices.

Line charts are also useful for showing changes in quantities, such as population over time or weight loss over a period of weeks.

With a line graph, as opposed to a bar graph, you draw individual points on the two axes and connect nearby points with straight lines.

When to use bar charts:

• When the differences in data points are smaller
• To show trends over the course of time

If you have created the bar graph, then creating a line graph is quite simple. Just follow the same steps you have done so far (and make sure to do them on the line chart component).

Paste the same code for createChart() method on the line-chart.component.ts file below the ngOnInit() function. You just need to change the keyword for type of chart from bar to line.

Your code should look like the following:

createChart(){

    this.chart = new Chart("MyChart", {
      type: 'line', //this denotes tha type of chart

      data: {// values on X-Axis
        labels: ['2022-05-10', '2022-05-11', '2022-05-12','2022-05-13',
                                 '2022-05-14', '2022-05-15', '2022-05-16','2022-05-17', ], 
           datasets: [
          {
            label: "Sales",
            data: ['467','576', '572', '79', '92',
                                 '574', '573', '576'],
            backgroundColor: 'blue'
          },
          {
            label: "Profit",
            data: ['542', '542', '536', '327', '17',
                                     '0.00', '538', '541'],
            backgroundColor: 'limegreen'
          }  
        ]
      },
      options: {
        aspectRatio:2.5
      }

    });
  }

Call the createChart() function in ngOnInit() and your line chart is ready.

ngOnInit(): void {
    this.createChart();
  }

Finally, we need to add the HTML selector of the line-chart component to the app.component.html file.

<app-line-chart></app-line-chart>

Your output may look like the following:

The full code for this Angular application is hosted on my GitHub Repo.

I hope you found this tutorial helpful. Thank you for reading!

Photo by Luke Chesser | Unsplash

In your native tongue, you are not aware of the translation between thought and speech. You think about what you want to say and say it. The pathway from thought to speech feels direct. It's an instantaneous, 1:1 mapping.

When it comes to data visualization, however, there are often many stages of conscious translation between your idea of a chart to the actual graphics on the screen.

Consider these common examples of translation:

• The dataset that undergirds your hypothesis requires transformation before you can display it as a chart.
• Your mental image of the chart has to be translated into drop-down menus and checkboxes in Excel.
• You feel yourself scrolling through a mental database of function signatures and APIs (how do I make a pie chart in Matplotlib again?). Good thing you bookmarked the docs, but still...

Is there a way we can think less about the process of producing charts? Are there heuristics we can follow that make data visualization feel more like speaking our first language?

Thanks to the pioneering work of the late Leland Wilkinson, the answer to these questions is Yes.

In 1999, Leland wrote the book "The Grammar of Graphics" which not only introduced a fresh way of reasoning about charts but it also provided the mathematical underpinnings we need to write powerful, high-level data visualization programs.

Leland forever changed how we think about data visualization.

In this article, I will show by example how to approach data visualization using the concepts of The Grammar of Graphics. The goal is to provide a structured and reusable way of thinking that supports getting from the chart in your mind's eye to the chart on the screen.

In addition, I provide a this notebook in Deepnote that contains 30 challenges, with increasing difficulty, to help you test your new data visualization knowledge. The notebook runs in the cloud so it's ready to use immediately (no installation or setup required).

Comparing Visualization Paradigms

When thinking of data visualization, consider the following paradigms, especially in terms of how they affect data exploration.

For the sake of example, suppose you wanted to plot three categories as points on the X-Y plane (that is, a colored scatter chart).

Imperative visualization specifies how something should be done. For example, begin by instantiating a blank canvas. Use a for loop statement to cycle through a list that maps categories to colors. Draw onto the canvas with each iteration, selecting the correct data based on the mapping. Set the axis labels and legend location.

Here's an example of imperative visualization using Matplotlib:

Declarative visualization specifies what should be done. For example, tell the program that you want to represent two quantitative columns as X-Y points. A third categorial column will be used to encode color.

Here's an example of declarative visualization using Altair:

As you can see above, both examples represent the data in similar ways. The path to getting there, however, is very different.

The imperative paradigm is low level. It provides fine-grained control over the chart at the cost of being verbose. Notice that many details have to be specified manually (for example, legend location, axis labels, and so on).

The declarative paradigm, by contrast, is high level. It does not require much information in order to produce a chart (notice that sensible defaults are chosen by the underlying program rather than having to be explicitly written in code).

This may come at the cost of having ultimate control over every detail on the canvas. But a good implementation of The Grammar of Graphics can produce a staggering variety of charts for many use cases. High-level, declarative visualization libraries allow users to get from thought to chart with fewer programmatic steps.

As you will see in the next section, the benefits don't stop at reducing the lines of code. They extend to the way we think about visualization to begin with.

Declarative visualization lets you think about data and relationships, rather than incidental details. – Jake VanderPlas (source)

Why You Should Avoid Taxonomies of Charts

A taxonomy of charts is a way of organizing charts into groups based on their function and appearance. They may seem helpful at first, but chart taxonomies can be insidious. They way in which they group charts together is inconsistent, though, perceptually this isn't clear at first sight.

Put another way, this method of grouping charts does not follow a well-defined set of logical (mathematical) rules. I will explain why this matters, but first, let me provide two canonical examples of how a chart taxonomy fails.

Chart taxonomy (source)

... and I came to realize that these taxonomies of charts are not only useless, they're harmful. – Leland Wilkinson (source)

The following two charts are considered different according to chart taxonomies:

However, both charts are actually more similar than they are different. The left chart uses Cartesian coordinates and the top chart uses polar coordinates. That's the only difference.

Let's look at the opposite problem. The following two charts are considered similar according to chart taxonomies:

However, upon closer inspection, these charts are not similar at all in terms of how they represent data. The left chart uses angles to represent quantities in the data. The right chart, instead, uses the length of the segments to represent the data while keeping the angles the same.

Why does this matter?

Imagine a visualization program that uses its own idea of a chart taxonomy to map onto GUI menus and/or function calls. For each arbitrarily defined type of chart, the program would have to have a corresponding menu/function (for example, a function for a pie chart, a function for a bar chart, a function for a histogram, and so on).

Sure, some of these functions could be combined but the devil's in the details (that is, which rules govern whether or not to give charts their own function?). Such a program will eventually become inconsistent and bloated, as noted by Wilkinson.

If, on the other hand, we follow The Grammar of Graphics approach, which provides rigorous, mathematical rules for reasoning about data visualization, we may just end up with libraries and GUIs that are more internally consistent and less bloated. This makes them easier to use and maintain.

For example, take a look at these two charts and their associated code:

Both charts are based on the same underlying data. Despite the charts having a very different visual appearance (one is a scatter chart, one is a bar chart with aggregation), they are produced with remarkably similar code.

Notice that the API is not governed by a chart taxonomy that maps onto a set of function calls. As a result, if implemented well, the grammar-based approach allows for consistent and easy-to-remember APIs.

For example, for many statistical charts in Altair, it is often enough to remember only two statements for translating thought into charts.

Which geometric shape do I want?

Bar, circle, line, arc, etc...

How do I want to represent the columns in my data?

Color, shape, size, position, etc...

Using the scatter chart example above, you could say the following:

I want to use a circle as my geometric shape

I want to represent petalLength on the X axis, petalWidth on the Y axis, and species as color

If you compare the associated code to these statements, you can see that they map naturally onto each other, without the need for much translation between thought, code, and chart.

alt.Chart(df).mark_circle().encode(
    x='petalLength',
    y='petalWidth',
    color='species'
)

Call To Action

Grammar-based visualization is not a panacea. But once you learn to think in this way, making charts can feel a lot more like speaking a language.

The graphics you see in your mind can end up on the screen without first having to go through several stages of translation where the resulting code ends up looking very different from how you would describe the chart with words.

Once The Grammar of Graphics is a part of your repertoire, you'll not only be faster at data exploration but your reasoning about data visualization will change, becoming more efficient and consistent.

This is not just about learning a new tool but rather, it's about changing the way we think about data visualization. After all, extending an idea from a famous quote:

A language that doesn't affect the way you think about programming, is not worth knowing. – Alan J. Perlis

To get you started with this new way of thinking, I've prepared this notebook in Deepnote. The notebook runs in the cloud so it's ready to use immediately (no installation or setup).

You'll find 30 Grammar Of Graphics challenges, with increasing difficulty, waiting for you. Good luck!

Cover image source.

Kubernetes is a very helpful tool for cloud-native developers. But it doesn't cover all the bases on its own – there are some things that Kubernetes cannot solve or that are outside its scope.

This is one of the reasons why open source projects are so great. They help amazing tools become even more amazing when we combine them with other awesome open-source tools. And often these tools were developed for the sole purpose of filling the gaps. One of these tools is Helm.

What is Helm?

Helm is widely known as "the package manager for Kubernetes". Although it presents itself like this, its scope goes way beyond that of a simple package manager. However, let's start at the beginning.

Helm is an open-source project which was originally created by DeisLabs and donated to CNCF, which now maintains it. The original goal of Helm was to provide users with a better way to manage all the Kubernetes YAML files we create on Kubernetes projects.

The path Helm took to solve this issue was to create Helm Charts. Each chart is a bundle with one or more Kubernetes manifests – a chart can have child charts and dependent charts as well.

This means that Helm installs the whole dependency tree of a project if you run the install command for the top-level chart. You just a single command to install your entire application, instead of listing the files to install via kubectl.

Charts allow you to version your manifest files too, just like we do with Node.js or any other package. This lets you install specific chart versions, which means keeping specific configurations for your infrastructure in the form of code.

Helm also keeps a release history of all deployed charts, so you can go back to a previous release if something went wrong.

Helm supports Kubernetes natively, which means you don't have to write any complex syntax files or anything to start using Helm. Just drop your template files into a new chart and you're good to go.

But why should we use it? Managing application manifests can be easily done with a few combinations of commands.

Why Should You Use Helm?

Helm really shines where Kubernetes didn't go. For instance, templating. The scope of the Kubernetes project is to deal with your containers for you, not your template files.

This makes it overly difficult to create truly generic files to be used across a large team or a large organization with many different parameters that need to be set for each file.

And also, how do you version sensitive information using Git when template files are plain text?

The answer: Go templates. Helm allows you to add variables and use functions inside your template files. This makes it perfect for scalable applications that'll eventually need to have their parameters changed. Let's look at an example.

I have an open-source project called Zaqar, a simple email microservice for Node.js which communicates with SendGrid. The project is basically composed of a service, a deployment and an autoscaler.

Let's take the deployment file as the example. I'd have something like this:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: zaqar
  namespace: default
  labels:
    app: zaqar
    version: v1.0.0
    env: production
spec:
  replicas: 1
  selector:
    matchLabels:
      app: zaqar
      env: production
  template:
    metadata:
      labels:
        app: zaqar
        version: v1.0.0
        env: production
    spec:
      containers:
        - name: zaqar
          image: "khaosdoctor/zaqar:v1.0.0"
          imagePullPolicy: IfNotPresent
          env:
            - name: SENDGRID_APIKEY
              value: "MY_SECRET_KEY"
            - name: DEFAULT_FROM_ADDRESS
              value: "my@email.com"
            - name: DEFAULT_FROM_NAME
              value: "Lucas Santos"
          ports:
            - name: http
              containerPort: 3000
              protocol: TCP
          resources:
            requests:
              cpu: 100m
              memory: 128Mi
            limits:
              cpu: 250m
              memory: 256Mi

If I wanted to use this template on a CI pipeline, or publish it on my GitHub, I'd need to replace the variable parts with placeholders. So we can replace these texts with the required information.

In this case, both the version tag, the env label, and the environment variables would be replaced by placeholders, like this:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: zaqar
  namespace: default
  labels:
    app: zaqar
    version: #!VERSION!#
    env: #!ENV!#
spec:
  replicas: 1
  selector:
    matchLabels:
      app: zaqar
      env: #!ENV!#
  template:
    metadata:
      labels:
        app: zaqar
        version: #!VERSION!#
        env: #!ENV!#
    spec:
      containers:
        - name: zaqar
          image: "khaosdoctor/zaqar:#!VERSION!#"
          imagePullPolicy: IfNotPresent
          env:
            - name: SENDGRID_APIKEY
              value: "#!SENDGRID_KEY!#"
            - name: DEFAULT_FROM_ADDRESS
              value: "#!FROM_ADDR!#"
            - name: DEFAULT_FROM_NAME
              value: "#!FROM_NAME!#"
          ports:
            - name: http
              containerPort: 3000
              protocol: TCP
          resources:
            requests:
              cpu: 100m
              memory: 128Mi
            limits:
              cpu: 250m
              memory: 256Mi

We can now run our CI pipeline. But before we do that, we need to replace our placeholders with the actual values.

For this we can use sed and its "super easy" syntax sed 's/#!PLACEHOLDER!#/replacement/g', and pipe this down until we finish all the placeholders. The final command would be something like this:

cat deploy.yaml | \
    sed 's/#!ENV!#/production/g' | \
    sed 's/#!VERSION!#/v1.0.0/g' | \
    sed 's/#!SENDGRID_KEY!#/MyKey/g' | \
    sed 's/#!FROM_ADDR!#/my@email.com/g' | \
    sed 's/#!FROM_NAME!#/Lucas Santos/g'

By default, sed outputs everything to the stdout, so we can add another pipe to kubectl -f, like <all the command from before> | kubectl -f -. Then we'll have our deployment in place. The only problem is that we need to do the same for all the other files.

Now imagine a larger project, with lots of other variables and placeholders. You'd probably write a script to do it for you, wouldn't you? That script is Helm.

When you create a Chart (more on this later on), we have a specific directory tree that we must follow so Helm understands what we want to do. Inside the templates directory, we can add our manifest files, with native go templating, like this:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: {{ .Values.name }}
  namespace: {{ default .Release.Namespace .Values.namespace }}
  labels:
    app: {{ .Values.name }}
    version: {{ .Values.image.tag }}
    env: {{ .Values.env }}
spec:
  replicas: {{ .Values.replicaCount }}
  selector:
    matchLabels:
      app: {{ .Values.name }}
      env: {{ .Values.env }}
  template:
    metadata:
      labels:
        app: {{ .Values.name }}
        version: {{ .Values.image.tag }}
        env: {{ .Values.env }}
    spec:
      containers:
        - name: {{ .Chart.Name }}
          image: "khaosdoctor/zaqar:{{ .Values.image.tag }}"
          imagePullPolicy: {{ .Values.image.pullPolicy }}
          env:
            - name: SENDGRID_APIKEY
              value: {{ required "You must set a valid Sendgrid API key" .Values.environment.SENDGRID_APIKEY | quote }}
            - name: DEFAULT_FROM_ADDRESS
              value: {{ required "You must set a default from address" .Values.environment.DEFAULT_FROM_ADDRESS | quote }}
            - name: DEFAULT_FROM_NAME
              value: {{ required "You must set a default from name" .Values.environment.DEFAULT_FROM_NAME | quote }}
          ports:
            - name: http
              containerPort: 3000
              protocol: TCP
          resources:
            {{- toYaml .Values.resources | nindent 12 }}

All those values can be obtained from a Values.yaml file (for default values), or you can set them in the CLI using the --set <path> value flag.

If we want to install our chart we can issue the following command:

helm upgrade --install --create-namespace myChart ./path/to/my/chart \
  --set image.tag=v1.0.0 \
  --set env=production \
  --set environment.SENDGRID_APIKEY=myKey \
  --set environment.DEFAULT_FROM_ADDRESS="my@email.com" \
  --set environment.DEFAULT_FROM_NAME="Lucas Santos"

Helm also allows us to use functions inside our deployments. So we can have default functions to fallback to default values if they're not filled, like the namespace. Or we can have required which displays a message and fails to install the chart if the value is not provided, which is the case of our environment variables.

There are a lot of other useful functions in their docs - check 'em out.

Now we are able to not only more efficiently manage our application's resources, but also to publish these resources in an open-source version system without any hassle or security issue.

How to Create a Helm Chart

It's pretty easy to create a chart in Helm. First, you need to have Helm installed. Then, just type in helm create <chart name> and it will create a directory filled with files and other directories. Those files are required for Helm to create a chart.

Let's take a closer look at what this file tree looks like and what the files are within it:

• chart.yaml: This is where you'll put the information related to your chart. That includes the chart version, name, and description so you can find it if you publish it on an open repository. Also in this file you'll be able to set external dependencies using the dependencies key.
• values.yaml: Like we saw before, this is the file that contains defaults for variables.
• templates (dir): This is the place where you'll put all your manifest files. Everything in here will be passed on and created in Kubernetes.
• charts: If your chart depends on another chart you own, or if you don't want to rely on Helm's default library (the default registry where Helm pull charts from), you can bring this same structure inside this directory. Chart dependencies are installed from the bottom to the top, which means if chart A depends on chart B, and B depends on C, the installation order will be C ->B ->A.

There are other fields, but these are the most common, and they're the required ones. You can take a quick look at Zaqar's repository to check on how we can publish open source charts.

A quick note: When installing Helm, make sure you're installing version 3. Version 2 still works, but it needs a server-side component called Tiller, which ties your helm installation to a single cluster. Helm 3 removed this need with the addition of several CRDs, but it's not supported in all Kubernetes versions.

How to Host a Helm Chart

Ok, you created your chart, now what? Do we have to download the entire repository to install those charts? No! Helm has a public library for the most used charts, which kind of works like Docker Hub.

You can also create your own chart repository and host it online. Helm drinks from the same fountain as HomeBrew, or Linux. You can tap these repositories to download charts contained in them.

Since a chart repository is basically an index.yaml file served from a static web server, you can pretty much create a chart repository out of anywhere.

Take Zaqar, for example – it's hosted on GitHub Pages and is accessible through my domain. When Helm looks for an index.yaml file it's actually looking for the list of available versions of that chart, their SHA256 digests, and the location of the packaged .tgz file to download the chart itself. This is pretty much what NPM does under the hood (overly simplified).

This means you don't need to have your repository cloned forever, and your charts can be private as well. You only need to create a chart repository.

You can even use hosted services like Azure CR to do the job, or you can have a full solution called Chart Museum, which allows you to store your charts and provides you with a neat UI.

Conclusion

Helm is here to stay. It has helped and will help a lot of Kubernetes developers out there for a long time.

If you want to know how to use Helm, you can refer to their docs, or you can take this free learn module on how to deploy your applications on Kubernetes the easy way with Helm.

This article is a step-by-step guide that'll show you how to build an interactive JavaScript range chart that visualizes 20 years of the LA Lakers’ performance with Kobe Bryant.

The year 2020 was pretty poignant for obvious reasons. But even before the pandemic, the year started on a sad note with the death of basketball legend Kobe Bryant. He was a star NBA athlete who had played for 20 years with one and only one team — the Los Angeles Lakers.

Remembering Kobe one year after that horrible crash, I wondered how the Lakers had performed in his two-decade era. So, I visualized that in an interactive Diverging Bar Chart with the help of pure JavaScript.

Thinking that this project might be helpful for those new to web charting, I also logged the entire process and made a tutorial. Check it out!

What Is a Diverging Bar Chart?

First things first, I will give you a brief explanation about what diverging bar charts are and then we'll dive into the tutorial.

A diverging bar chart shows two or more measures that are plotted from a middle baseline, extending either to the right and left (horizontal range bars) or top and bottom (vertical range columns).

The key point of data visualization in such diverging charts is to facilitate the comparison of multiple categories by means of displaying them against a bifurcating midpoint.

In this tutorial, I use the diverging bar chart technique to showcase the wins and losses of the LA Lakers through the 20 years of Kobe Bryant’s career.

Here's a sneak peek at the final chart to get you ready for the start of the game! Follow along with me to learn how I create this beautiful range bar chart with JavaScript.

How to Build a JavaScript Diverging Bar Chart in 4 Basic Steps

There are multiple JavaScript libraries out there providing pre-written JS code for commonly needed functions that can make the interactive data visualization process quite quick and straightforward.

I picked one called AnyChart to create this diverging bar chart. This JS charting library appeared to support (particularly useful in this case) range charts out of the box and was also flexible enough to do what I wanted.

Also, it is quite easy to get started with AnyChart even for beginners because there are many ready-to-use examples and it has intensive documentation.

Of course, having good HTML and JavaScript skills gives you an edge when visualizing data on the web. But anyway, the best part about making use of good charting libraries is that they make it quite uncomplicated to create interactive charts even without much experience.

The entire process of creating literally any JS chart, including a diverging bar chart like this one, can be broken down into four fundamental steps:

1. Create an HTML page.
2. Reference the necessary JS files.
3. Set the data.
4. Write the JS code for the chart.

Let's go through each step in detail now.

1. Create a basic HTML page

The first thing we need to do is create a basic HTML page. Let’s give it a title and create an HTML block element to hold the chart. To identify this <div> later in the code, we should also give it an id attribute (let it be “container”).

<html>
  <head>
    <title>JavaScript Diverging Bar Chart</title>
    <style type="text/css">      
        html, body, #container { 
            width: 100%; height: 100%; margin: 0; padding: 0; 
        } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

Note that it is possible to specify the width and height parameters inside the <style> block to modify the space that your chart will occupy. I have put 100% in both parameters so the chart fills the whole page.

2. Include the necessary JavaScript files

Next, we need to add the charting library scripts that will help create the data visualization. Since we are working with the AnyChart library here, let’s include the corresponding files from its CDN. (Keep in mind that you can always download the scripts if you want.)

For the diverging bar chart, we need the base module script which is to be added to the <head> section of the HTML page.

<html>
  <head>
    <title>JavaScript Diverging Bar Chart</title>
    <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></script>
    <style type="text/css">
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the code for the JS diverging bar chart will come here
    </script>
  </body>
</html>

3. Add the data

I wanted to visualize the number of wins and losses of the LA Lakers team across all seasons from 1996 to 2016. So, I got the data from the NBA website and created an array with the year, wins, and losses.

Since the amount of data is not huge, we can add it just like that:

var winlossData = [
  [65, 17, "2015-16"],
  [61, 21, "2014-15"],
  [55, 27, "2013-14"],
  [37, 45, "2012-13"],
  [25, 41, "2011-12"],
  [25, 57, "2010-11"],
  [25, 57, "2009-10"],
  [17, 65, "2008-09"],
  [25, 57, "2007-08"],
  [40, 42, "2006-07"],
  [37, 45, "2005-06"],
  [48, 34, "2004-05"],
  [26, 56, "2003-04"],
  [32, 50, "2002-03"],
  [24, 58, "2001-02"],
  [26, 56, "2000-01"],
  [15, 67, "1999-00"],
  [19, 31, "1998-99"],
  [21, 61, "1997-98"],
  [26, 56, "1996-97"]
];

Now that the stage is set, let’s start playing around by adding the JavaScript code that will create the interactive Diverging Bar Chart!

4. Write the JavaScript code for your chart

Before anything else, we need to add a function enclosing all the JS code, which makes sure that the entire code inside of it will only execute once the page is loaded.

<script>
  anychart.onDocumentReady(function() {
    // The place for the JS diverging bar chart code
  });
</script>

In general, a JS diverging bar chart is pretty simple to create and I will walk you through each action. So get ready to wiggle, block, and shoot!

Firstly, we create a bar chart and enter the data, all inside the enclosing anychart.onDocumentReady() function.

// create a bar chart
var chart = anychart.bar();

// data
var winlossData = [
  [65, 17, "2015-16"],
  [61, 21, "2014-15"],
  [55, 27, "2013-14"],
  [37, 45, "2012-13"],
  [25, 41, "2011-12"],
  [25, 57, "2010-11"],
  [25, 57, "2009-10"],
  [17, 65, "2008-09"],
  [25, 57, "2007-08"],
  [40, 42, "2006-07"],
  [37, 45, "2005-06"],
  [48, 34, "2004-05"],
  [26, 56, "2003-04"],
  [32, 50, "2002-03"],
  [24, 58, "2001-02"],
  [26, 56, "2000-01"],
  [15, 67, "1999-00"],
  [19, 31, "1998-99"],
  [21, 61, "1997-98"],
  [26, 56, "1996-97"]
];

Next, we create a function that accepts two parameters — a column number and a name. The column number indicates the column in the dataset and the name indicates the series. In our case, we have two series — one for the number of wins and one for the number of losses.

Since we want a diverging bar chart, let’s take the center and plot the bars for wins to the right and bars for losses to the left. Then, we should prepare the dataset by adding all the required values through a 'for' loop.

Don’t worry if this sounds a bit complicated. It is just about making our data ready to be plotted, and when you look into the code below, you’ll likely see that it's all completely logical.

There are two more things we need to include in the function. We define a series with the rangeBar function and add a line to indicate the names of the series and a separator line between the left and right bars.

var createSeries = function (columnNumber, name) {
  var data = [];
  for (var i = 0; i < winlossData.length; i++) {
    var value = winlossData[i][columnNumber];
    var center = 0;
    if (name === "Wins") {
      data.push({
        x: winlossData[i][2],
        low: center,
        high: center + value,
        value: value
      });
    } else {
      data.push({
        x: winlossData[i][2],
        low: -center,
        high: -center - value,
        value: value
      });
    }
  }

  var series = chart.rangeBar(data);
  series.name(name);
};

Now, we create the two series with the desired arguments using the function just defined.

createSeries(0, "Losses");
createSeries(1, "Wins");

It’s halftime and the most complicated parts are over! Now we just have the setup of the chart.

Add the title to the diverging bar chart:

chart
  .title()
  .enabled(true)
  .text("20 Years of LA Lakers Win-Loss Record with Kobe Bryant (1996-2016)");

And enable the chart’s legend:

chart
  .legend()
  .enabled(true);

To make the wins and losses for each year show up adjacent to each other, we should convert the multi-series bar chart into a stacked bar chart. Next, to emphasize divergence, let’s add a line marker at 0. Finally, we assign the container div and draw the chart:

// create a stacked bar chart from the multi-series bar chart
chart.yScale().stackMode("value");

// set a container id for the chart
chart.container("container");

// initiate chart drawing
chart.draw();

That’s the whistle and there you have it — a very basic, yet fully functional interactive diverging bar chart built with JavaScript!

Although Kobe may have been spectacular in the final games of his career in the NBA, we can see that the Lakers struggled during his last few years with more losses than wins. But the overall record is definitely many more triumphs than losses.

Take a look at this initial version of the diverging bar chart with the full JS/CSS/HTML code on CodePen.

<html>
  <head>
    <title>JavaScript Diverging Bar Chart</title>
    <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></script>
    <style type="text/css">
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>

    anychart.onDocumentReady(function () {

      // create a bar chart
      var chart = anychart.bar();

      // data
      var winlossData = [
        [65, 17, "2015-16"],
        [61, 21, "2014-15"],
        [55, 27, "2013-14"],
        [37, 45, "2012-13"],
        [25, 41, "2011-12"],
        [25, 57, "2010-11"],
        [25, 57, "2009-10"],
        [17, 65, "2008-09"],
        [25, 57, "2007-08"],
        [40, 42, "2006-07"],
        [37, 45, "2005-06"],
        [48, 34, "2004-05"],
        [26, 56, "2003-04"],
        [32, 50, "2002-03"],
        [24, 58, "2001-02"],
        [26, 56, "2000-01"],
        [15, 67, "1999-00"],
        [19, 31, "1998-99"],
        [21, 61, "1997-98"],
        [26, 56, "1996-97"]
      ];

      // configure a function to create series
      var createSeries = function (columnNumber, name) {
        var data = [];
        for (var i = 0; i < winlossData.length; i++) {
          var value = winlossData[i][columnNumber];
          var center = 0;
          if (name === "Wins") {
            data.push({
              x: winlossData[i][2],
              low: center,
              high: center + value,
              value: value
            });
          } else {
            data.push({
              x: winlossData[i][2],
              low: -center,
              high: -center - value,
              value: value
            });
          }
        }

        var series = chart.rangeBar(data);
        series.name(name);
      };

      // create series
      createSeries(0, "Losses");
      createSeries(1, "Wins");

      // set the chart title
     chart
        .title()
        .enabled(true)
        .text("20 Years of LA Lakers Win-Loss Record with Kobe Bryant (1996-2016)");

      // enable the chart legend
      chart
        .legend()
        .enabled(true);

      // create a stacked bar chart from the multi-series bar chart
      chart.yScale().stackMode("value");

      // set a container id for the chart
      chart.container("container");

      // initiate chart drawing
      chart.draw();

    });

    </script>
  </body>
</html>

How to Customize Our JavaScript Diverging Bar Chart

A slam dunk thing about interactive data visualization with JavaScript is the freedom we have to customize it so that our data tells better stories. I will show you how to push some quick changes to the basic JS-based diverging bar chart to make it more engaging and informative.

Now I'll throw a 3-pointer and customize the chart to improve some of its functionalities and aesthetics.

1. Basic styling and axes settings

To start with, let’s change some basic styling and settings for the X and Y axes to make things more readable.

Just remember that in AnyChart, a range bar chart is the vertical version of a range column chart. Consequently, in our diverging bar chart, the horizontal axis is the Y-axis, and the vertical axis is called the X-axis.

So, let’s get rid of ticks, configure the axis title, and customize the labels on the vertical axis. We'll also set 80 as the maximum and remove the minus sign from the labels on the horizontal axis:

chart
  .xAxis()
  .ticks(false);
chart
  .xAxis()
  .title()
  .enabled(true)
  .text("Years")
  .padding([0, 0, 10, 0]);
chart
  .xAxis()
  .labels()
  .fontSize(11)
  .fontColor("#474747")
  .padding([0, 10, 0, 0]);
chart.yScale().maximum(80);
chart
  .yAxis(0)
  .labels()
  .format(function () {
    return Math.abs(this.value);
  });

Next, to emphasize divergence, it would be great to add a white stroke between the two series and a line marker at 0.

// add the stroke by setting it in this line
series.name(name).stroke("3 #fff 1");

...

// create a line marker at 0
chart
  .lineMarker()
  .value(0)
  .stroke("#CECECE");

Ah, doesn’t the chart look more polished and easier to read now?

Check out the code for this version of the diverging bar chart on CodePen.

Before we make more customizations, there is one small digression I want to make. I also thought of making the horizontal axis display the wins and losses for every season in percentages rather than absolute values. It’s pretty easy but the result did not offer any extra insights.

Also, the absolute values do represent when the Lakers played more or fewer games through the year. That’s ultimately why I decided to keep the absolute values. But you are welcome to check out the version with percentages on CodePen.

Well, let's move on from that missed shot and back into focus mode.

2. Tooltip customization

Next, I customized the tooltip to make it more informative and interesting.

Here, I also got the idea of showcasing the previously calculated percentage values (see the example from the digression just above) as an extra bit of information in the tooltip of our diverging bar chart.

So, the first step is to implement the calculation of percentage values:

// calculate percentages for the tooltip
var val = winlossData[i][columnNumber] * 100;
if (columnNumber == 0) {
  var percentValue =
    val / (winlossData[i][columnNumber] + winlossData[i][columnNumber + 1]);
} else {
  var percentValue =
    val / (winlossData[i][columnNumber] + winlossData[i][columnNumber - 1]);
}
percentValue = percentValue.toFixed(2);

The percentage calculation goes as part of the series configuration function — look at how it is included there:

// configure a function to create series
var createSeries = function (columnNumber, name) {
  var data = [];
  for (var i = 0; i < winlossData.length; i++) {

    // calculate percentages for the tooltip
    var val = winlossData[i][columnNumber] * 100;
    if (columnNumber == 0) {
      var percentValue =
        val / (winlossData[i][columnNumber] + winlossData[i][columnNumber + 1]);
    } else {
      var percentValue =
        val / (winlossData[i][columnNumber] + winlossData[i][columnNumber - 1]);
    }
    percentValue = percentValue.toFixed(2);     

    var value = winlossData[i][columnNumber];
    var center = 0;
    if (name === "Wins") {
      data.push({
        x: winlossData[i][2],
        low: center,
        high: center + value,
        value: value,
        // add the calculated percentage value
        percentValue: percentValue
      });
    } else {
      data.push({
        x: winlossData[i][2],
        low: -center,
        high: -center - value,
        value: value,
        // add the calculated percentage value
        percentValue: percentValue
      });
    }
  }

Then we have additional tooltip formatting to make it all look neat and beautiful:

// customize the tooltip
chart
  .tooltip()
  .useHtml(true)
  .fontSize(12)
  .titleFormat(function () {
    return this.getData("x") + " " + this.seriesName;
  })
  .format(function () {
    return (
      "<h6 style='font-size:12px; font-weight:400; margin: 0.25rem 0;'>Total games: " +
      "<b>" +
      this.getData("value") +
      "</b></h6>" +
      "<h6 style='font-size:12px; font-weight:400; margin: 0.25rem 0;'>Percentage games: " +
      "<b>" +
      this.getData("percentValue") +
      " %</b></h6>"
    );
  });

3. Color palette change

Well, this last customization is definitely a dagger — the shot that is going to make the chart look completely awesome and win the game! It is simply changing the color palette to match the LA Lakers' jersey colors. So simple:

chart.palette(
  anychart.palettes.distinctColors().items(["#FDB827", "#542583"])
);

You see, at the very last second, I also turned off the selection mode by adding the corresponding command to this line:

series.name(name).stroke("3 #fff 1").selectionMode("none");

Okay! This final interactive JavaScript diverging range bar chart is available on CodePen.

Just in case, the full code for the HTML page is right here:

<html>
  <head>
    <title>JavaScript Diverging Bar Chart</title>
    <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></script>
    <style type="text/css">
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>

    anychart.onDocumentReady(function () {

      // create a bar chart
      var chart = anychart.bar();

      // data
      var winlossData = [
        [65, 17, "2015-16"],
        [61, 21, "2014-15"],
        [55, 27, "2013-14"],
        [37, 45, "2012-13"],
        [25, 41, "2011-12"],
        [25, 57, "2010-11"],
        [25, 57, "2009-10"],
        [17, 65, "2008-09"],
        [25, 57, "2007-08"],
        [40, 42, "2006-07"],
        [37, 45, "2005-06"],
        [48, 34, "2004-05"],
        [26, 56, "2003-04"],
        [32, 50, "2002-03"],
        [24, 58, "2001-02"],
        [26, 56, "2000-01"],
        [15, 67, "1999-00"],
        [19, 31, "1998-99"],
        [21, 61, "1997-98"],
        [26, 56, "1996-97"]
      ];

      // configure a function to create series
      var createSeries = function (columnNumber, name) {
        var data = [];
        for (var i = 0; i < winlossData.length; i++) {

          // calculate percentages for the tooltip
          var val = winlossData[i][columnNumber] * 100;
          if (columnNumber == 0) {
            var percentValue =
              val / (winlossData[i][columnNumber] + winlossData[i][columnNumber + 1]);
         } else {
            var percentValue =
              val / (winlossData[i][columnNumber] + winlossData[i][columnNumber - 1]);
          }
          percentValue = percentValue.toFixed(2);     

          var value = winlossData[i][columnNumber];
          var center = 0;
          if (name === "Wins") {
            data.push({
              x: winlossData[i][2],
              low: center,
              high: center + value,
              value: value,
              // add the calculated percentage value
              percentValue: percentValue
            });
          } else {
            data.push({
              x: winlossData[i][2],
              low: -center,
              high: -center - value,
              value: value,
              // add the calculated percentage value
              percentValue: percentValue
            });
          }
        }

        var series = chart.rangeBar(data);
        series.name(name).stroke("3 #fff 1").selectionMode("none");
      };

      // create series
      createSeries(0, "Losses");
      createSeries(1, "Wins");

      // set the chart title
      chart
        .title()
        .enabled(true)
        .text("20 Years of LA Lakers Win-Loss Record with Kobe Bryant (1996-2016)");

      // enable the chart legend
      chart
        .legend()
        .enabled(true);

      // create a stacked bar chart from the multi-series bar chart
      chart.yScale().stackMode("value");

      // customize the settings of the axes
      chart
        .xAxis()
        .ticks(false);
      chart
        .xAxis()
        .title()
        .enabled(true)
        .text("Years")
        .padding([0, 0, 10, 0]);
      chart
        .xAxis()
        .labels()
        .fontSize(11)
        .fontColor("#474747")
        .padding([0, 10, 0, 0]);
      chart.yScale().maximum(80);
      chart
        .yAxis(0)
        .labels()
        .format(function () {
          return Math.abs(this.value);
        });

      // create a line marker at 0
      chart
        .lineMarker()
        .value(0)
        .stroke("#CECECE");

      // customize the tooltip
      chart
        .tooltip()
        .useHtml(true)
        .fontSize(12)
        .titleFormat(function () {
          return this.getData("x") + " " + this.seriesName;
        })
        .format(function () {
          return (
            "<h6 style='font-size:12px; font-weight:400; margin: 0.25rem 0;'>Total games: " +
            "<b>" +
            this.getData("value") +
            "</b></h6>" +
            "<h6 style='font-size:12px; font-weight:400; margin: 0.25rem 0;'>Percentage games: " +
            "<b>" +
            this.getData("percentValue") +
            " %</b></h6>"
          );
        });

      // set a custom color palette
      chart.palette(
        anychart.palettes.distinctColors().items(["#FDB827", "#542583"])
      );

      // set a container id for the chart
      chart.container("container");

      // initiate chart drawing
      chart.draw();

    });

    </script>
  </body>
</html>

Conclusion

In this tutorial, I have shown you how fast and easy it is to get a diverging bar chart up and running using JavaScript. We've also seen how a little bit of effort makes the graphic look really cool and lets you get more out of the underlying data. Please let me know if you have any questions.

If you are feeling motivated to work more with interactive JS-based data visualization, go ahead and play around with the diverging bar charts on CodePen (I added links throughout the tutorial), check out other chart options, or try other JavaScript libraries.

Also, as we fondly look back at the statistics of the basketball legend’s team here, remember to do more sports and create more visualizations!

Charts and graphs are a great way to display information/data to your app's users. In this article I will show you exactly how to do that with vue-apexcharts.

Getting Started

Using the Vue CLI we can easily create a starter application. First, we need to install the Vue CLI with the command below. You can skip this if you have it installed already.

Note: In order to use the CLI, you’ll need to have Node.js version 8 or above installed (8.10.0+ is recommended).

To install the CLI, run this command in your terminal:

npm install @vue/cli

Now we can use it to create our project. We will create the project using this command:

vue create vue-apexcharts-demo

We’ll then be prompted with the option to pick a default preset or to manually select features. Select **default**.

A new project directory will be created, and you can navigate into it using this command:

cd vue-apexcharts-demo

Installing Apexcharts

Before we continue, you might be wondering…

What is apexcharts?!

ApexCharts is a modern charting library that helps developers create beautiful and interactive visualizations for web pages. You can view their demo here.

We can easily use ApexCharts with our Vue application by integrating its wrapper component for Vue called vue-apexcharts.

To install the vue-apexcharts component in our application, use this command:

npm install --save apexcharts 
npm install --save vue-apexcharts

Configuring vue-apexcharts

Now that we have vue-apexcharts installed we need to install it in our application. Open up the src directory and create a new directory called plugins. Inside the new plugins directory create a file called apexcharts.js.

Next, we will create a Vue component for apexcharts in our apexcharts.js. This will make the component globally available in our application.

To do this, we'll be importing both Vue and vue-apexcharts. Next, we will create a global component called apexchart. Here is what your apexcharts.js file should look like:

import Vue from 'vue'
import VueApexCharts from 'vue-apexcharts'

Vue.component('apexchart', VueApexCharts)

Importing our plugin file

We have to make Vue aware of the file we just created. To do that, we import it in the main.js file. Open up the main.js file and add the following line after the last import statement:

import '@/plugins/apexcharts'

Now we are ready to create our first chart.

Creating our First Chart

We will be creating our charts in the HelloWorld component. This component was created automatically when we used the Vue CLI to create our application.

Open up the file HelloWorld.vue and delete all the demo code there.

Your file should look like this:

<template>
</template>
<script>  
export default {
 name: 'HelloWorld'
}
</script>
<style scoped>
</style>

Remember in our plugin, we called our component apexchart.

Vue-Apexcharts builds charts by using the data you pass into it using props, as seen in the code below. We will use that to create the HTML for our first chart. In the first example, we will start with a very basic bar chart.

<template>
  <div>
   <apexchart 
     width="500" type="bar" 
     :options="options" :series="series">
   </apexchart>  
  </div>
</template>

As you can see in the above template, the apexchart component holds 4 props. Now, let’s jump to the script part.

<script>
export default {
  name: 'HelloWorld',
  data: () => ({
    options: {
      chart: {
        id: 'vuechart-example'
      },
      xaxis: {
        categories: [
         "Jan",
         "Feb",
         "Mar",
         "Apr",
         "May",
         "Jun",
         "Jul",
         "Aug",
         "Sep",
         "Oct",
         "Nov",
         "Dec"
        ]
      }
    },
    series: [{
      name: 'series-1',
      data: [55, 62, 89, 66, 98, 72, 101, 75, 94, 120, 117, 139]
    }]
  })
}
</script>

Explaining Chart Data

Our bar chart contains monthly stock pricing for a fictional organization. We have 12 data points in our bar chart. Each month will be displayed on the x-axis of the chart. Their pricing is displayed on the y-axis of the chart.

To provide the data that will be displayed in our bar chart, we will add a series array. A series is an array of objects. Each object defines the type of chart to be created and will have a data array of values to be plotted on the graph.

You can start your server with the command:

npm run serve

Now, open your browser to localhost:8080 and you should see your chart:

Styling our charts

We can place our chart in the center of the page. To do this I am going to add a class chart-wrapper inside our div. I also want to increase the width of the chart to 800px. My template now looks like this:

<template>
  <div class="chart-wrapper">
    <apexchart 
      width="800" type="bar" 
      :options="options" :series="series">
    </apexchart>
</div>
</template>

Next, let’s add some styling to the new chart-wrapper class that will place our chart in the center of the page. Here is the style I have added:

<style scoped>
div.chart-wrapper {
  display: flex;
  align-items: center;
  justify-content: center
}
</style>

While we are adding styles I want to replace the Vue logo with a title. Open up the App.vue file. Delete the tag and replace it with:

<h1>Vue Apexcharts Demo</h1>

Our charts now looks like this:

Adding a Title and Changing Chart Color

We can add a title to our bar chart to add further context and an explanation of what the chart is all about.

To add a title to our bar chart, go back to your HelloWorld.vue component and add a title to the options object.

options: {
      chart: {
        id: 'vuechart-example'
      },
      xaxis: {
        categories: [
         "Jan",
         "Feb",
         "Mar",
         "Apr",
         "May",
         "Jun",
         "Jul",
         "Aug",
         "Sep",
         "Oct",
         "Nov",
         "Dec"
        ]
      },
      title: {
        text: 'Monthly Stock Pricing'
      }
 },
 series: [{
   name: 'series-1',
   data: [55, 62, 89, 66, 98, 72, 101, 75, 94, 120, 117, 139]
 }]

By default, the title is placed on the left side of the bar chart. Here is what our chart looks like now:

Let’s change the default behaviour by adding our own custom style. I want the title to have a bigger font size and to be centered. The title object has a property called align which represents the horizontal plane. I want the title centered on this. To make the title have a bigger font size we need to add a style option.

Also, we can set the bar chart to have a different color. Here is what options look like now:

options: {
      chart: {
        id: 'vuechart-example'
      },
      xaxis: {
        categories: [
         "Jan",
         "Feb",
         "Mar",
         "Apr",
         "May",
         "Jun",
         "Jul",
         "Aug",
         "Sep",
         "Oct",
         "Nov",
         "Dec"
        ]
      },
      title: {
        text: 'Monthly Stock Pricing',
        align: 'center',
        style: {
          fontSize:  '20px',
        },
      },
      colors: ['#00897b']
 },
 series: [{
   name: 'series-1',
   data: [55, 62, 89, 66, 98, 72, 101, 75, 94, 120, 117, 139]
 }]

This is what the bar chart looks like now:

Final version of our bar chart

Creating a Line Chart

First, we need to create a new chart-wrapper div and a new apexchart element. The new apexchart element will hold props like the previous example. But the interesting thing here is all you need to do is to change the prop type in the template to line.

Here is what my HTML code looks like now:

<template>
  <div>  
    <div class="chart-wrapper">
      <apexchart 
        width="800" type="bar" 
        :options="options" :series="series">
      </apexchart>
    </div>
    <hr>
    <div class="chart-wrapper">
      <apexchart 
        width="800" type="line" 
        :options="options" :series="series">
      </apexchart>
    </div>
  </div>
</template>

We now have this line graph:

Line chart

Apexcharts Documentation

Apexcharts have different charts type you can choose from apart from bar and line. They also have various options that you can add to your chart. You can add legends or markers, and tooltips for example.

If you want to find out about the other chart types and options that are available you can read their documentation here

Repo

You can find the code for this article in my github account.

Conclusion

Charts helps us visualize data and help users view and interact with it. Integrating ApexCharts to your Vue application is just as easy as you have seen above.

Feedback is welcome! And please share this article if you found it helpful.

Thanks for reading!

A Gantt chart is a handy type of bar chart that is used in project management for showcasing a schedule of tasks. This chart visualizes project activities as cascading horizontal bars, with width depicting the project’s duration.

As a front-end web designer or developer, you can make use of Gantt charts to manage projects and enhance the productivity within your team.

In this article, I’m going to show you how to create a simple Gantt chart using the CSS Grid Layout system—no external libraries or other fluff, just pure CSS.

You can reference this tutorial to understand how to use the layout system for applying CSS rules.

The chart will show a typical software development life cycle process, from January to December.

Here is a screenshot of how the Gantt chart will look at the end of this tutorial:

Let’s get started!

Step 1: Create a container div

Let’s start by creating a container div element for the Gantt Chart:

<div class="container">

</div>

Let’s add some CSS styling to it:

.container {  
    max-width: 1200px; 
    min-width: 650px;  
    margin: 0 auto; 
    padding: 50px;
}

Step 2: Create a chart div

Let’s create a div inside the overarching container and name it chart. This is where all the remaining actions are going to take place.

<div class="chart">

</div>

Let’s add some CSS styling to it:

.chart { 
    display: grid;  
    border: 2px solid #000;  
    position: relative;  
    overflow: hidden; 
}

Notice that I’ve set the display property of the class to grid. Consequently, all its direct children will automatically become grid items.

Step 3: Create the chart’s rows

Let’s start by creating the first row, which will be the heading of the Gantt chart.

<div class="chart-row chart-period">
<div class="chart-row-item">
    </div><span>January</span><span>February</span>span>March</span>
    <span>April</span><span>May</span><span>June</span><span>July</span>
    <span>August</span><span>September</span><span>October</span>
    <span>November</span><span>December</span>
</div>

Notice that I’ve provided 12 span elements that will transverse the entire row, showing the months of the project’s duration—from January to December.

Here is its CSS:

.chart-row {  
    display: grid; 
    grid-template-columns: 50px 1fr; 
    background-color: #DCDCDC;
}

.chart-period { 
    color:  #fff;  
    background-color:  #708090 !important;  
    border-bottom: 2px solid #000;  
    grid-template-columns: 50px repeat(12, 1fr);

}

.chart-period > span {
    text-align: center;  
    font-size: 13px;  
    align-self: center;  
    font-weight: bold;  
    padding: 15px 0;   
}

Notice that I used the grid-template-columns property to specify the width and the number of columns in the grid layout.

Let’s see how it looks in a browser, so far:

Next, let’s add lines that will run throughout the chart in a box-like style, which helps showcase the duration of each project.

I also used 12 span elements for creating the lines.

<div class="chart-row chart-lines"> 
    <span></span><span></span><span></span>
    <span></span><span></span><span></span>
    <span></span><span></span><span></span>
    <span></span><span></span>    <span></span>    
</div>

Here is its CSS:

.chart-lines { 
    position: absolute;  
    height: 100%;  
    width: 100%;  
    background-color: transparent;  
    grid-template-columns: 50px repeat(12, 1fr);}

.chart-lines > span {  
    display: block;  border-right: 1px solid rgba(0, 0, 0, 0.3);
}

Let’s see the output in a browser:

Step 4: Add entry items

Finally, let’s add the items that illustrate a year-long process of creating some software.

For example, here is how I added the first entry item:

<div class="chart-row">  
    <div class="chart-row-item">1</div> 
    <ul class="chart-row-bars">    
        <li class="chart-li-one">Planning</li>
    </ul>
</div>

Let me describe what is happening in the code above:

• First, the encompassing div element has a class of chart-row, which I illustrated earlier.
• The div with a class of chart-row-item is used for numbering the entry items on the Gantt chart. Here is its CSS:

.chart-row-item { 
    background-color: #808080;  
    border: 1px solid #000;  
    border-top: 0;  border-left: 0;  
    padding: 20px 0;  font-size: 15px;  
    font-weight: bold;  
    text-align: center;
}

• To show tasks on the Gantt chart, I created an unordered list and styled it to display a horizontal bar, with its length showing the duration of the task.

Here is the CSS styling for the chart-row-bars class:

.chart-row-bars { 
    list-style: none; 
    display: grid;  padding: 15px 0;  
    margin: 0;  
    grid-template-columns: repeat(12, 1fr); 
    grid-gap: 10px 0;  
    border-bottom: 1px solid #000;
}

• The entry item is defined in the li tag. Here is its CSS styling:

li {  
    font-weight: 450;  
    text-align: left;  
    font-size: 15px;  min-height: 15px;  
    background-color: #708090;  
    padding: 5px 15px;  color: #fff;  
    overflow: hidden;  
    position: relative;  
    cursor: pointer;  
    border-radius: 15px;
 } 

 ul .chart-li-one { 
     grid-column: 1/2;  
        background-color: #588BAE;
 }

Notice that I’ve used the grid-column property to specify the duration of the project.

For example, a property of grid-column: 3/9; like the “Development” entry, spans a task across the grid from March to August.

Here is how the first entry item looks in a browser:

I added the other entries on the chart following the same process as the first entry. Ultimately, it resulted into a nice-looking Gantt chart, just like the image I showed earlier.

Wrapping up

That’s it! You can view the entire code for this tutorial on CodePen:

As you’ve seen, creating a Gantt chart using CSS Grid is not complicated. With this type of chart, you can manage your web development projects effectively and ensure that everyone is on track toward accomplishing the stipulated objectives.

Furthermore, Gantt charts can also be used in other industries to manage projects. For example, if you are selling composting toilets, you can use Gantt charts to showcase the number of sales made over a period of time.

Of course, I’ve just scratched the surface about the things you can achieve with Gantt charts.

There are several other tweaks you can make to Gantt charts to suit your specific requirements and project’s goals. For example, you can use them to show the relationship between various tasks and how the completion of one relies on another, show how resources can be allocated for the success of projects, and show clear project requirements that ensure everyone is on the same page.

Do you have any questions or comments?

Please get in touch via Twitter below and I’ll do my best to respond.

When you're starting out as a beginner JavaScript developer, I think it is important to pursue interesting projects. That way you can make sure you have fun as you learn, and you'll likely find an area of specialization that you enjoy.

As they say, "If you love what you do, you'll never work a day in your life".

Source: giphy.com

In this article, I will introduce you to front-end data visualization, which is my personal passion. Perhaps it will become your passion as well!

The most rewarding moments for me as a developer are when I can see or experience the results of what I've made. It’s highly satisfying to create a chart that reveals interesting insights about its data, or an interactive experience that helps explore details of a unique data set. The more significant the result, the more rewarding it feels.

However, I have realized that the amount of work you put into a project does not necessarily correlate with the sense of accomplishment – sometimes it feels great even when it was relatively easy.

Over time, you will find tools that will help make you more efficient, and sometimes you will move mountains with little effort. There are many chart libraries and tools available in the data visualization field. With the right tools, you will create new charts with little effort, regardless of the type of chart you need. Personally, I think that datavis yields a great reward on your investment of time and effort.

In this tutorial you will use a number of tools to get data over the internet, process it, and draw a beautiful chart that can be viewed in any modern browser. You can click the links below to download example code for each step individually, view them all on GitHub, or download all steps at once here: all-steps.zip.

The Result

By the end of this tutorial you will create this interactive data-driven chart. You will learn how to get data over the internet, process it, and make a chart with that data. You will also be able to make your own charts from scratch.

Interactive JavaScript line chart

After processing the data and charting it, you will also learn how to make adjustments to the chart including modifying the default legend, enabling x axis crosshairs with tooltips, and applying text annotations to add context and other information to the chart.

The Tools

To get started, use an internet browser like the one you're probably using to read this article. I recommend Chrome as it offers a great experience and built in tools for developers.

Next you will need a text editor. Something as simple as notepad will work. But, I suggest using a more advanced code editor such as VS Code, as this is an environment you will spend a lot of time with. It will give you a more convenient and pleasant coding experience, and it makes writing HTML5, CSS, and JavaScript easier on the eyes. Most important, if you forget a quote or comma somewhere, a code editor can help you find the error.

This article can help you choose the best JavaScript code editor for web development.

You will use the JSCharting chart library to automatically draw and add interactive functionality for this chart. No other JavaScript libraries such as jQuery, or front-end platforms including React and Angular (commonly used for website projects) will be required.

Why JSCharting?

JSCharting is a JavaScript charting library that can draw many different types of charts using SVG. It is easy to use and get started with, so it's a good fit for this tutorial. The API (Application Programming Interface, aka the options and settings necessary to create charts) makes difficult things simpler and it is a good option when experimenting with data visualizations.

You can use JSCharting for free for personal and commercial use with the included branding.

You can create responsive charts with JSCharting through a couple simple steps:

• Define a <div> tag in the HTML file with a unique id.
• Provide this id, data, and any other options when calling JSC.Chart() in the JavaScript file.

That's it. JSC will draw a professional looking chart populating this div tag with SVG element visuals. The chart will be responsive and interactive without any extra effort.

The Data

You will use a data file provided by the NCHS (National Center for Health Statistics) listing historical life expectancy of males and females in the US.

You can find it here: https://data.cdc.gov/resource/w9j2-ggv5.csv.

This CSV file contains data that categorizes the life expectancies by year, race, and sex. You will use some of this data to draw a simple male/female trend line over the last 100 years.

CSV (Comma Separated Values) is a great format for transmitting data over the internet. It is compact, human readable and you can open it directly excel, which is also nice.

So without further ado, let's get started.

Source: giphy.com

Step 1 - Add a blank chart

The first zip file contains a blank starting point you can fill in as we go. If you get lost or confused, or want to skip ahead, the zip file at the end or throughout each section will bring you up to speed.

If you wish to download all the files at once, see all-steps.zip instead.

step1-a.zip

This zip file contains the following files.

• index.html
• js/index.js

The .html file is empty except for some standard code that makes it a valid file and the .js file is completely blank.

The first step is to add some scripts to the HTML web page file. Normally people suggest adding <script> tags inside the <head> tags. However, for scripts that affect the HTML content it is often better to add them after the closing </body> tag.

This technique loads all the HTML into the DOM before executing any JavaScript. The chart needs the HTML loaded before it can draw in it. The DOM (Document Object Model) is a representation of your HTML code in the browser memory. Once HTML is loaded into the DOM the browser can display it and JavaScript can interact with it.

Start by adding the JSCharting library to the HTML file. Open the index.html file in your editor of choice. Then add a script tag to include JSCharting after the closing </body> tag. The resulting code at the bottom of the file should look like this:

</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
</html>

This library URL points to a CDN (Content Delivery Network). It hosts the chart code and makes it convenient to quickly add the library to any HTML page for prototyping charts and experimenting. You can also download and use the library locally or use the npm package in your project, but the CDN does not require any extra steps.

Next, using the same technique, add another script tag referencing your blank JavaScript file. Add this script after the jscharting.js script so it looks like this:

</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
<script src="js/index.js"></script>
</html>

Great. We are almost ready to draw a blank chart. The last thing you need to do is add a <div> placeholder inside the HTML file to define where we want this chart to draw.

Add this HTML code inside the <body> tags.

<body>
    <div id="chartDiv" style="width:50%; height:300px; margin:0 auto;"></div>
</body>

The div must have an id so you can tell the chart which div to draw in. In this case the id is chartDiv.

You may notice the style attribute of the <div> tag. It makes the div 50% of the window width, and 300 pixels tall. The margin style margin:0 auto; centers the div on the page. The chart will fill whatever size the div is, so changing the div size is a good way to control the chart size.

You're all set with the HTML file. Open the index.js file and add a blank chart to this page by writing the following code which includes the div id chartDiv:

JSC.Chart('chartDiv', {});

Open the index.html file in a browser (drag and drop the file into a web browser like chrome).

Not much to see yet, but you might notice a small JSC logo on this page. That indicates a chart is wired up and drawing.

JSCharting logo shows the chart is working

step1-b.zip

Step 2 - Play with the chart a little bit

Ok, as a test, let's add a couple values for the chart to visualize to see how it works.

Going back to the index.js file, replace the content with the following code which adds more options to the chart.

JSC.Chart('chartDiv', {
   type: 'horizontal column',
   series: [
      {
         points: [
            {x: 'Apples', y: 50},
            {x: 'Oranges', y: 42}
         ]
      }
   ]
});

Now refresh (F5) the browser window where the index.html page is loaded.

Horizontal column chart with one series and two points

Nice! You just made your first chart using JavaScript.

Source: giphy.com

You made a bar chart by setting the chart type option to 'horizontal column'. If you prefer a vertical column, set the value to 'column'. You also added a series with two points to the chart for Apples and Oranges.

All chart data is made up of series and points. A series is simply a group of data points. Charts can contain one or more data series. Data points consist of values that map to the x and y axes. Points can also include many other descriptive variables and values.

The example above contains only one series. Now let's look at the options for a chart with two series. Replace the content of the JavaScript file with this code.

JSC.Chart('chartDiv', {
   type: 'horizontal column',
   series: [
      {
         name:'Andy',
         points: [
            {x: 'Apples', y: 50},
            {x: 'Oranges', y: 32}
         ]
      },{
         name:'Anna',
         points: [
            {x: 'Apples', y: 30},
            {x: 'Oranges', y: 22}
         ]
      }
   ]
});

Refreshing the browser window will show this chart.

Horizontal column chart with two series

The chart options look similar. Still a bar chart, but this time there is an extra object in the series array. We also added name properties for each series so the chart can identify them in the legend.

If you are interested in making different charts like radar charts, area charts, pie charts, gantt charts, or even calendar heatmap charts, take a look at the JSCharting examples gallery and the source code (chart options) used to create those charts. You can quickly learn how to use other chart features by copying the available examples.

step2.zip

Step 3 - Prepare the data

Source: giphy.com

The CSV data format is exactly that – Comma Separated Values. The file contains rows (lines) and each row represents a record or entry. Normally the first row of values contains the names of each comma separated value (column). Subsequent rows contain the values themselves.

name,age
chris,26
mike,34

CSV is human readable, but there are variations of this format. Sometimes if values contain commas (e.g. mailing addresses) the format doesn't work as-is so each value is also wrapped in quotes. That way the commas inside quotes are ignored and the format can still work by using only the commas outside of quotes to separate the values.

"name","age","parents"
"Chris","26","Gregory, Mary"
"Mike","34","David, Sarah"

Values can also be separated using a different character like tabs in place of commas.

But let's not get bogged down in minutia. JSCharting provides a number of tools that help with this process and we will use one of them to skip worrying about the CSV file format and convert it to JSON (JavaScript Object Notation). The result will be an array of objects. Each object represents a row with named properties. The first row in the CSV file is used to define the names of those properties.

This is the url of the data we are interested in: https://data.cdc.gov/resource/w9j2-ggv5.csv.

You can click to download and open it in excel.

CSV file opened in Excel

However, you will download and access this CSV data in real-time using JavaScript code. The code below may be slightly confusing at first, but it's short and you can reuse it to get any CSV, text, or JSON files over the internet programmatically. It is similar to the older AJAX technology but much simpler to use.

Once again, replace the content of the index.js file with the following:

fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')
   .then(function (response) {
      return response.text();
   })
   .then(function (text) {
    csvToSeries(text);
   })
   .catch(function (error) {
      //Something went wrong
      console.log(error);
   });

function csvToSeries(text) {
   console.log(text);
}

Why so complicated? It is because when you request a file, it does not immediately become available. There is a delay and you have to wait for the file to arrive. So first you request the file from another website using fetch().

fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')

Then the code inside the then(...) argument function gets called with the response when it arrives. This function converts the response into text and returns it, which passes the result to the following then() argument function.

.then(function (response) {
    return response.text();
})

The next then(...) argument function calls the csvToSeries() function, and passes the text as an argument.

.then(function (text) {
    csvToSeries(text);
})

In the catch() function, you can specify what to do if anything goes wrong. For example maybe the internet is down, or the URL is not correct.

.catch(function (error) {
    //Something went wrong
    console.log(error);
});

In this case, the error is sent to the console.

In the csvToSeries() function we pass this text to the console for inspection.

function csvToSeries(text) {
   console.log(text);
}

? Note: The native fetch() function is not supported in Internet Explorer 11. If you want to support this browser as well, you can use the JSC.fetch() function which comes with JSCharting. It provides the same functionality, but adds additional support for IE11.

Drag the index.html file into a browser window (or refresh the page if already open) and press F12. This will open the DevTools window of the chrome browser. By default, the bottom half of the DevTools window will show the console output. This is where the text is sent when you run code like:

console.log(text);

Console window output

You can also paste or write code into this console window to execute it. Try pasting the entire code snippet above into the console window (next to the > character) and press enter. You will notice you get the same result in the console window output. This can be useful for testing a line of code and experimenting.

step3-a.zip

At this point you have retrieved the text of the CSV file over the internet and sent it to the console to prove that it works. Now we can start to work with it.

Let's take a look at this data file to get an idea of what's inside: https://data.cdc.gov/resource/w9j2-ggv5.csv

I used excel to sort the rows by the year column to analyze the rows of data for a single year.

The CSV data sorted by year.

Each year contains 9 rows with data based on race and sex. We are only interested in the highlighted male and female values of all races for each year. You will create two series based on the highlighted rows. A series for female and one for male values.

Now that you have an idea of what needs to happen, let's get started.

First, let's use the JSC.csv2Json() function to convert the text into JSON format and pass it to the console to see what it does.

Update the csvToSeries() function with the following code:

function csvToSeries(text) {
   let dataAsJson = JSC.csv2Json(text);
   console.log(dataAsJson)
}

Refresh the browser to see the updated console output.

CSV data converted to JSON using JSC.csv2Json() utility function

The console shows an array of 1062 records. And this is one of these records:

{year: 1900, race: "All Races", sex: "Both Sexes", average_life_expectancy: 47.3, mortality: 2518}

? Note: The console can display arrays, and objects for inspection and you can expand and collapse sections in the console to explore details.

The property name average_life_expectancy is a little long, but you will need to use it. To avoid typing it more than once, define a constant variable to store this name. When you need to use this property, you can just write the variable name lifeExp. It will look like this row[lifeExp] instead of row.average_life_expectancy.

Add this line at the top of the csvToSeries() function.

function csvToSeries(text) {
    const lifeExp = 'average_life_expectancy';
    ...

You can process this data using simple vanilla JavaScript. The end result we want is two series with data points that include a year and life expectancy for each point.

Update the csvToSeries() with the following code:

function csvToSeries(text) {
    const lifeExp = 'average_life_expectancy';
    let dataAsJson = JSC.csv2Json(text);
    let male = [], female = [];
    dataAsJson.forEach(function (row) {
         //add either to male, female, or discard.
        console.log(row);
    });
}

It defines arrays for male and female data points. Then it calls the array dataAsJson.forEach() function passing a callback function(row){...} function as the argument. The forEach() function will execute the callback function for each item in the dataAsJson array. For now we will just call console.log(row) on each row that the callback function encounters.

Refresh the browser and inspect the console output.

Each row object the callback function encountered

Let's add some logic to filter the data we want and log the result in the console window. Replace the csvToSeries() function with this code.

function csvToSeries(text) {
    const lifeExp = 'average_life_expectancy';
    let dataAsJson = JSC.csv2Json(text);
    let male = [], female = [];
    dataAsJson.forEach(function (row) {
         //add either to male, female, or discard.
        if (row.race === 'All Races') {
            if (row.sex === 'Male') {
                male.push({x: row.year, y: row[lifeExp]});
            } else if (row.sex === 'Female') {
                female.push({x: row.year, y: row[lifeExp]});
            }
        }
    });
    console.log([male, female]);
}

Inside the callback function you decide whether the row is of interest and use it or if not then discard it.

if (row.race === 'All Races') {
    if (row.sex === 'Male') {
        //add data to male array
        male.push({x: row.year, y: row[lifeExp]});
    } else if (row.sex === 'Female') {
        //add data to female array
        female.push({x: row.year, y: row[lifeExp]});
    }
}

The logic checks to see if the row.race value equals 'All Races'. If so, then it checks to see if the row.sex property equals either 'Male' or 'Female'. If the row equals either, it adds the data to either the male or female arrays as a {x, y} point object. Notice the use of the lifeExp variable defined above which helps shorten this code.

At the end, you used console.log([male, female]) to pass the male and female variables to the console for inspection and to make sure your code worked as expected.

After refreshing the browser, the console shows the result which is two arrays, each with 118 data points spanning the years 1900 to 2017.

The male and female point arrays

Lastly, instead of passing the result to the console, wrap these data points within an array of two series that the chart can use directly and return them.

Add this code at the end of the csvToSeries() function:

return [
   {name: 'Male', points: male},
   {name: 'Female', points: female}
];

If the returned value was sent to the console, it would produce this result.

Two series objects the chart can consume directly

As you can see, the logic for filtering rows is fairly simple and you can adjust it to get other details from this data set.

To learn more about handling CSV files using JSCharting utilities, see this tutorial. When you are ready for more advanced data handling, the JSC.nest() utility can be used to create series and points from JSON data with with very little code.

step3-b.zip

Step 4 - Putting it all together

The data handling section was the most difficult step, but that alone will enable you to manipulate and extract data of interest from any CSV file. This is where it all comes together and where you will feel a sense of accomplishment.

Start by adding a renderChart() function to the end of the index.js file. You will pass the series data to this function as an argument.

function renderChart(series){
   JSC.Chart('chartDiv', {
      series: series
   });
}

In the then() argument function that calls csvToSeries(), pass the series result to the renderChart() function to see what it draws in the browser.

.then(function (text) {
    let series = csvToSeries(text);
    renderChart(series);
})

step4-a.zip

Now, refresh the browser. You should see this chart that uses the CSV data you processed in the previous section. Sweet! ?

Line chart showing filtered CSV data

Whoa, what happened in 1918? Life expectancy dropped significantly there. According to Wikipedia there was a flu pandemic involving H1N1 virus that wiped out a portion of the world population. This unfortunate event shows how visualizing data provides insights you would not normally get from just looking at the numbers.

You created a chart using the default line series type and it looks good, but you can make a few adjustments and tweaks to further improve it.

First, add a title at the top to explain what the viewer is looking at and an annotation at the bottom of the chart to credit the data source. Update the JSC.Chart() constructor function to pass the following options:

function renderChart(series){
    JSC.Chart('chartDiv', {
        title_label_text: 'Life Expectancy in the United States',
        annotations: [{
            label_text: 'Source: National Center for Health Statistics',
            position: 'bottom left'
        }],
        series: series
    });
}

When you refresh the browser you can see the updated chart.

Line chart with title and annotation for attribution

You added an annotation with label text, and a position setting. We can use another annotation for the title as well, but it was easier to use the title label in this example.

It is easy to control the annotation position using values such as 'top right' or 'inside bottom right'. The 'inside' value means the annotation is placed inside the chart area where data is drawn. This box positions chart example demonstrates all the position setting options.

The legend shows the sum of point values for each series, but the sum is not important for this data set. You can reduce the legend columns to only show the icon and series name by using this setting:

legend_template: '%icon,%name'

But you don't really need to use a legend at all. It will be cleaner to simply label the lines themselves. You can disable the legend, and tell the chart to write the series name on the last point of each line series with these chart options:

legend_visible: false,
defaultSeries_lastPoint_label_text: '<b>%seriesName</b>',

Line chart using point labels instead of a legend

The '%seriesname' token is one of many point related tokens that can be used in any point label text to show point details and calculations.

Finally, let’s enable the x axis crosshair combined tooltip to show the male and female life expectancy for any given year. On mobile devices, you can tap the chart to see the crosshair tooltip. When using a PC, tooltips display when hovering over the chart with your mouse pointer.

xAxis_crosshair_enabled: true,

You may be wondering, what's with all those underscores in property names? This is not the actual property name. It's a shorthand way to write:

xAxis: {crosshair: {enabled: true}},

You may find it more convenient to specify a setting with underscores and JSCharting will understand what you mean.

The default tooltip text is clear, but let's customize it slightly to make it our own.

Default combined tooltip

Since the crosshair tooltip shows information about each point it crosses, the tooltip text is defined within the point options. The defaultPoint property defines point options that all points will inherit automatically.

defaultPoint_tooltip: '%seriesName <b>%yValue</b> years',

Customized combined tooltip

For more information about this feature, check out the crosshair and combined tooltip tutorial.

When you apply all these options, your code will look similar to the following snippet. Replace the entire renderChart() function with this code.

function renderChart(series){
    JSC.Chart('chartDiv', {
        title_label_text: 'Life Expectancy in the United States',
        annotations: [{
            label_text: 'Source: National Center for Health Statistics',
            position: 'bottom left'
        }],
        legend_visible: false,
        defaultSeries_lastPoint_label_text: '<b>%seriesName</b>',
        defaultPoint_tooltip: '%seriesName <b>%yValue</b> years',
        xAxis_crosshair_enabled: true,
        series: series
    });
}

Refresh the browser window once more.

Line chart with crosshairs and customized combined tooltips

You did it!

Source: giphy.com

First you fetched CSV data using native JavaScript. You then converted it into JSON format and filtered the data into two series. With those series you created a beautiful interactive line chart using JSCharting and configured it to look professional.

You can customize and adjusted the charts further to meet your specific needs. Visit the JSCharting tutorials section to learn more about a specific topic, or find charts similar to what you want to make in the examples gallery and copy them to continue your data visualization journey.

If you run into problems working with JSCharting, feel free to contact the support team. They will be happy to guide you or help resolve any issues you may encounter.

step4-b.zip

Bonus Challenge

We did not use all the data available in in that CSV file. Let's experiment with it for fun and practice.

Create this chart using what you have learned.

Challenge: Replicate this chart on your own

This zip file contains the answer:

step5-bonus.zip

Can you think of other charts you can make with this data? Keep experimenting and enjoy every minute of it!

I’m working on a project to push sprint burndown information to distributed Scrum teams working in Slack. The entire application is serverless and running inside AWS. To generate burndown images I wanted to build a lambda function that creates an image, then pushes it to an S3 bucket. In this article, I’ll describe the solution I came up with.

First, the charting library. After investigating a number of options, I settled on the use of the ChartJS library. It’s a great charting library in Javascript that can render all sorts of graphs using the HTML5 canvas. Very flexible and configurable, too. But how do I run it, headless, inside of a lambda?

My first attempt was to create a simple lambda on my MacBook using three NPM packages: chart.js and two other libraries: chartjs-node-canvas and canvas-prebuilt. The former is a wrapper around ChartJS that supports rendering charts in node. The latter is a prebuilt, native version of the HTML5 canvas that allows rendering a canvas headlessly without a browser. I built the lambda with the serverless framework, a very useful tool to create and deploy serverless applications.

Here’s my sample lambda:

My lambda generated a sample graph and all looked well when I ran it locally. On AWS, though, it failed. What gives?

As it turns out, ChartJS uses native NPM modules to render directly to the canvas. Obviously, the native modules I use on my MacBook don’t run inside of a lambda. So what to do?

To run native modules inside a lambda, I needed to use the native libraries that the lambda runtime environment needs. So I fired up an instance of the lambda runtime AMI on EC2 and logged into it. There, I took the same lambda I built earlier and ran npm install on the EC2 instance. This downloads the native NPM libraries ChartJS needs but this time for the lambda runtime environment. With these libraries as part of the lambda function, ChartJS is able to render an image just as it normally would. Yay!

Contrary to normal NPM projects, I checked in the downloaded node modules into my git repository. When updating or building the graphing lambda, take care not to overwrite any of your dependencies. One side-effect of this approach is that I can no longer run the code on my local laptop to test.

Next up: store the image file generated in an S3 bucket. This was actually a fairly simple task with many code snippets available online to learn from. For completeness, here’s mine:

That’s it! Now you can generate images cheaply, on-demand!

Using native libraries is not without its problems though. I’ve had the entire setup work or fail depending on the exact version of canvas-prebuilt that I use. The current setup actually uses two. One transitive dependency via chartjs-node-canvas (2.0.0-alpha.14). One that I specify directly (1.6.5-prerelease.1). If I remove one of them the application fails to start due to some linking errors. YMMV.

I’ve put together a git repo with the sample code and binaries on it if you want to try it out. Check out the source code.

Martin works as VP Engineering for StackState where he and his teams are building a next-generation monitoring and AIOps product. As a side project, Martin is working on Sprintlr, a tool to improve distributed Scrum teams, and techfu.io, a tool to automatically assess technical talent.