score:1
Have you tried loading the daily data? If you have a data point for every day over the past 45 years then it's just 16,000 points. Regardless, I would start by first making sure loading everything is too much for highcharts and if so, consider a dynamic aggregation script where zooming past a threshold, say 5 years, triggers the data set to the aggregate set per week.
This is my potential solution:
Load the chart with the full resolution data set, the per week aggregate set, and maybe per month set. You then set an event listener on the number of points on the current view. When it reaches a certain threshold, you redraw to aggregate.
You won't really lose the chance to see drastic events on a specific day since aggregating 7 days will still show a significant enough peak. The user can then zoom in and see the more detailed data. Forty five year's worth of daily data reduces down to a few thousand points.
score:4
So, you're saying that you have 35year of data on daily basis. For me it's < 13k of points. And then you have chart, for example 600px wide. That means you have 20points on 1pixel. And you saying that aggregation is bad, because user need to see true data. Let me ask, how user will see that points, when will have 20 of them in 1px? Maybe I'm getting old, but I won't be able to see that points really good, just some 'fat path'. Compare these examples: http://jsfiddle.net/Fusher/4ytzuv7o/1/
Just disabled dataGrouping in a second example:
dataGrouping: {
enabled: false
}
When you zoom-in in a first example, you will get true data anyway.
If you really can't use dataGrouping, then how about another solution? Disable navigator and 'All' button, to user will be able to zoom only at specified ranges, like this: 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
}
}]
});
Source: stackoverflow.com
Related Query
- Loading several large dataset in Highcharts
- Loading Highcharts via shim using RequireJS and maintaining jQuery dependency
- Loading Highcharts with require.js
- Automatically zooming in on highcharts after loading
- Highcharts How to Show Loading Animation At Set Data
- Improve highcharts performance for large amounts of data
- Highcharts loading animation after setdata
- Loading multiple Highcharts with jquery.load
- highcharts organization chart is throwing error when loading module
- Highcharts large data set clustering
- Loading Highcharts series from XML using jQuery
- Highcharts loading image
- 413 Request Entity Too Large HighCharts
- Highcharts Beta 3: Best Practice loading JSON data
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- Highcharts Server not loading infile correctly
- highcharts not loading in tabs
- Highcharts - Global configuration with common code and unique data & Headings
- Highcharts Y-Axis skipped labels when dealing with large array
- Highcharts async Server Loading with multiple series
- How to handle HighCharts zooming with large data sets
- Highcharts chart not loading after AJAX call to insert partial containing chart
- Loading large amount of data incrementally using ajax
- HighCharts Stock Chart error code 18
- Loading 'theme' and 'exporting' module with Highcharts using Requirejs
- highcharts change rendered image source on click
- Loading data from API into a highcharts vue component
- How do i add mouse wheel code in Angular2 highcharts in typescript
- how to display 2 same highcharts without duplicate the code
- Loading JSON data in Ruby on rails to use HIGHCHARTS
More Query from same tag
- Highcharts - show at least 5 horizontal grid lines, even when value doesn't change
- Highcharts - Add Series Name As X-Axis Label
- Error when using Highcharts with Angular 2
- Is there a way to increase the sensitivity of a specific point, in the purpose of showing a tooltip?
- Highcharts: how to bring pop-up boxes above the stock-tools menu?
- Highcharts: setSize on each Multiple chart
- How to move point's label and SVGs by moving a point graphic in highcharts gantt?
- How can I wrap long text labels in highchart nested groups
- Compare two data points inside the tooltip in a Highcharts combination chart
- Hightchart: Doing drilldown with columrange
- How to prevent cluttered date axis in Highcharts
- Highchart data series on wrong y-axis
- Save series chart type for later use
- Can't disconnect line chart with [null,null] and irregular intervals in Highcharts
- Highstocks chart show StartTime and endTime
- Highcharts get table from range selected only
- High charts / Stacked Bar - Legends Disable hover
- How to display navigator under area type highchart?
- Use Node.js as data source for highcharts
- column charts first date cut issue
- Fill graph area with a gradient in HighChart
- Highcharts parse CSV
- Dynamic xAxis Highcharts
- Highcharts Display Xaxis plot line
- tickInterval & categories. Only first category shows
- How to offset HighCharts data?
- How to Change Legend Text of a Chart Object in Crystal Reports 10
- R efficient Drilldown chart with loop using Highchart
- Firefox / IE formatting dates as 1970
- Ajax and Highcharts - Display 'loading' until data is retrieved, then populate chart