OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Series inside navigator not displaying with larger data set

  • Thread starter Thread starter Gopal Singh
  • Start date Start date
G

Gopal Singh

Guest
I'm facing an issue with the Highchart navigator. The series inside the navigator displays correctly with smaller datasets, such as 4-5k data points. However, with a very large dataset of 153,000 data points, the series appears blurred and then disappears when zooming in or out.

Here's a sample demonstrating the problem:

https://jsfiddle.net/gopalsingh0707/qm0sfrpx/5/

Code:
Highcharts.chart('container', 
  
  { "chart" : { events: { render() { let chart = this; if (chart.customImg) { chart.customImg.destroy(); } chart.customImg =  chart.renderer.image("../javax.faces.resource/images/volume.png.xhtml?ln=roma-layout", chart.plotWidth + chart.plotLeft-54, 12, 25, 20).on("click", function() { generateWaveAudio(); }).attr({ zIndex: 100  }).css({ cursor: "pointer" }).add(); } }, "zoomType" : "x" , "height": 242},  "boost" : { useGPUTranslations: true }, "series" : [ { showInNavigator: true, boostThreshold: 5000, lineWidth: 1, states: { hover: { lineWidth: 1 }  }, "data" :[[0, 40.30661], [2.1E-7, -146.0206], [4.2E-7, 43.828434], [6.2E-7, 43.828434], [8.3E-7, 43.828434], [0.00000104, 40.30661], [0.00000125, 43.828434], [0.00000146, 43.828434], [0.00000167, -146.0206], [0.00000187, -146.0206], [0.00000208, -146.0206], [0.00000229, 40.30661], [0.0000025, -146.0206], [0.00000271, -146.0206], [0.00000292, 34.286007], [0.00000312, -146.0206], [0.00000333, 49.849033], [0.00000354, 40.30661], [0.00000375, -146.0206], [0.00000396, -146.0206], [0.00000417, 43.828434], [0.00000438, 53.370857], [0.00000458, -146.0206], [0.00000479, 40.30661], [0.000005, -146.0206], [0.00000521, -146.0206], [0.00000542, -146.0206], [0.00000563, -146.0206], [0.00000583, 34.286007], [0.00000604, 34.286007], [0.00000625, 40.30661], [0.00000646, -146.0206], [0.00000667, -146.0206], [0.00000688, 49.849033] ... [0.02730583, 40.30661], [0.02730604, 34.286007], [0.02730625, 34.286007], [0.02730646, 34.286007]], color: "#003399", "name" : " " } ], "title" : { "text" : "Thu, Oct 26, 2023, 15:32:36" },plotOptions: { series: { showInNavigator: true, point: { events: { select: function () { var text = 'Ampl: ' + Highcharts.numberFormat(this.y, 4) + '</br>' + 'Time: ' + Highcharts.numberFormat(this.x, 4); var chart = this.series.chart; if (!chart.lbl) { chart.lbl = chart.renderer.label(text, 75, 7).attr({ padding: 10,r: 5,zIndex: 0 }).css({color: 'red'}).add();} else {chart.lbl.attr({text: text}); } } , click: function (event) { this.select(!this.selected, false); } } }, marker: { enabled: true, radius: 0.1, states: { select: { fillColor: 'red', lineWidth: 0, radius: 4  }, hover: { fillColor: '#4da6ff', lineWidth: 1, radius: 6 } } } } }, "legend" : { "enabled" : false },"yAxis" : [ { "title" : { "text" : " dB SPL " }  } ],"xAxis": [{ min:0, "title": { "text": " min " }, "type": "none"   } ],tooltip: { formatter: function(){ return 'Ampl: ' + Highcharts.numberFormat(this.y, 4) + '</br>' + 'Time: ' + Highcharts.numberFormat(this.x, 4) }, positioner: function() { return { x: this.chart.plotSizeX-120, y: this.chart.plotTop-45 }; }, shared: true, shadow: false, borderWidth: 0, backgroundColor: "rgba(255,255,255,0.8)" }  ,navigator: { margin:10, enabled: true, series: {  dataGrouping: { enabled: false } } ,xAxis: { type: 'linear', labels: { formatter: function() { return Highcharts.numberFormat(this.value, 2); } } } }, scrollbar: { enabled: true }}

Any help with resolving this issue would be greatly appreciated.

<p>I'm facing an issue with the Highchart navigator. The series inside the navigator displays correctly with smaller datasets, such as 4-5k data points. However, with a very large dataset of 153,000 data points, the series appears blurred and then disappears when zooming in or out.</p>
<p>Here's a sample demonstrating the problem:</p>
<p><a href="https://jsfiddle.net/gopalsingh0707/qm0sfrpx/5/" rel="nofollow noreferrer">https://jsfiddle.net/gopalsingh0707/qm0sfrpx/5/</a></p>
<pre><code>Highcharts.chart('container',

{ "chart" : { events: { render() { let chart = this; if (chart.customImg) { chart.customImg.destroy(); } chart.customImg = chart.renderer.image("../javax.faces.resource/images/volume.png.xhtml?ln=roma-layout", chart.plotWidth + chart.plotLeft-54, 12, 25, 20).on("click", function() { generateWaveAudio(); }).attr({ zIndex: 100 }).css({ cursor: "pointer" }).add(); } }, "zoomType" : "x" , "height": 242}, "boost" : { useGPUTranslations: true }, "series" : [ { showInNavigator: true, boostThreshold: 5000, lineWidth: 1, states: { hover: { lineWidth: 1 } }, "data" :[[0, 40.30661], [2.1E-7, -146.0206], [4.2E-7, 43.828434], [6.2E-7, 43.828434], [8.3E-7, 43.828434], [0.00000104, 40.30661], [0.00000125, 43.828434], [0.00000146, 43.828434], [0.00000167, -146.0206], [0.00000187, -146.0206], [0.00000208, -146.0206], [0.00000229, 40.30661], [0.0000025, -146.0206], [0.00000271, -146.0206], [0.00000292, 34.286007], [0.00000312, -146.0206], [0.00000333, 49.849033], [0.00000354, 40.30661], [0.00000375, -146.0206], [0.00000396, -146.0206], [0.00000417, 43.828434], [0.00000438, 53.370857], [0.00000458, -146.0206], [0.00000479, 40.30661], [0.000005, -146.0206], [0.00000521, -146.0206], [0.00000542, -146.0206], [0.00000563, -146.0206], [0.00000583, 34.286007], [0.00000604, 34.286007], [0.00000625, 40.30661], [0.00000646, -146.0206], [0.00000667, -146.0206], [0.00000688, 49.849033] ... [0.02730583, 40.30661], [0.02730604, 34.286007], [0.02730625, 34.286007], [0.02730646, 34.286007]], color: "#003399", "name" : " " } ], "title" : { "text" : "Thu, Oct 26, 2023, 15:32:36" },plotOptions: { series: { showInNavigator: true, point: { events: { select: function () { var text = 'Ampl: ' + Highcharts.numberFormat(this.y, 4) + '</br>' + 'Time: ' + Highcharts.numberFormat(this.x, 4); var chart = this.series.chart; if (!chart.lbl) { chart.lbl = chart.renderer.label(text, 75, 7).attr({ padding: 10,r: 5,zIndex: 0 }).css({color: 'red'}).add();} else {chart.lbl.attr({text: text}); } } , click: function (event) { this.select(!this.selected, false); } } }, marker: { enabled: true, radius: 0.1, states: { select: { fillColor: 'red', lineWidth: 0, radius: 4 }, hover: { fillColor: '#4da6ff', lineWidth: 1, radius: 6 } } } } }, "legend" : { "enabled" : false },"yAxis" : [ { "title" : { "text" : " dB SPL " } } ],"xAxis": [{ min:0, "title": { "text": " min " }, "type": "none" } ],tooltip: { formatter: function(){ return 'Ampl: ' + Highcharts.numberFormat(this.y, 4) + '</br>' + 'Time: ' + Highcharts.numberFormat(this.x, 4) }, positioner: function() { return { x: this.chart.plotSizeX-120, y: this.chart.plotTop-45 }; }, shared: true, shadow: false, borderWidth: 0, backgroundColor: "rgba(255,255,255,0.8)" } ,navigator: { margin:10, enabled: true, series: { dataGrouping: { enabled: false } } ,xAxis: { type: 'linear', labels: { formatter: function() { return Highcharts.numberFormat(this.value, 2); } } } }, scrollbar: { enabled: true }}
</code></pre>
<p>Any help with resolving this issue would be greatly appreciated.</p>
 

Latest posts

Top