Uploading multiple extensive datasets into Highcharts

Highcharts offers various demos and informative articles on loading large datasets into its platform.

Although current browsers may struggle with handling extremely large data sets in Highcharts, there are recommendations for managing this issue. One suggestion involves using aggregation and separating tables to efficiently load data, but this approach may not always be suitable for every situation.

For users dealing with time-series-based data stored in MySQL across multiple tables and requiring daily plotting in Highcharts, the challenge lies in loading several series of data based on specific criteria while maintaining a daily view. Additionally, the initial chart display must show "All."

The decision not to aggregate the data stems from the need to showcase daily fluctuations without losing details due to irregularities that don't align well with aggregation techniques. The historical data to be loaded dates back to 1980.

In light of these requirements, what would be the most effective strategy or technique for seamlessly loading this complex dataset onto Highcharts?

javascriptmysqlhighchartsdata-visualization

Answer №1

It appears that you have accumulated 35 years' worth of daily data, totaling less than 13k points for me. With a chart that is 600px wide, this means there are approximately 20 points crammed into each pixel. The concern raised is about the accuracy of aggregation as users need to view the true data. But how can one discern individual points when there are 20 of them packed in just 1 pixel? Perhaps with age catching up, our eyes may struggle to distinguish these points clearly and end up seeing only a 'fat path'. To compare and contrast, check out these examples: http://jsfiddle.net/Fusher/4ytzuv7o/1/

In the second example, dataGrouping has been disabled:

dataGrouping: {
    enabled: false
}

Even if you zoom in on the first example, you will still achieve accurate data representation.

If dataGrouping cannot be utilized, another solution could involve disabling the navigator and 'All' button so that users can only zoom in at specified ranges, like demonstrated here: http://jsfiddle.net/Fusher/4ytzuv7o/3/

$('#container').highcharts('StockChart', {
    rangeSelector: {
        inputEnabled: false,
        buttons: [{
            type: 'month',
            count: 1,
            text: '1m'
        }, {
            type: 'month',
            count: 3,
            text: '3m'
        }, {
            type: 'month',
            count: 6,
            text: '6m'
        }, {
            type: 'ytd',
             text: 'YTD'
         }, {
             type: 'year',
             count: 1,
             text: '1y'
         }],
         selected: 0
     },
     navigator: {
         enabled: false   
      },
      series: [{
          name: 'AAPL',
          data: data,
          dataGrouping: {
              enabled: false   
           }
       }]
   });

Answer №2

Is it worth considering loading the daily data to analyze trends over the past 45 years? With just 16,000 data points, it may not be overwhelming for highcharts. One approach could be to implement a dynamic aggregation script that automatically aggregates data by week once the zoom level exceeds a certain threshold, like 5 years.

Here's a potential solution:

Initially load the chart with full-resolution data, aggregate data per week, and possibly per month. Set up an event listener to monitor the number of points displayed on the current view. When this reaches a set limit, switch to displaying aggregated data.

By aggregating data into weekly sets, you won't miss out on identifying significant events on specific days. Users can easily zoom in for more detailed information. Condensing forty-five years of daily data into a few thousand data points allows for efficient data visualization.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Identifying Users with Socket.io Socket Connection

I have written some code examples to identify connected users via socket.io. Now, I need to implement a code on the index page to communicate with these users. The following code demonstrates how to send a message to user[1] saying "Welcome" and to user[2 ...

javascriptnode.jssocket.io

Automatically refresh Angular table data from MySQL database

I am using Angular to retrieve data from my MySQL database using http.get(url) and then display it in a table. Everything is functioning properly, but now I want the controller to automatically call http.get(url) when there is a change in the database wit ...

phpmysqlangularjs

Invent a Vue method that swiftly updates a textarea without any delay

I am working on a Laravel application that retrieves data from a server and displays it in a textarea. I am looking to have the textarea update incrementally without buffering as the data comes back from the server. Currently, it waits until all the data i ...

javascriptphplaravelvue.js

Tips for retrieving data from MySQL once the POST request has finished executing

By clicking a button, I want the application to: Extract text from an input field Submit it to MySQL to insert as a new row Retrieve all rows from MySQL (including the new one) Update the react component state with the newly fetched data Re-render a list ...

mysqlreactjsexpressasync-await

The default value in an Ionic select dropdown remains hidden until it is clicked for the first time

Having an issue with my ion-select in Ionic version 6. I have successfully pre-selected a value when the page loads, but it doesn't show up in the UI until after clicking the select (as shown in pic 2). I'm loading the data in the ionViewWillEnt ...

javascriptangulartypescriptionic-frameworkionic6

Guide to creating an animated filter effect for a list with the useTransition feature in react-spring

Currently, I am working on animating the transition of a list when it is filtered using the latest useTransition hook changes in version 9.x of react-spring. My goal is to make the remaining items smoothly move to their new positions as the list items are ...

javascriptreactjsreact-spring

Transforming bizarre symbols retrieved from a mysql database

Having issues extracting data from a MySQL database. The text in Spanish contains weird characters when queried via PHP. The text appears normal when querying through the MySQL terminal. Text extracted using PHP No se está valorando lo suficiente el ...

phpmysqlmysqli

Leveraging Cookies for Auto-filling PHP Form

After a user registers and logs in to access a form, the goal is to have certain fields in the form pre-populated with information from their registration details stored in an SQL database. The log-in form looks like this: <?php session_start(); // Ch ...

phpmysqlformscookies

Using css with display:none and display:block is not allowed

When a user selects one of the two choices, questions appear. This functionality is working fine, but as soon as I make any changes to the CSS, it stops working. I am using display:none and display:block for this purpose. You can find a link to the fiddle ...

javascriptjqueryhtml

Verifying a user's name when navigating a route

Hey everyone, I've been working on this project for the past 3 hours and could really use some help. I created an express webapp with an admin page. The register and login functionalities are all set up using passport. I have a function to check if th ...

javascriptnode.jsauthentication

Trouble with inserting into table unnoticed, despite PHP script running smoothly

I'm encountering an issue with the INSERT INTO categories code for inserting data into a table. Despite using a similar query in another table that is working fine, this one doesn't seem to insert any data without generating errors. Any suggestio ...

phpmysql

An error is triggered when attempting to target multiple element Id's in Javascript and one of them cannot be located

I have encountered an issue when trying to target multiple IDs with JavaScript in order to disable input fields associated with them. The script I am using seems straightforward, but I noticed that on pages where the middle element is missing, the third on ...

javascripthtmlcss

Struggled with loading the XML file into the DOM using Jquery

I'm having trouble retrieving an XML file and displaying its contents on the page. I've checked that the file is successfully retrieved, as indicated by a 200 status in the network capture. I attempted to display the $title in an alert box, but i ...

javascriptajaxxmljquery

Placing a user's username within an ejs template using express and node.js

Currently, I am attempting to integrate the username into a layout using ejs templating with node and express. Below are the steps I have taken: Mongodb model: const mongoose = require('mongoose') const Schema = mongoose.Schema; var uniqueValid ...

javascripthtmlnode.jsexpressejs

Developing an SQL table for a website using JavaScript

My command is not functioning as expected and I am struggling to identify the issue. The database opens successfully, however, it fails to process the table creation. var createtable2 = 'CREATE TABLE IF NOT EXISTS offlineCabinDefects (id INTEGER PRIM ...

javascriptsqldatabasesqlite

Leveraging a Resulting Value from a SQL Function to Update the Existing Value

I am trying to retrieve the maximum salary value, but I am facing issues in replacing the employee's current salary value with it. My attempt at writing the 'SET' command has not been successful so far. DELIMITER $$ CREATE FUNCTION f_max_sa ...

mysqlsqlfunctionvariablesset

Transition the canvas video from black and white to full color

I am working with two elements - a video and a canvas. There is a function that draws the video on the canvas in grayscale when the video plays. I also have a button that is supposed to fade the canvas video from grayscale back to color. Currently, the cod ...

javascripthtmlcanvas

When trying to run the "npm start" command, I encountered a syntax error that specifically mentioned the use of

Every time I attempt to run the npm start command, I encounter the following error: I have followed the steps provided in this link: https://github.com/kriasoft/react-starter-kit/blob/master/docs/getting-started.md Could you please advise on how to resolve ...

javascriptreactjsnpmecmascript-6babeljs

React form submissions result in FormData returning blank data

I am having trouble retrieving the key-value pair object of form data when the form is submitted, using the new FormData() constructor. Unfortunately, it always returns empty data. Despite trying event.persist() to prevent react event pooling, I have not ...

javascriptreactjsdomdom-eventsform-data

Using $npm_package_ notation to retrieve information about the version of a private package

When using Npm, you can easily access package information from the package.json file by using a helpful prefix. For example, you can extract the react version with $npm_package_dependencies_react to find the current version of react listed in the file. Ho ...

javascriptnpm