← Back to migrated posts

📊 Graphical Report Generation Using High Charts JS Plugin – Monitoring Dashboard

• Originally published on old blog

Note: This post was originally published in 2014. While HighCharts remains a powerful charting library, modern alternatives include Chart.js, D3.js, and cloud-based solutions. The principles of dashboard development and data visualization remain relevant.

For the past few months, I have been working on developing a Dashboard application which displays various backlog trends of our application. I was desperately looking for some open source graphical tools which would help us convert tabular or JSON data to graphical format.

Initially, I just gave a try with Google Visualization API, but over time it seemed to be very painful to work with. During that phase, I got to know about the "High Charts" jQuery plugin.

Technologies Used

  1. Twitter Bootstrap – CSS framework
  2. Highcharts – jQuery Plugin
  3. jQuery – JavaScript framework

Demo

Use the below link to see the demo of the "Observare – Monitoring Dashboard". I've pasted a snapshot of it below.

Observare Dashboard Demo:

http://anjuwedssrini.com/Demos/HighCharts-Demo/

Download

The source code of this Highcharts-Demo can be downloaded from GitHub.

GitHub Repository:

https://github.com/Thirunavukkarasu/HighCharts-Demo

Explanation

Step 1: Create Container Divs

First, create as many divs as you want (equivalent to the number of charts) inside the parent container. Specify a unique ID for each div element, as we need to refer to it from JavaScript later on.

<div class="container-fluid">   
    <div class="row">   
        <div class="container-fluid">   
            <div class="row">   
                <div class="col-md-4" id="container1">   
                </div>   
                <div class="col-md-4" id="container2">   
                </div>   
                <div class="col-md-4" id="container3">   
                </div>   
            </div>   
            <div class="row">   
                <div class="col-md-4" id="container4">   
                </div>   
                <div class="col-md-4" id="container5">   
                </div>   
                <div class="col-md-4" id="container6">   
                </div>   
            </div>   
        </div>   
    </div>   
</div>

Step 2: Consume JSON Data

Consume the JSON using jQuery's $.getJSON() function as follows. Inside the options, you have to specify the rendering part of the chart using the renderTo function. You can refer to the following Stack Overflow question for better reference.

Stack Overflow Reference:

How to convert HTML table to chart
$(document).ready(function() {   
    drawChart1();   
});

function drawChart1()   
{   
    var options = {
        chart: {
            renderTo: 'container1',
            type: 'area'
        },
        credits: {
            enabled: false
        },
        series: [{ }],
        title: {
            text: 'Backlog-Trend-1'
        },
        xAxis: {
            title: {
                text: 'Hour'
            }
        }
    };   
    
    $.getJSON('json/Chart1.json', function(data) {   
        options.series = data;   
        var chart = new Highcharts.Chart(options);   
    });   
}

Complete Implementation Example

Here's a complete example showing how to create multiple charts:

<!DOCTYPE html>
<html>
<head>
    <title>Observare Dashboard</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/highcharts.js"></script>
</head>
<body>
    <div class="container-fluid">   
        <div class="row">   
            <div class="col-md-4" id="container1"></div>   
            <div class="col-md-4" id="container2"></div>   
            <div class="col-md-4" id="container3"></div>   
        </div>   
        <div class="row">   
            <div class="col-md-4" id="container4"></div>   
            <div class="col-md-4" id="container5"></div>   
            <div class="col-md-4" id="container6"></div>   
        </div>   
    </div>

    <script>
        $(document).ready(function() {   
            drawChart1();   
            drawChart2();   
            drawChart3();   
        });

        function drawChart1() {   
            var options = {
                chart: {
                    renderTo: 'container1',
                    type: 'area'
                },
                credits: {
                    enabled: false
                },
                series: [{ }],
                title: {
                    text: 'Backlog-Trend-1'
                },
                xAxis: {
                    title: {
                        text: 'Hour'
                    }
                }
            };   
            
            $.getJSON('json/Chart1.json', function(data) {   
                options.series = data;   
                var chart = new Highcharts.Chart(options);   
            });   
        }

        function drawChart2() {   
            var options = {
                chart: {
                    renderTo: 'container2',
                    type: 'line'
                },
                credits: {
                    enabled: false
                },
                series: [{ }],
                title: {
                    text: 'Backlog-Trend-2'
                },
                xAxis: {
                    title: {
                        text: 'Day'
                    }
                }
            };   
            
            $.getJSON('json/Chart2.json', function(data) {   
                options.series = data;   
                var chart = new Highcharts.Chart(options);   
            });   
        }
    </script>
</body>
</html>

JSON Data Structure

Example of the JSON data structure for the charts:

[
    {
        "name": "Backlog Items",
        "data": [
            [0, 10],
            [1, 15],
            [2, 12],
            [3, 18],
            [4, 20],
            [5, 16],
            [6, 14],
            [7, 22],
            [8, 19],
            [9, 25],
            [10, 21],
            [11, 17]
        ]
    },
    {
        "name": "Resolved Items",
        "data": [
            [0, 8],
            [1, 12],
            [2, 10],
            [3, 15],
            [4, 18],
            [5, 14],
            [6, 12],
            [7, 20],
            [8, 17],
            [9, 23],
            [10, 19],
            [11, 15]
        ]
    }
]

Key Features of HighCharts

  • Interactive Charts: Zoom, pan, and drill-down capabilities
  • Multiple Chart Types: Line, area, bar, pie, scatter, and more
  • Responsive Design: Charts adapt to different screen sizes
  • Export Options: Export charts as PNG, JPEG, PDF, or SVG
  • Animation: Smooth animations and transitions
  • Accessibility: Screen reader support and keyboard navigation

Dashboard Best Practices

  • Consistent Design: Use consistent colors and styling across all charts
  • Clear Labels: Provide clear titles and axis labels
  • Responsive Layout: Use Bootstrap grid system for responsive design
  • Performance: Load data asynchronously to avoid blocking the UI
  • Error Handling: Handle cases where JSON data fails to load
  • Loading States: Show loading indicators while data is being fetched

Modern Alternatives

While HighCharts is still powerful, modern alternatives include:

  • Chart.js: Lightweight, responsive charting library
  • D3.js: Powerful data visualization library for custom charts
  • Recharts: React-based charting library
  • Apache ECharts: Feature-rich charting library
  • Plotly.js: Scientific and technical charting
  • Cloud Solutions: Tableau, Power BI, or Google Data Studio

Enhanced Implementation

Here's an enhanced version with error handling and loading states:

function drawChart(containerId, jsonUrl, chartTitle, xAxisTitle) {   
    var options = {
        chart: {
            renderTo: containerId,
            type: 'area',
            height: 300
        },
        credits: {
            enabled: false
        },
        loading: {
            hideDuration: 1000,
            showDuration: 1000
        },
        series: [{ }],
        title: {
            text: chartTitle
        },
        xAxis: {
            title: {
                text: xAxisTitle
            }
        },
        yAxis: {
            title: {
                text: 'Count'
            }
        }
    };   
    
    // Show loading state
    $('#' + containerId).html('<div class="text-center"><i class="fa fa-spinner fa-spin"></i> Loading...</div>');
    
    $.getJSON(jsonUrl, function(data) {   
        options.series = data;   
        var chart = new Highcharts.Chart(options);   
    }).fail(function(jqXHR, textStatus, errorThrown) {
        $('#' + containerId).html('<div class="alert alert-danger">Failed to load chart data</div>');
        console.error('Chart loading failed:', textStatus, errorThrown);
    });   
}

Key Takeaways

  • HighCharts provides powerful, interactive charting capabilities
  • Bootstrap integration creates responsive, mobile-friendly dashboards
  • JSON data consumption enables dynamic chart generation
  • Proper container management is essential for multiple charts
  • Error handling and loading states improve user experience