Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Boost module does not render areaspline in canvas #8288

Closed
ghost opened this issue May 7, 2018 · 17 comments
Closed

Boost module does not render areaspline in canvas #8288

ghost opened this issue May 7, 2018 · 17 comments
Assignees
Labels
Type: Bug Type: Feature Request Used when a new feature is requested either directly or indirectly

Comments

@ghost
Copy link

ghost commented May 7, 2018

The boost module does not boost areaspline, although it is supporting it internally.

Example: https://jsfiddle.net/7ss4um2q/1/

@ghost ghost assigned TorsteinHonsi May 7, 2018
@ghost ghost added the Type: Bug label May 7, 2018
@bre1470 bre1470 self-assigned this Jun 11, 2018
@cvasseng cvasseng self-assigned this Sep 13, 2018
@Jaibharath
Copy link

Is this resolved. I am using the areaspline type with (zones, dash styles)

@Jaibharath
Copy link

Please let me know, as I need to show more then 1000 points in areaspline chart. rendering is too slow even after using the boost module. I tried checking with type 'line' with boost module, it worked, but it is not working for areasplin type.

@sebastianbochan
Copy link
Contributor

Hi @Jaibharath,
At this moment areasplines are still not supported, but could you simplify your demo and post here? It will allow me to verify if any workaround or different solution is possible (like dataGrouping, lazy loading etc).

@Jaibharath
Copy link

Ok, We are using angular 6 with highcharts, I conffigured the datagrouping with different zones for each point. Once the series of data is ready through the scripting then I configured the config options with type of chart, series and axis, zoom options, We are using the areaspline type relating which related to our design, It worked until like 300 - 400 xaxis label, Once the labels increasing, chart loading taking more memory. Then I tried using the Boost module which did not work. I tried with type 'line' boost module worked. But with line also once I zoomed in chart is not removing after I zoomed out.

@Jaibharath
Copy link

Also when trying with spline+boost module not working. with line+boost module. on reset zoom the chart is not hiding. Its showing the dense line chart and also the zoomed chart on reset zoom

@pawelfus
Copy link
Contributor

At this moment, spline-type is not supported (list of supported types is available in our docs: https://www.highcharts.com/docs/advanced-chart-features/boost-module ). If series on reset zoom does not hide, please recreate issue in jsFiddle (without angular). Thanks!

@Jaibharath
Copy link

Jaibharath commented Mar 25, 2019

Hi @pawelfus I dont have the jsfiddle, please replace js below code in below jsfiddel link(https://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/boost/line/)

function getData(n) {
var dataObj = {};
dataObj.arr = [];
dataObj.zones = [];
    
        var i;
        var a;
       	var b;
        var c;
        var color;
        var spike;
    for (i = 0; i < n; i = i + 1) {
        if (i % 100 === 0) {
            a = 2 * Math.random();
        }
        if (i % 1000 === 0) {
            b = 2 * Math.random();
        }
        if (i % 10000 === 0) {
            c = 2 * Math.random();
        }
        if (i % 50000 === 0) {
            spike = 10;
        } else {
            spike = 0;
        }
        if(spike > 10) {
        	color = 'yellow'
        } else if (spike < 10 && spike >= 8) {
        	color = 'orange';
        } else if (spike < 8 && spike >= 6) {
        	color = 'red';
        } else if (spike < 6 && spike >= 4) {
        	color = 'red';
        } else if (spike < 4 && spike >= 0) {
        	color = 'green';
        }
        
        dataObj.zones.push({
         color: color,
         value: i
        })
        
        dataObj.arr.push([
            i,
            2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
        ]);
    }
    return dataObj;
}
var n = 5000;
   var dataObj = getData(n);
   var data = dataObj.arr;
   var zones = dataObj.zones;


console.time('line');
Highcharts.chart('container', {

    chart: {
        zoomType: 'x',
        panning: true,
        panKey: 'shift'
    },

    boost: {
        useGPUTranslations: true
    },

    title: {
        text: 'Highcharts drawing ' + n + ' points'
    },

    subtitle: {
        text: 'Using the Boost module'
    },

    tooltip: {
        valueDecimals: 2
    },

    series: [{
        data: data,
        lineWidth: 0.5,
        zones: zones
    }]

});
console.timeEnd('line');

@Jaibharath
Copy link

After updating the js, Right now in code I kept 5000 points, and tried to zoom in and did reset zoom. I am getting graph as

image

@Jaibharath
Copy link

This is the intial screen after loading. when we zoom, I am able to see two charts as shown above,

image

@Jaibharath
Copy link

Also while using the boost, is there any way not to show the default blue color and give some zones.

@sebastianbochan
Copy link
Contributor

sebastianbochan commented Mar 26, 2019

@Jaibharath at this moment zones are not supported by the boost module due to performance reasons.

As a workaround you can create multiple series and declare a color.

@bre1470 bre1470 removed their assignment Mar 26, 2019
@pawelfus
Copy link
Contributor

pawelfus commented Mar 26, 2019

Note: Zones in boost issue is already reported: #9124

@Jaibharath
Copy link

Will this issue will be resolved, as its the same requirement I need to implement either with line chart or areaspline with zones in same chart without multiple series.

@KacperMadej
Copy link

@Jaibharath

The issue is open and labeled as a bug, so we will be working on resolving the problem. There's no ETA for the fix right now. As a workaround you could try to describe what's required and maybe multiple series is not that bad solution if it will be processed from a single series.

@cvasseng cvasseng added the Type: Feature Request Used when a new feature is requested either directly or indirectly label Mar 28, 2019
@cvasseng
Copy link
Contributor

As @pawelfus mentioned, spline types in general is not currently supported by the boost module. area or arearange is the closest match at this point.

I added zone support just now however, in f7afccd which is currently under review. Here's a demo of how it works: https://jsfiddle.net/o5vp02ab/

@stale
Copy link

stale bot commented Jun 9, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

@stale stale bot added the Status: Stale This issue hasn't had any activity for a while, and will be auto-closed if no further updates occur. label Jun 9, 2021
@KacperMadej
Copy link

As a feature request, it shouldn't be closed by the stale bot.

Recap: let boost module render areaspline.

Internal note:
area is rendered as lines in boost ("The area of area series is drawn as 1px columns"). There will be no difference between area and areaspline series types - this could be enabled without serious modifications in code.

@stale stale bot removed the Status: Stale This issue hasn't had any activity for a while, and will be auto-closed if no further updates occur. label Jun 11, 2021
@KacperMadej KacperMadej added this to To do in Development-Flow via automation Jun 11, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Type: Feature Request Used when a new feature is requested either directly or indirectly
Projects
Development

No branches or pull requests

8 participants