Menu
I am generating one image using High-Charts library but i have 40000 polygon series so it takes lot of time in plotting all those points.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function () {
var options = {
chart :{
type: 'polygon',
renderTo: 'container',
zoomType:'x'
},
title: {
text: ''
},
yAxis: {
title: false,
gridLineWidth:0,
lineWidth:0,
labels:{
enabled: false
}
},
xAxis: {
title: false,
gridLineWidth:0,
lineWidth:0,
labels:{
enabled: false
}
},
plotOptions: {
series: {
lineWidth: 1,
lineColor:'black',
}
},
series: []
};
$.getJSON('data.json', function(data) {
options.series=data;
var chart = new Highcharts.Chart(options);
})
$.getJSON('title.json', function(title) {
options.title.text=title;
var chart = new Highcharts.Chart(options);
})
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://highcharts.base.is/highcharts-downsample.js"></script>
<script src="http://highcharts.base.is/demo_data.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
sample data.json file
[{"showInLegend": false,"color": "#FFFFFF", "data": [[61448208.5, 10791], [61453100.5, 20575], [61451242.5, 24291], [61446350.5, 14507]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61453100.5, 20575], [61453544, 21462], [61451686, 25178], [61451242.5, 24291]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61453544, 21462], [61453681.5, 21737], [61451823.5, 25453], [61451686, 25178]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61453681.5, 21737], [61459631.5, 33637], [61457773.5, 37353], [61451823.5, 25453]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61459631.5, 33637], [61462023.5, 38421], [61460165.5, 42137], [61457773.5, 37353]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462023.5, 38421], [61462226, 38826], [61460368, 42542], [61460165.5, 42137]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462226, 38826], [61462340, 39054], [61460482, 42770], [61460368, 42542]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462340, 39054], [61462372.5, 39119], [61460514.5, 42835], [61460482, 42770]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462372.5, 39119], [61462429.5, 39233], [61460571.5, 42949], [61460514.5, 42835]] }
]
Is there any way to down sample multiple series to some 100's or create a mouse event on selection of area so that plot can regenerate plot based on coordinates and read chunk of json data within that range.
594
asked Jan 28 '26 14:01
If your data sets sizes are 50,000 points and beyond, you can consider using the Highcharts Boost module, released in the beginning of 2017 if memory serves. There are some great examples, like this Highcharts line chart with 600,000 data points across 600 series.
You just include the highcharts Boost module, either directly in a separate tag, or if using NPM just import the boost module from the highcharts package:
import boost from 'highcharts/modules/boost'
Then, you can add some boost options in your Highcharts options object, as an example:
{
boost: {
useGPUTranslations: true
},
title: {
text: 'Highcharts Boost'
},
series: [{
boostThreshold: 1, // Boost when there are more than 1
// point in the chart.
data: [[0, 1], [1, 2], [2, 3]],
}]
};
I've found that module to be of great help as I'm working with multiple series of > 100,000 data points each and multiple charts on one page.
54
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
