TypeScript Tutorial: Creating a Simple Data Visualization Dashboard

Written by

learnmodernjavascript

in

Data visualization is a powerful tool for understanding complex data. It transforms raw numbers into easily digestible charts, graphs, and dashboards that reveal trends, patterns, and insights. In this tutorial, we will walk through the process of building a simple data visualization dashboard using TypeScript. We’ll cover the fundamental concepts, explore the necessary libraries, and create interactive visualizations that you can customize and expand upon.

Why TypeScript for Data Visualization?

TypeScript offers several advantages for building data visualization dashboards:

  • Type Safety: TypeScript’s static typing helps catch errors during development, reducing runtime bugs and improving code quality.
  • Code Maintainability: Type annotations and interfaces make your code easier to understand, maintain, and refactor.
  • Developer Experience: TypeScript provides excellent tooling support, including autocompletion, refactoring, and error checking, leading to increased productivity.
  • Scalability: TypeScript enables you to build large and complex dashboards that are easy to manage.

Prerequisites

Before we begin, ensure you have the following installed:

  • Node.js and npm: You’ll need Node.js and npm (Node Package Manager) to manage project dependencies. You can download them from https://nodejs.org/.
  • TypeScript: Install TypeScript globally using npm: npm install -g typescript.
  • A Code Editor: Choose your favorite code editor (VS Code, Sublime Text, Atom, etc.) with TypeScript support.

Setting Up the Project

Let’s create a new project directory and initialize it with npm:

mkdir data-visualization-dashboard
cd data-visualization-dashboard
npm init -y

Next, install the necessary dependencies. We’ll use Chart.js for creating charts and the TypeScript compiler:

npm install chart.js typescript --save

Now, create a tsconfig.json file in the root directory. This file configures the TypeScript compiler. Here’s a basic configuration:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

This configuration specifies the following:

  • target: "es5": Compiles TypeScript to ECMAScript 5 (for broader browser compatibility).
  • module: "commonjs": Uses the CommonJS module system.
  • outDir: "./dist": Specifies the output directory for compiled JavaScript files.
  • strict: true: Enables strict type checking.
  • esModuleInterop: true: Enables interoperability between CommonJS and ES modules.
  • skipLibCheck: true: Skips type checking of declaration files.
  • forceConsistentCasingInFileNames: true: Enforces consistent casing in file names.
  • include: ["src/**/*"]: Includes all TypeScript files in the src directory.

Project Structure

Create the following directory structure:

data-visualization-dashboard/
├── src/
│   ├── index.ts
│   └── styles.css
├── dist/
├── node_modules/
├── tsconfig.json
├── package.json
└── index.html

Building the Dashboard

Let’s start by creating the HTML structure for our dashboard in index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Visualization Dashboard</title>
    <link rel="stylesheet" href="src/styles.css">
</head>
<body>
    <div class="container">
        <h1>Data Visualization Dashboard</h1>
        <div class="chart-container">
            <canvas id="myChart"></canvas>
        </div>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

This HTML sets up the basic layout with a title, a container for the chart, and a script tag to include our compiled JavaScript. The styles.css file will contain the styling for our dashboard. Let’s add some basic styling to src/styles.css:

body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    max-width: 960px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #333;
}

.chart-container {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
}

Now, let’s write the TypeScript code in src/index.ts. This is where we’ll use Chart.js to create the actual chart.

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

// Sample data
const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [{
        label: 'Sales',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
    }]
};

// Chart configuration
const config = {
    type: 'line',
    data: data,
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
};

// Get the canvas element
const ctx = document.getElementById('myChart') as HTMLCanvasElement;

// Create the chart
const myChart = new Chart(ctx, config);

This code does the following:

  1. Imports Chart.js.
  2. Defines sample data for the chart.
  3. Configures the chart type, data, and options.
  4. Gets the canvas element from the HTML.
  5. Creates a new chart using the configuration.

Compiling and Running the Application

To compile the TypeScript code, run the following command in your terminal:

tsc

This will create a dist/index.js file. Open index.html in your browser. You should see a line chart displaying the sample sales data.

Adding More Chart Types

Chart.js supports various chart types. Let’s add a bar chart to our dashboard. Modify src/index.ts to include another chart:

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

// Sample data for line chart
const lineChartData = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [{
        label: 'Sales',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1,
        fill: false
    }]
};

// Configuration for line chart
const lineChartConfig = {
    type: 'line',
    data: lineChartData,
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: 'Line Chart'
            }
        },
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
};

// Sample data for bar chart
const barChartData = {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
        label: '# of 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
    }]
};

// Configuration for bar chart
const barChartConfig = {
    type: 'bar',
    data: barChartData,
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: 'Bar Chart'
            }
        },
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
};

// Get the canvas elements
const lineChartCtx = document.getElementById('myChart') as HTMLCanvasElement;
const barChartCtx = document.getElementById('myBarChart') as HTMLCanvasElement;

// Create the charts
const myLineChart = new Chart(lineChartCtx, lineChartConfig);
const myBarChart = new Chart(barChartCtx, barChartConfig);

Modify your index.html to include a new canvas element for the bar chart:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Visualization Dashboard</title>
    <link rel="stylesheet" href="src/styles.css">
</head>
<body>
    <div class="container">
        <h1>Data Visualization Dashboard</h1>
        <div class="chart-container">
            <canvas id="myChart"></canvas>
        </div>
        <div class="chart-container">
            <canvas id="myBarChart"></canvas>
        </div>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

Recompile your TypeScript code (tsc) and refresh your browser. You should now see both a line chart and a bar chart.

Adding Interactivity

Let’s make the charts interactive by allowing users to change the data displayed. We can add a simple dropdown to select the dataset to display in the line chart. First, add a select element to your index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Visualization Dashboard</title>
    <link rel="stylesheet" href="src/styles.css">
</head>
<body>
    <div class="container">
        <h1>Data Visualization Dashboard</h1>
        <label for="datasetSelect">Select Dataset:</label>
        <select id="datasetSelect">
            <option value="sales">Sales</option>
            <option value="visits">Visits</option>
        </select>
        <div class="chart-container">
            <canvas id="myChart"></canvas>
        </div>
        <div class="chart-container">
            <canvas id="myBarChart"></canvas>
        </div>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

Next, modify src/index.ts to handle the dropdown selection and update the chart data:

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

// Sample data for line chart
const salesData = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [{
        label: 'Sales',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1,
        fill: false
    }]
};

const visitsData = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [{
        label: 'Visits',
        data: [20, 15, 8, 10, 25, 18],
        borderColor: 'rgb(255, 99, 132)',
        tension: 0.1,
        fill: false
    }]
};

// Configuration for line chart
const lineChartConfig = {
    type: 'line',
    data: salesData,
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: 'Line Chart'
            }
        },
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
};

// Sample data for bar chart
const barChartData = {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
        label: '# of 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
    }]
};

// Configuration for bar chart
const barChartConfig = {
    type: 'bar',
    data: barChartData,
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: 'Bar Chart'
            }
        },
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
};

// Get the canvas elements
const lineChartCtx = document.getElementById('myChart') as HTMLCanvasElement;
const barChartCtx = document.getElementById('myBarChart') as HTMLCanvasElement;

// Create the charts
const myLineChart = new Chart(lineChartCtx, lineChartConfig);
const myBarChart = new Chart(barChartCtx, barChartConfig);

// Get the select element
const datasetSelect = document.getElementById('datasetSelect') as HTMLSelectElement;

// Add event listener to the select element
datasetSelect.addEventListener('change', () => {
    const selectedDataset = datasetSelect.value;
    let newData;
    if (selectedDataset === 'sales') {
        newData = salesData;
    } else if (selectedDataset === 'visits') {
        newData = visitsData;
    }
    if (newData) {
        myLineChart.data = newData;
        myLineChart.update();
    }
});

In this updated code:

  • We added two datasets: salesData and visitsData.
  • We get a reference to the select element.
  • We add an event listener to the select element that updates the chart data based on the selected option.
  • We call myLineChart.update() to redraw the chart with the new data.

Recompile and refresh your browser. You should now be able to switch between the sales and visits datasets using the dropdown.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect Chart.js Import: Ensure you import Chart.js correctly, including registering all necessary modules. Make sure you import and register the modules like this: import { Chart, registerables } from 'chart.js'; Chart.register(...registerables);.
  • Type Errors: TypeScript’s type checking can help prevent errors. Always use type annotations for variables and function parameters. If you encounter a type error, carefully review the error message and ensure your types are correct.
  • Canvas Element Not Found: If the chart doesn’t render, check the console for errors. Make sure your <canvas> element has a valid ID and that you are referencing the correct ID in your TypeScript code.
  • Incorrect Data Formatting: Chart.js expects data in a specific format. Double-check your data structure to ensure it matches the required format for the chart type you are using.
  • Missing Dependencies: Make sure you have installed all the necessary dependencies (Chart.js, TypeScript). Run npm install in your project directory if you encounter module-related errors.

Key Takeaways

  • TypeScript enhances data visualization projects with type safety, maintainability, and developer experience.
  • Chart.js is a versatile library for creating various chart types.
  • You can create interactive dashboards by adding event listeners to user interface elements.
  • Always check for type errors and ensure your data is formatted correctly.

FAQ

  1. Can I use other charting libraries besides Chart.js?
    Yes, you can use other libraries like D3.js, ApexCharts, or Recharts. The principles of using TypeScript for data visualization remain the same.
  2. How can I deploy this dashboard?
    You can deploy your dashboard using various methods, such as a static website host (Netlify, Vercel), a cloud platform (AWS, Google Cloud, Azure), or a web server.
  3. How do I handle large datasets?
    For large datasets, consider techniques like data pagination, data aggregation, and lazy loading to improve performance. Also, consider using libraries optimized for large-scale data visualization like Apache ECharts.
  4. Can I add animations to my charts?
    Yes, Chart.js supports animations. You can customize animation settings in the chart configuration options. Other libraries also provide more advanced animation capabilities.
  5. How can I style my charts?
    You can style your charts using CSS or by customizing the chart configuration options provided by the charting library.

Building a data visualization dashboard with TypeScript opens up a world of possibilities for understanding and communicating data. By following this tutorial, you’ve learned the fundamentals of setting up a project, integrating a charting library, and creating interactive visualizations. This is just the beginning. Experiment with different chart types, add more data, and explore the advanced features of Chart.js or other charting libraries. With practice, you can create powerful and insightful dashboards that effectively communicate your data stories.

More posts