What are the best methods for creating JavaScript charts that efficiently handle massive amounts of data?

After conducting a thorough search, I couldn't find any article similar to what I'm working on for my ASP.Net MVC4 project.

The main challenge we're facing is drawing charts with AJAX and JavaScript for extremely large amounts of data. For instance, we are dealing with waveform charts that contain over 75,000 data points.

Our current solution using JQWidgets worked well during initial tests but started experiencing slow load times when handling large datasets.

We also experimented with HighCharts, which began to exhibit performance issues when dealing with extensive amounts of data (we're not considering filtering or summarizing data at the moment).

It's crucial for us to display a significant number of data points as we need to visualize sensor generated waveforms.

I'm confident that others have encountered similar challenges, so I'm reaching out to see if anyone can provide insights on this matter.

javascriptajaxasp.net-mvc-4charts

Answer №1

If you're looking for a powerful library designed for handling big data, you should check out the ZingChart library. This tool offers various features to ensure quick and stable renders.

For a demonstration of its capabilities, see how easily ZingChart can render 100k points in less than a second here. If you want to compare it with other tools, take a look at the ZingChart Vs. demo here (pay attention to the warning in the top right corner).

As a member of the ZingChart team, I'm available to answer any questions you may have about our library!

Answer №2

If you're looking for a solution, I recommend giving high charts a try.

Gather the necessary data, convert it to JSON, and then load it using Dotnet.Highchart.

Here is the reference link:

For example:

public ActionResult Index()
{
    DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
        .SetXAxis(new XAxis
                    {
                        Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }
                    })
        .SetSeries(new Series
                    {
                        Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 })
                    });

    return View(chart);
}

Answer №3

Considering the extensive data volume you have, it might be beneficial to consider implementing a data on-demand loading strategy. Handling 75000 data points may prove challenging for most charting libraries, so selectively loading the data as needed could be a more efficient approach.

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

Best Practices for Variable Initialization in Stencil.js

Having just started working with Stencil, I find myself curious about the best practice for initializing variables. In my assessment, there seem to be three potential approaches: 1) @State() private page: Boolean = true; 2) constructor() { this.p ...

javascripttypescriptstenciljs

Ajax is failing to properly transfer my uploaded file to its designated location

I'm attempting to implement a file upload using ajax without refreshing the page. Since I've never done this before, I believe there may be something crucial missing from my code. function uploadAttachment(){ var name = document.getElementBy ...

phpajax

What is the best way to evaluate a sequence of actions and their outcomes?

Recently, I've dived into the world of writing automated tests for a React application. Along the way, I encountered some intriguing questions about the best approach to testing a series of interactions within the app. Let's imagine a scenario w ...

javascriptreactjsjestjscypressreact-testing-library

"Authorization refused" notification on Internet Explorer 6

Encountering an error in IE6 on line 10 with this code. Specifically, var ref = ...; What could be causing the issue here? <html> <head> <title>JavaScript Popup Example 3</title> </head> <SCRIPT language="JavaScript1.2"& ...

javascriptinternet-explorer-6window-object

Can a for loop iterate through a conditional statement using the length property?

Glad you're here to check this out. See the code below. let questions = []; let Question = function(question, answers, number) { this.question = question; this.answers = answers; this.number = number; } let question1 = new Question(&ap ...

javascriptarraysobjectfor-loopiteration

Scrolling down a jQuery div after each new item is added.OR

I have a div acting as a chat feature, where messages are appended based on user actions. I am trying to make it so that the div automatically scrolls down after each message is added, but I'm encountering some issues with this functionality. You can ...

javascriptjqueryhtmlcss

Having difficulty extracting data from FormData() object and encountering difficulty sending it through the frontend

Whenever I use Postman to send data, the Title, description, and image are successfully transmitted. This is how my post array looks like: router.post('/', uploadS3.array('meme',3),(req, res, next)=>{ // res.json(req.file.locatio ...

javascriptnode.jsreactjsexpressmongoose

Using Jquery to show element when <select> is updated

I've been struggling to make this work due to my limited jquery/js skills. My goal is to have a different message displayed for each option selected from the dropdown menu for further information. <label class="checklabel">Is it possible to re ...

javascriptjquery

Attempting to transfer various variables from several windows using AJAX

Is it possible to pass multiple variables from two different windows into the same PHP script? If not, what would be the best approach to take? Thank you. verifyemail.html <script type = "text/javascript" src = "js/js_functions.js"></script> ...

javascriptphpjqueryhtmlajax

Is there a correct way to accomplish this task? How could I go about achieving it?

Currently, I am delving into the world of react. While following along with some video tutorials, I encountered a roadblock in the request.js file. The issue popped up during the build process ./src/Row.js Line 16:45: 'fetchUrl' is not define ...

javascriptreactjsecmascript-6

The input value in the HTML form was altered momentarily before reverting back to its original state

Researching this topic was quite challenging, but keep reading to find out why. My objective is to detect any changes in a form field so that I can enable the "Save" button. While this seems easy enough, there's a catch. If the user reverts the input ...

javascriptjquery

What is the best method for initializing Bootstrap data attributes API?

I've been puzzled by this issue for a while now. When trying to use the JavaScript components, I can't seem to grasp how to utilize them using the Data Attributes API, also known as the first-class API. For example, take the modal component ment ...

javascripthtmltwitter-bootstrapmodal-dialog

An error occurred during the installation of react-native-svg-charts

click here for the image I recently attempted to integrate the npm package from https://github.com/JesperLekland/react-native-svg-charts into my project. However, I encountered an error consistently as depicted in the image. While most npm packages instal ...

react-nativenpmsvginstallationcharts

Adjusting the rotation transform by deleting and reapplying canvas is causing the chart to not display data after redrawing

I am facing a challenge with my previous issue and I am exploring different solutions. One approach I am considering is to remove the canvas element completely and then re-add it, effectively resetting all rotations on the canvas. Although this method alm ...

javascriptjquerycsscanvaschart.js

Changing a class using JavaScript: Adding and removing class dynamics

Currently, I am attempting to create a function that will toggle the visibility of a visual object on and off whenever the user clicks on it. Additionally, I need to implement a click event listener within the HTML class named btn-sauce. Unfortunately, my ...

javascript

Discovering the Nearest Textfield Value Upon Checkbox Selection Using JQuery

How can I retrieve the value of the nearest Textfield after selecting a checkbox? This HTML snippet serves as a simple example. In my actual project, I have dynamically generated lists with multiple checkboxes. I require a way to associate each checkbox wi ...

javascriptjqueryhtmlcheckboxclosest

Transferring Variables from WordPress PHP to JavaScript

I have implemented two WordPress plugins - Snippets for PHP code insertion and Scripts n Styles for JavaScript. My objective is to automatically populate a form with the email address of a logged-in user. Here is the PHP snippet used in Snippets: <?p ...

javascriptphpjquerywordpress

Guide to utilizing the Array find method to retrieve an object in JavaScript

I'm currently working on a Homework assignment that involves passing a parameter called userID to an arrow function. Within this function, the task is to use the .find method on an array named users. This find function should retrieve an object contai ...

javascriptarrays

Is it possible to switch out all instances of "GET" methods with "POST" throughout the codebase?

While working on a web application, we encountered caching issues with Internet Explorer (caching occurred due to the use of GET requests). The problem was resolved when users turned on "Always refresh from server" in IE's Developers Tool. Although we ...

javascriptajaxxmlhttprequest

Struggling to implement Datatables row grouping using ajax is proving to be quite challenging

Is there a way to group rows in a table based on date ranges, using the data from the first column ("Due_Date"), and leveraging the rowGroup extension provided by Datatables? I've tried various solutions found online, such as using the data property ( ...

javascriptjqueryajaxdatatables