manigandan
Posts: 189
Joined: Fri Jan 22, 2016 7:14 am

Loaded Gantt chart getting flickering on hover when I have more data

When I load a gantt chart in my application, I'm facing lots of issues, mentioning below as points

1. Charts is getting flickering when I hover on the chart even after the data is loaded (adding example image here).
Original Chart
img_2.png
img_2.png (121.02 KiB) Viewed 2621 times
When it is flickering (on mouse hover)
img_1.png
img_1.png (77.47 KiB) Viewed 2621 times
2. when I have the tool tip, I'm facing performance issues loading the tooltip also
3.If I remove the style: { pointerEvents: 'auto' } from tooltip it is loading much better performance,
4. I wanted a way to use pointerEventsL\ 'auto' without any performance issue

Attaching the fiddle url here with sample of my data I'm using

"I have tried with boost module" but I have read the documentation also, as per highcharts it is available only for arrays.
but in my use case I have to go with array of objects , Please suggest me a way to boost my chart with array of objects also (I'm adding the structure of my data)

Code: Select all

var chart = new Highcharts.Chart({
    chart: {
        renderTo: "container",
        type: "bar",
    },

    yAxis: [
        {
            labels: {},
            title: {
                text: "Time",
            },
            scrollbar: {
                enabled: false,
            },
            type: "datetime",
            dateTimeLabelFormats: {
                millisecond: "%H:%M:%S.%L",
                second: "%H:%M:%S",
                minute: "%H:%M",
                hour: "%H:%M",
                day: "%Y %b %e",
                week: "%b %e",
                month: "%b %Y",
                year: "%Y",
            },
            min: 1498934715000,
            max: 1498967840000,
            index: 0,
            events: {},
        },
    ],
    xAxis: [
        {
            labels: {},
            title: {
                text: null,
            },
            scrollbar: {
                enabled: true,
            },
            categories: [
                "Furnace1 Robot",
                "Furnace1 ReactorB",
                "Furnace1 ReactorB Cool",
                "Furnace1 ReactorA",
                "Furnace1 ReactorA Cool",
                "Furnace2 Robot",
                "Furnace2 ReactorB",
                "Furnace2 ReactorB Cool",
                "Furnace2 ReactorA",
                "Furnace2 ReactorA Cool",
                "Furnace3 Robot",
                "Furnace3 ReactorB",
                "Furnace3 ReactorB Cool",
                "Furnace3 ReactorA",
                "Furnace3 ReactorA Cool",
                "Furnace1_A Robot",
                "Furnace1_A ReactorB",
                "Furnace1_A ReactorB Cool",
                "Furnace1_A ReactorA",
                "Furnace1_A ReactorA Cool",
            ],
            index: 0,
            isX: true,
            min: 0,
            max: 11,
            events: {},
        },
    ],
    legend: {
        verticalAlign: "top",
        y: 100,
        layout: "vertical",
        align: "right",
    },

    scrollbar: {
        enabled: true,
        liveRedraw: false,
    },
    plotOptions: {
        series: {
            stacking: "normal",
        },
    },
      tooltip: {
                useHTML: true,
                padding: -8,
                style: {
                    // pointerEvents: 'auto'
                },
                followPointer: true,
                distance: 10
            },
    series: [
        {
            name: "Batch1023: LB_53",
            data: [
                {
                    x: 0,
                    low: 1498934715000,
                    high: 1498934720000,
                    toolTip: {
                        points: [
                            {
                                column: "BATCH",
                                value: "Batch1023",
                            },
                            {
                                column: "LotsInBatch",
                                value: "LB_53",
                            },
                            {
                                column: "Step",
                                value: "StepB_1",
                            },
                            {
                                column: "Type",
                                value: "Boat Load",
                            },
                            {
                                column: "Start",
                                value: "2017-07-01T18:45:15",
                            },
                            {
                                column: "End",
                                value: "2017-07-01T18:45:20",
                            },
                        ],
                        format: "BatchID: {BATCH}\nLot(s): {LotsInBatch}\nStep(s): {Step}\nType: {Type}\nStart: {Start}\nEnd: {End}",
                    },
                },
                {
                    x: 0,
                    low: 1498939640000,
                    high: 1498939655000,
                    toolTip: {
                        points: [
                            {
                                column: "BATCH",
                                value: "Batch1023",
                            },
                            {
                                column: "LotsInBatch",
                                value: "LB_53",
                            },
                            {
                                column: "Step",
                                value: "StepB_1",
                            },
                            {
                                column: "Type",
                                value: "Boat Unload",
                            },
                            {
                                column: "Start",
                                value: "7/1/2017 20:07:20",
                            },
                            {
                                column: "End",
                                value: "7/1/2017 20:07:35",
                            },
                        ],
                        format: "BatchID: {BATCH}\nLot(s): {LotsInBatch}\nStep(s): {Step}\nType: {Type}\nStart: {Start}\nEnd: {End}",
                    },
                },
                {
                    x: 1,
                    low: 1498934720000,
                    high: 1498938860000,
                    toolTip: {
                        points: [
                            {
                                column: "BATCH",
                                value: "Batch1023",
                            },
                            {
                                column: "LotsInBatch",
                                value: "LB_53",
                            },
                            {
                                column: "Step",
                                value: "StepB_1",
                            },
                            {
                                column: "Type",
                                value: "Process",
                            },
                            {
                                column: "Start",
                                value: "2017-07-01T18:45:20",
                            },
                            {
                                column: "End",
                                value: "2017-07-01T19:54:20",
                            },
                        ],
                        format: "BatchID: {BATCH}\nLot(s): {LotsInBatch}\nStep(s): {Step}\nType: {Type}\nStart: {Start}\nEnd: {End}",
                    },
                },
                {
                    x: 2,
                    low: 1498938860000,
                    high: 1498939640000,
                    toolTip: {
                        points: [
                            {
                                column: "BATCH",
                                value: "Batch1023",
                            },
                            {
                                column: "LotsInBatch",
                                value: "LB_53",
                            },
                            {
                                column: "Step",
                                value: "StepB_1",
                            },
                            {
                                column: "Type",
                                value: "Cool",
                            },
                            {
                                column: "Start",
                                value: "2017-07-01T19:54:20",
                            },
                            {
                                column: "End",
                                value: "2017-07-01T20:07:20",
                            },
                        ],
                        format: "BatchID: {BATCH}\nLot(s): {LotsInBatch}\nStep(s): {Step}\nType: {Type}\nStart: {Start}\nEnd: {End}",
                    },
                },
            ],
            apfRowIndex: [0, 1, 2, 3],
            _colorIndex: 0,
        },
        {
            name: "Batch103: LA_21",
            data: [
                {
                    x: 0,
                    low: 1498879260000,
                    high: 1498879265000,
                    toolTip: {
                        points: [
                            {
                                column: "BATCH",
                                value: "Batch103",
                            },
                            {
                                column: "LotsInBatch",
                                value: "LA_21",
                            },
                            {
                                column: "Step",
                                value: "StepA_1",
                            },
                            {
                                column: "Type",
                                value: "Boat Load",
                            },
                            {
                                column: "Start",
                                value: "2017-07-01T03:21",
                            },
                            {
                                column: "End",
                                value: "2017-07-01T03:21:05",
                            },
                        ],
                        format: "BatchID: {BATCH}\nLot(s): {LotsInBatch}\nStep(s): {Step}\nType: {Type}\nStart: {Start}\nEnd: {End}",
                    },
                },
                {
                    x: 0,
                    low: 1498883465000,
                    high: 1498883480000,
                    toolTip: {
                        points: [
                            {
                                column: "BATCH",
                                value: "Batch103",
                            },
                            {
                                column: "LotsInBatch",
                                value: "LA_21",
                            },
                            {
                                column: "Step",
                                value: "StepA_1",
                            },
                            {
                                column: "Type",
                                value: "Boat Unload",
                            },
                            {
                                column: "Start",
                                value: "2017-07-01T04:31:05",
                            },
                            {
                                column: "End",
                                value: "2017-07-01T04:31:20",
                            },
                        ],
                        format: "BatchID: {BATCH}\nLot(s): {LotsInBatch}\nStep(s): {Step}\nType: {Type}\nStart: {Start}\nEnd: {End}",
                    },
                },
                {
                    x: 3,
                    low: 1498879265000,
                    high: 1498881965000,
                    toolTip: {
                        points: [
                            {
                                column: "BATCH",
                                value: "Batch103",
                            },
                            {
                                column: "LotsInBatch",
                                value: "LA_21",
                            },
                            {
                                column: "Step",
                                value: "StepA_1",
                            },
                            {
                                column: "Type",
                                value: "Process",
                            },
                            {
                                column: "Start",
                                value: "2017-07-01T03:21:05",
                            },
                            {
                                column: "End",
                                value: "2017-07-01T04:06:05",
                            },
                        ],
                        format: "BatchID: {BATCH}\nLot(s): {LotsInBatch}\nStep(s): {Step}\nType: {Type}\nStart: {Start}\nEnd: {End}",
                    },
                },
                {
                    x: 4,
                    low: 1498881965000,
                    high: 1498883465000,
                    toolTip: {
                        points: [
                            {
                                column: "BATCH",
                                value: "Batch103",
                            },
                            {
                                column: "LotsInBatch",
                                value: "LA_21",
                            },
                            {
                                column: "Step",
                                value: "StepA_1",
                            },
                            {
                                column: "Type",
                                value: "Cool",
                            },
                            {
                                column: "Start",
                                value: "2017-07-01T04:06:05",
                            },
                            {
                                column: "End",
                                value: "2017-07-01T04:31:05",
                            },
                        ],
                        format: "BatchID: {BATCH}\nLot(s): {LotsInBatch}\nStep(s): {Step}\nType: {Type}\nStart: {Start}\nEnd: {End}",
                    },
                },
            ],
            apfRowIndex: [4, 5, 6, 7],
            _colorIndex: 1,
        },
    ],
});

Please suggest me some ideas to improve performance and this flickering issue with large data.


Adding JSFiddle URL , (here I'm not getting any flickering issue
https://jsfiddle.net/deepakpookkote/a1405px8/8/
Regards,
Manigandan
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Loaded Gantt chart getting flickering on hover when I have more data

Hi,
Thanks for contacting us with your question.

The boost module didn't work at Gantt it's not supported. Here is a ticket to add it to the service, you can vote for it.
https://highcharts.uservoice.com/forums ... antt-boost

I think for boosting you have the possibility to use series.gantt.turboThreshold but you need to modify your data at an array or two dimensional arrays like this:

Code: Select all

data = [[0,2],[1,34]
Generally It is difficult to prepare data in Gantt in this way.
https://api.highcharts.com/gantt/series ... oThreshold

Have you checked how the chart is rendered on other machines, is there a difference in performance?

Let me know if that was what you were looking for!
Best regards.
Sebastian Hajdus
Highcharts Developer
manigandan
Posts: 189
Joined: Fri Jan 22, 2016 7:14 am

Re: Loaded Gantt chart getting flickering on hover when I have more data

Hi @Sebastian,

Thanks for the reply and more information,

Code: Select all

var chart = new Highcharts.Chart({
    chart: {
        renderTo: "container",
        type: "bar",
    },

    yAxis: [
        {
            labels: {},
            title: {
                text: "Time",
            },
            scrollbar: {
                enabled: false,
            },
            type: "datetime",
            dateTimeLabelFormats: {
                millisecond: "%H:%M:%S.%L",
                second: "%H:%M:%S",
                minute: "%H:%M",
                hour: "%H:%M",
                day: "%Y %b %e",
                week: "%b %e",
                month: "%b %Y",
                year: "%Y",
            },
            min: 1498934715000,
            max: 1498967840000,
            index: 0,
            events: {},
        },
    ],
    xAxis: [
        {
            labels: {},
            title: {
                text: null,
            },
            scrollbar: {
                enabled: true,
            },
            categories: [
                "Furnace1 Robot",
                "Furnace1 ReactorB",
                "Furnace1 ReactorB Cool",
                "Furnace1 ReactorA",
                "Furnace1 ReactorA Cool",
                "Furnace2 Robot",
            ],
            index: 0,
            isX: true,
            min: 0,
            max: 11,
            events: {},
        },
    ],
    legend: {
        verticalAlign: "top",
        y: 100,
        layout: "vertical",
        align: "right",
    },

    scrollbar: {
        enabled: true,
        liveRedraw: false,
    },
    plotOptions: {
        series: {
            stacking: "normal",
        },
    },
      tooltip: {
                useHTML: true,
                padding: -8,
                style: {
                    // pointerEvents: 'auto'
                },
                followPointer: true,
                distance: 10
            },
    series: [
        {
            name: "Batch1023: LB_53",
            data: [
                {
                    x: 0,
                    low: 1498934715000,
                    high: 1498934720000,
                    toolTip: {
                        points: [
                            {
                                column: "BATCH",
                                value: "Batch1023",
                            },
                            {
                                column: "LotsInBatch",
                                value: "LB_53",
                            },
                            {
                                column: "Step",
                                value: "StepB_1",
                            },
                            {
                                column: "Type",
                                value: "Boat Load",
                            },
                            {
                                column: "Start",
                                value: "2017-07-01T18:45:15",
                            },
                            {
                                column: "End",
                                value: "2017-07-01T18:45:20",
                            },
                        ],
                        format: "BatchID: {BATCH}\nLot(s): {LotsInBatch}\nStep(s): {Step}\nType: {Type}\nStart: {Start}\nEnd: {End}",
                    },
                },

                },
            ],
            apfRowIndex: [4, 5, 6, 7],
            _colorIndex: 1,
        },
    ],
});

but as mentioned my data is array of objects, I cannot use arrays or 2D arrays, I need key and values, Please suggest me how can I do that
and sorry to inform you that i'm unable to access this link -https://api.highcharts.com/gantt/series ... 1604490112 , it is throwing some file error from highcharts
Regards,
Manigandan
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Loaded Gantt chart getting flickering on hover when I have more data

Hi,

The link works fine in my environment. Note from API:
When a series contains a data array that is longer than this, only one dimensional arrays of numbers, or two dimensional arrays with x and y values are allowed. Also, only the first point is tested, and the rest are assumed to be the same format. This saves expensive data checking and indexing in long series. Set it to 0 disable.

Note: In boost mode turbo threshold is forced. Only array of numbers or two dimensional arrays are allowed.

I think you could use data.seriesMapping but it is for data from CSV , do you have the possibility to build your source data in this way?
https://api.highcharts.com/gantt/data.seriesMapping

Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”