What is the best starting dataset to use from a large pool of data points when creating a stock line chart in High

I am working on creating a line stock highchart similar to the example shown here: https://www.highcharts.com/demo/stock/lazy-loading

In the provided example, the initial load fetches data from 

https://demo-live-data.highcharts.com/aapl-historical.json
, specifically 0-165 records when the All option is selected in the time range tool.

However, if further drill-down or selection of specific time ranges is made, more data is fetched dynamically from the server.

Question: Considering millions of data points spanning from 2000 to 2022, what should be displayed initially for the All option? How should the initial dataset or filter be determined?

NOTE: I will be dealing with millions of data points between 2000 and 2022 going forward. What should be retrieved from the server during the first chart load from this vast dataset?

For reference, the example of the time series data I will have can be found in the mock-data=>i.js folder/file, although it's not currently utilized in the above example.

You can also refer to Highcharts' 1.7 million points example: https://stackblitz.com/edit/js-wng4y6?file=index.js

P.S.: As a newcomer to stockhighcharts, I'm struggling to find detailed explanations. Seeking assistance from the community for further guidance.

javascripthighchartshighchartstock

Answer №1

When it comes to server-side data grouping, it's essential to base it on the specific range you're trying to group the data into. In your case, this range will be 2 years.

Consideration should also be given to the chart size for data grouping. This is typically handled by default when using Highcharts Stock's dataGrouping feature on the client-side. When relevant information is sent to the server, it should respond with a set of grouped data points.

For more details on grouping logic and approximation methods, refer to the API options provided where you can find the method of approximation within a group. https://api.highcharts.com/highstock/series.area.dataGrouping.approximation

Answer №2

It's not advisable to send such a large amount of data to highcharts for processing as it can lead to potential issues. I strongly suggest setting up a local highcharts server (which is supported by them) and running the processing within your own system. Learn more about it here

This is crucial especially for security reasons, particularly if your data is sensitive. Sending it over the internet to highcharts and then back exposes it to potential risks.

You can also determine the start and end time of each rendering, allowing for customization based on user input. Personally, I recommend displaying data from the last 5 days initially, with the option for users to adjust the timeline using a slider.

To address your question, whether you send a data object to a local server or to the highcharts server, you will receive a base64 image in return that can be directly embedded in your UI.

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

Execute npm build in sbt for play framework

Exploring sbt/play configuration is a new challenge for me. Working with play 2.3.8 to host my javascript application, my project utilizes: .enablePlugins(SbtWeb) .enablePlugins(play.PlayScala) .settings( ... libraryDependencies ++= WebDependancies :+ ...

javascriptplayframeworknpmsbtsbt-web

What could be causing my bootstrap-switch to malfunction?

Here is the snippet of code I am working with: jQuery.each($('.onoffswitch-checkbox'), function(i, slotData) { console.log($(slotData).bootstrapSwitch('state')) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1 ...

javascriptjqueryhtmlbootstrap-switch

What aspects of MongoDB security am I overlooking?

Is it a secure way to connect to Mongo DB by using Node JS, Mongo DB, and Express? Could someone provide an explanation of this code in terms of security? === Many tutorials often only show... var mongoClient = new MongoClient(new Server('localhos ...

javascriptnode.jsmongodbexpress

Internet Explorer causing problems with JQuery

I encountered an error with the following code snippet: jQuery.post('/user/result/generate',{ 'id': getHidden() }, function(html) { $('#result').html(html); }); The error message is: ...

javascriptjquery

Refreshing Child's Activities

In my scenario, I am displaying data in a child action and utilizing buttons to modify the displayed information. Here is an example of how I am achieving this: Index.cshtml <head> <script type="text/javascript"> $("#RefreshView").on ...

javascriptjqueryasp.net-mvc

Angular movie database using an API from an apiary

I'm struggling to create a link on movie posters that will lead to detailed movie information based on the movie ID. I have been going through their documentation, but I can't seem to get the api configuration to function properly. Every time I t ...

javascriptangularjs

Access the child component within an @ChildComponent directive in Angular

Is it possible to retrieve child components of another component? For instance, consider the following QueryList: @ContentChildren(SysColumn) syscolumns: QueryList<SysColumn>; This QueryList will contain all instances of the SysColumns class, which ...

javascriptangulartypescriptcomponentschildren

`The console is displaying incorrect results when returning a JSON object`

Need to extract the full address as well as the lat and long values from the provided JSON data. var place = { "address_components": [{ "long_name": "17", "short_name": "17", "types": [ "street_number" ] }, ... ...

javascriptjqueryjsongoogle-maps

Sort your Laravel pagination table effortlessly with just one click

Here is my current setup: <table class="table table-striped"> <tr> <th> Item Image </th> <th> Item Number </th> <th> Item Name </th> <th> Description </th> ...

javascriptphpjquerylaravelsorting

Creating a responsive DataTable filled from a $.ajax request is a straightforward process that can greatly

I am in the process of creating an application that retrieves a lot of data from a web-service query and populates a data table with it. The data shows up correctly and styled properly on desktop, but when I switch to viewing it on a mobile device, the dat ...

javascriptjqueryajaxdatatables

Does anyone know if there is a way to use JavaScript to implement LESS in CSS files

Is there a way to perform variable substitution, especially in CSS using JavaScript? I am looking for a solution that offers more features than just variable substitution, such as the LESS syntax. Has anyone come across a JavaScript implementation of LES ...

javascriptcssless

Include a Vue component within another Vue component in a Laravel application using VueJs

I've recently integrated Vue.js into my Laravel project and encountered an issue when trying to call a component within another component. After running the command npm run dev, I received a webpack error. Here is the code snippet from my parent comp ...

javascriptlaravelvue.jsvue-component

Implementing Passport authentication for Steam, transitioning from Express to NestJS

I have embarked on the task of transitioning an express project to nestjs. How can I achieve the same functionality in Nestjs as shown in the working code snippet from Express below? (The code simply redirects to the Steam sign-in page) /* eslint-disable s ...

javascriptexpressnestjspassport.js

Error: An unexpected identifier was found within the public players code, causing a SyntaxError

As a newcomer to jasmine and test cases, I am endeavoring to create test cases for my JavaScript code in fiddle. However, I'm encountering an error: Uncaught SyntaxError: Unexpected identifier Could you guide me on how to rectify this issue? Below is ...

javascriptangulartypescriptjasminekarma-runner

Customize specific styles for individual divs one at a time (without the use of jQuery)

Can you assist me with this issue? I am trying to display the <span class="badge badge-light"><i class="fa fa-check-circle"></i></span> tag (initially set to "visibility: hidden") when clicking on a div with the class "role-box". He ...

javascripthtmlangular

Using Javascript to dynamically add form fields based on the selection made in a combo box

I am in the process of creating an information submission page for a website, where various fields will need to be dynamically generated based on the selection made in a combo box. For example, if the user selects "2" from the combo box, then two addition ...

phpjavascripthtmlvalidation

What is the best way to access form data in React using a React.FormEvent<HTMLFormElement>?

I am looking for a way to retrieve the values entered in a <form> element when a user submits the form. I want to avoid using an onChange listener and storing the values in the state. Is there a different approach I can take? login.tsx ... interfa ...

javascriptreactjsformstypescript

JavaScript - Trouble encountered while trying to use splice to insert one array into another array

I've been working on creating a Cache Hashtable using JavaScript. When I use the code cache.splice(0,0, ...dataPage);, it inserts my data starting from the first position up to the length of dataPage. Assuming that my dataPage size is always 10. Th ...

javascriptarraystypescript

What is the method to create a polygon in its entirety by utilizing a for loop within Javascript?

After successfully using the Canvas of HTML to draw a convex polygon, I encountered an issue. In the provided code snippet, t2 represents an array of points with getX() and getY() methods. The drawing function performs as expected until it reaches the seg ...

javascripthtmlhtml5-canvas

AngularJS, the element being referenced by the directive is empty

Currently, I am in the process of transferring a jQuery plugin to AngularJS simply for the enjoyment of it. Previously, when working with jQuery, my focus was on manipulating the DOM using jQuery functions within the plugin loading function. Now that I am ...

javascriptjqueryhtmlangularjsdom