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 When it is flickering (on mouse hover) 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,
},
],
});
Adding JSFiddle URL , (here I'm not getting any flickering issue
https://jsfiddle.net/deepakpookkote/a1405px8/8/