Tutorials

Real-time data visualization using Highcharts

by

Highsoft

7 minutes read

Highcharts Core, JavaScript, Performance

Real-time data visualization has become a critical tool for businesses and developers. Whether it’s monitoring financial markets, tracking live sports scores, or keeping an eye on server health, the ability to visualize data as it happens can provide significant advantages.

Highcharts JavaScript charting library excels in this area by offering various ways to implement real-time data updates, making it an ideal choice for developers seeking to build interactive and responsive applications.

In this post we’ll look at leveraging Highcharts for real-time data visualization, including some practical examples. Whether you’re a developer working with JavaScript, .NET, React or other common frameworks, we’re confident you’ll find the inspiration you need.

Highcharts also integrates seamlessly with popular languages such as Python, R, PHP and Java, as well as mobile platforms like iOS and Android. Additional support for frameworks like Svelte, Angular, and Vue, makes it a versatile tool for various development environments.

To see more demos and get an even better understanding of the opportunities Highcharts offers, please head over to the demo section of our website or read up on the technical documentation on how to get started. Once you get the hang of it, the API reference will help you customize your charts in no time.

Challenges in visualizing real-time data

Visualizing real-time data involves managing latency, ensuring synchronization, and handling frequent updates. High-frequency data streams can strain both client and server resources. Bandwidth consumption and performance issues are also concerns, particularly on slower networks. Handling large data volumes requires decisions on how to display and manage older data. Maintaining a smooth user experience, even with frequent updates, and ensuring robust error handling and resilience are crucial for reliability.

Key features and benefits

Highcharts efficiently manages real-time data with built-in features for data streaming and updates. It supports integration with WebSockets and server-sent events, offers options for handling large data volumes, and ensures high performance with low latency. Highcharts provides rich interactivity, cross-browser compatibility, and accessibility features, making it a versatile tool for various devices. Its well-documented API facilitates quick implementation and customization. Highcharts also ensures stability and error handling, making it a reliable choice for real-time data visualization.

Practical examples

In Highcharts, there are primarily two methods for handling live data feeds from a server:

Option 1: Using data module with polling

The first method involves using the data module with polling. This approach is straightforward and relies primarily on configuration settings. By specifying the data source and the polling interval, Highcharts automatically retrieves and updates the chart with new data at regular intervals. This method is particularly convenient for scenarios where a simple, out-of-the-box solution is sufficient, as it requires minimal coding and setup.

The demo below “Live data from dynamic CSV” showcases a real-time data visualization example using an area spline chart. It demonstrates how to dynamically update the chart by fetching data from a CSV file hosted at a specified URL. The example includes features like polling for updates, setting the data refresh rate, and customization options for the chart’s appearance and accessibility. The demo is interactive, allowing users to modify the data source and polling interval to see live updates in the chart.

 </p><p>

Here’s how to recreate this chart

For all basic instructions see Highcharts installation documentation.

1. Load the required files

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

Note that this example also includes some additional scripts, namely the Data module (docs) and Accessibility module (docs).

2. Create containers for the chart and other elements

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
		Datasets formatted in CSV or JSON can be fetched remotely using the
		<code>data</code> module. This chart shows how a chart can also be
		configured to poll against the remote source.
    </p>
</figure>

<div class="ld-form">
	<div class="ld-row">
		<label class="ld-label">
			Enable Polling
		</label>
		<input type="checkbox" checked="checked" id="enablePolling"/>
	</div>
	<div class="ld-row">
		<label class="ld-label">
			Polling Time (Seconds)
		</label>
		<input class="ld-time-input" type="number" value="2" id="pollingTime"/>
	</div>
	<div class="ld-row">
		<label class="ld-label">
			CSV URL
		</label>
		<input class="ld-url-input" type="text" id="fetchURL"/>
	</div>
</div>

3. Add some CSS to control the size and style of your container and other elements

.highcharts-figure {
    min-width: 360px;
    max-width: 800px;
    margin: 1em auto;
}

.ld-form {
    max-width: 800px;
    margin: 1em auto;
}

.ld-row {
    margin: 0.3em 0;
}

.ld-row input {
    line-height: 1.5em;
    padding: 0.375rem 0.75rem;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 0.25rem;
    color: #495057;
}

.ld-label {
    width: 200px;
    display: inline-block;
}

.ld-url-input {
    width: 400px;
    max-width: calc(100% - 2rem);
}

.ld-time-input {
    width: 40px;
}

4. Load and initialize the chart

const defaultData = 'https://demo-live-data.highcharts.com/time-data.csv';
const urlInput = document.getElementById('fetchURL');
const pollingCheckbox = document.getElementById('enablePolling');
const pollingInput = document.getElementById('pollingTime');
 
function createChart() {
    Highcharts.chart('container', {
        chart: {
            type: 'areaspline'
        },
        title: {
            text: 'Live Data'
        },
        accessibility: {
            announceNewData: {
                enabled: true,
                minAnnounceInterval: 15000,
                announcementFormatter: function (
                    allSeries,
                    newSeries,
                    newPoint
                ) {
                    if (newPoint) {
                        return 'New point added. Value: ' + newPoint.y;
                    }
                    return false;
                }
            }
        },
        plotOptions: {
            areaspline: {
                color: '#32CD32',
                fillColor: {
                    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                    stops: [
                        [0, '#32CD32'],
                        [1, '#32CD3200']
                    ]
                },
                threshold: null,
                marker: {
                    lineWidth: 1,
                    lineColor: null,
                    fillColor: 'white'
                }
            }
        },
        data: {
            csvURL: urlInput.value,
            enablePolling: pollingCheckbox.checked === true,
            dataRefreshRate: parseInt(pollingInput.value, 10)
        }
    });

    if (pollingInput.value < 1 || !pollingInput.value) {
        pollingInput.value = 1;
    }
}

urlInput.value = defaultData;

// We recreate instead of using chart update to make sure the loaded CSV
// and such is completely gone.
pollingCheckbox.onchange = urlInput.onchange =
   pollingInput.onchange = createChart;

// Create the chart
createChart();

Option 2: Using API methods

The second method offers more flexibility and control, involving the manual setup of a data connection. This can be done using WebSockets, AJAX calls, or any other custom data retrieval mechanism. By leveraging Highcharts’ API methods, developers can programmatically update the chart as new data becomes available. This approach is ideal for applications that require more intricate handling of data streams, custom update logic, or integration with other parts of an application. It allows for finer control over the data update process, including how and when the data is displayed, making it suitable for complex, real-time data visualization needs.

For a full example of real-time data visualization using API methods, please visit our documentation here: https://www.highcharts.com/docs/working-with-data/live-data

Conclusion and additional resources

Highcharts offers a comprehensive set of tools and features for real-time data visualization. Its flexibility and ease of integration make it a top choice for developers looking to create dynamic, interactive charts. Whether you’re building a financial dashboard, a network monitoring tool, or an IoT application, Highcharts provides the functionality and performance needed to handle real-time data efficiently.

As you explore the possibilities of real-time data visualization with Highcharts, remember to consider the specific needs of your application and audience. By leveraging Highcharts’ capabilities, you can create engaging, informative, and responsive visualizations that bring your data to life.

To explore the capabilities of Highcharts and start creating your climate data visualizations, visit the Highcharts demo section and the technical documentation on using live data.