CODEWITHSUNDEEP
javascriptangulartypescriptchartsgoogle-visualization
Gerald Hughes
Gerald Hughes

Reputation: 6159

Google Charts Timeline: Coloring issues

Google Charts Timeline: Issue with coloring & bar labels

let result =    [
  [
    "operator NEPRECIZAT",
    "MICRO STOP",
    "2020-08-25T04:00:24.000Z",
    "2020-08-25T04:00:24.000Z"
  ],
  [
    "operator NEPRECIZAT",
    "STATUS NEPRECIZAT",
    "2020-08-25T04:00:24.000Z",
    "2020-08-25T04:15:24.000Z"
  ],
  [
    "operator NEPRECIZAT",
    "PRODUCTIE",
    "2020-08-25T04:15:24.000Z",
    "2020-08-25T04:17:50.000Z"
  ],
  [
    "operator NEPRECIZAT",
    "MICRO STOP",
    "2020-08-25T04:17:50.000Z",
    "2020-08-25T04:23:24.000Z"
  ],
  [
    "operator NEPRECIZAT",
    "PRODUCTIE",
    "2020-08-25T04:23:24.000Z",
    "2020-08-25T04:29:41.000Z"
  ],
  [
    "operator NEPRECIZAT",
    "MICRO STOP",
    "2020-08-25T04:29:41.000Z",
    "2020-08-25T04:37:24.000Z"
  ],
  [
    "operator NEPRECIZAT",
    "PRODUCTIE",
    "2020-08-25T04:37:24.000Z",
    "2020-08-25T04:44:52.000Z"
  ],
  [
    "operator NEPRECIZAT",
    "MICRO STOP",
    "2020-08-25T04:44:52.000Z",
    "2020-08-25T04:50:24.000Z"
  ],
  [
    "operator NEPRECIZAT",
    "PRODUCTIE",
    "2020-08-25T04:50:24.000Z",
    "2020-08-25T05:58:56.000Z"
  ],
  [
    "Ionut ALEXANDRU",
    "REUNIUNI / PAUZE / FORMARI",
    "2020-08-25T05:58:56.000Z",
    "2020-08-25T06:07:25.000Z"
  ],
  [
    "Ionut ALEXANDRU",
    "MICRO STOP",
    "2020-08-25T06:07:25.000Z",
    "2020-08-25T06:10:25.000Z"
  ],
  [
    "Ionut ALEXANDRU",
    "PRODUCTIE",
    "2020-08-25T06:10:25.000Z",
    "2020-08-25T07:58:22.000Z"
  ],
  [
    "Ionut ALEXANDRU",
    "REUNIUNI / PAUZE / FORMARI",
    "2020-08-25T07:58:22.000Z",
    "2020-08-25T08:18:27.000Z"
  ],
  [
    "Ionut ALEXANDRU",
    "MICRO STOP",
    "2020-08-25T08:18:27.000Z",
    "2020-08-25T08:20:27.000Z"
  ],
  [
    "Ionut ALEXANDRU",
    "PRODUCTIE",
    "2020-08-25T08:20:27.000Z",
    "2020-08-25T09:58:39.000Z"
  ],
  [
    "Ionut ALEXANDRU",
    "REUNIUNI / PAUZE / FORMARI",
    "2020-08-25T09:58:39.000Z",
    "2020-08-25T10:09:28.000Z"
  ],
  [
    "Ionut ALEXANDRU",
    "MICRO STOP",
    "2020-08-25T10:09:28.000Z",
    "2020-08-25T10:15:28.000Z"
  ],
  [
    "Ionut ALEXANDRU",
    "STATUS NEPRECIZAT",
    "2020-08-25T10:15:28.000Z",
    "2020-08-25T10:43:28.000Z"
  ],
  [
    "Ionut ALEXANDRU",
    "PRODUCTIE",
    "2020-08-25T10:43:28.000Z",
    "2020-08-25T11:21:54.000Z"
  ],
  [
    "Ionut ALEXANDRU",
    "MICRO STOP",
    "2020-08-25T11:21:54.000Z",
    "2020-08-25T11:28:29.000Z"
  ],
  [
    "Ionut ALEXANDRU",
    "STATUS NEPRECIZAT",
    "2020-08-25T11:28:29.000Z",
    "2020-08-25T11:46:29.000Z"
  ],
  [
    "Ionut ALEXANDRU",
    "PRODUCTIE",
    "2020-08-25T11:46:29.000Z",
    "2020-08-25T11:47:05.000Z"
  ],
  [
    "Ionut ALEXANDRU",
    "MICRO STOP",
    "2020-08-25T11:47:05.000Z",
    "2020-08-25T11:51:29.000Z"
  ],
  [
    "Ionut ALEXANDRU",
    "PRODUCTIE",
    "2020-08-25T11:51:29.000Z",
    "2020-08-25T11:54:45.000Z"
  ],
  [
    "Ionut ALEXANDRU",
    "MICRO STOP",
    "2020-08-25T11:54:45.000Z",
    "2020-08-25T11:59:29.000Z"
  ]
]


const { colorMap, colors } = this.getTimelineColorOptions(result);


this.timelineChart = {
    title: 'Timeline',
    type: ChartType.Timeline,
    data: [...result],
    columns: ['Name', 'Status', 'Start', 'End'],
    options: {
        animation: {
            duration: 250,
            easing: 'ease-in-out',
            startup: true
        },
        timeline: { 
            showBarLabels: false,
        },
        avoidOverlappingGridLines: true,
        colors: colors,
    }
};

private getTimelineColorOptions(result: any) {
        const colors = [];
        const colorMap = {
        'INTERVENTIE MATRITA/SDV': '#FFE25F',
        'INTERVENTIE UTILAJ': '#FFE25F',
        'SCHIMBARE MATRITA/SDV': '#FF99FF',
        'SCHIMBARE REPER': '#FF99FF',
        'SCHIMBARE TRASABILITATE': '#FF99FF',
        'OPRIRI TEHNOLOGICE, REGLAJE': '#FF99FF',
        'LIPSA UTILITATI (APA, AER, ELECTRICITATE)': '#FDB10F',
        'LIPSA AMBALAJE (CUTII, CONTAINERE, ETC)': '#FDB10F',
        'ASTEPTARE STIVUITOR, POD, MATRITA': '#FDB10F',
        'LIPSA PERSONAL': '#FDB10F',
        'ASTEPTARE MASURATORI 3D': '#FDB10F',
        'LIPSA COMENZI': '#FDB10F',
        'CONTROL CALITATE': '#FDB10F',
        'ASTEPTARE MATERIE PRIMA': '#FDB10F',
        'PROBE, MATERIALE, MATRITE, SDV': '#F34A4A',
        'ORGANIZARE POST DE LUCRU / 5S': '#F34A4A',
        'CURATENIE': '#F34A4A',
        'REUNIUNI / PAUZE / FORMARI': '#F34A4A',
        'MENTENTANTA PREVENTIVA, PREDICTIVA': '#F34A4A',
        'PRODUCTIE': '#94E011',
        'MICRO STOP': '#F7A4A4',
        'Demaraj not OK': '#F34A4A',
        'Lipsa conexiune': '#A8A3A3',
        'STOP': '#A8A3A3',
        'Utilaj neplanificat': '#F34A4A',
        'Defect mecanic': '#FF99FF',
        'Defect electric': '#FF99FF',
        'Operator mutat': '#F34A4A',
        'STATUS NEPRECIZAT': '#F7A4A4',
        'Start monitorizare': '#A8A3A3',
    };
        result.forEach((r: (string | number)[]) => {
            colors.push(colorMap[r[1]]);
        });
        return { colorMap, colors };
    }

colors in options:

0: "#F7A4A4"
1: "#F7A4A4"
2: "#94E011"
3: "#F7A4A4"
4: "#94E011"
5: "#F7A4A4"
6: "#94E011"
7: "#F7A4A4"
8: "#94E011"
9: "#F34A4A"
10: "#F7A4A4"
11: "#94E011"
12: "#F34A4A"
13: "#F7A4A4"
14: "#94E011"
15: "#F34A4A"
16: "#F7A4A4"
17: "#F7A4A4"
18: "#94E011"
19: "#F7A4A4"
20: "#F7A4A4"
21: "#94E011"
22: "#F7A4A4"
23: "#94E011"
24: "#F7A4A4"

colors rendered:

<rect x="156.5" y="9" width="3" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="159" y="9" width="45.4011132370847" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="204.4011132370847" y="9" width="7.527291702904847" height="22.991999999999997" stroke="none" stroke-width="0" fill="#94e011"/>
<rect x="211.92840493998955" y="9" width="17.219968690206997" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="229.14837363019655" y="9" width="19.416489824317296" height="22.991999999999997" stroke="none" stroke-width="0" fill="#94e011"/>
<rect x="250.56486345451384" y="9" width="21.891215863628474" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="272.4560793181423" y="9" width="23.09744303357104" height="22.991999999999997" stroke="none" stroke-width="0" fill="#94e011"/>
<rect x="295.55352235171335" y="9" width="17.116855105235686" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="312.67037745694904" y="9" width="212.00153070099145" height="22.991999999999997" stroke="none" stroke-width="0" fill="#94e011"/>
<rect x="524.6719081579406" y="49.992" width="26.24240737519574" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="550.9143155331362" y="49.992" width="9.280222647416963" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="560.1945381805531" y="49.992" width="333.93334492955296" height="22.991999999999997" stroke="none" stroke-width="0" fill="#94e011"/>
<rect x="894.1278831101062" y="49.992" width="62.12593494520786" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="956.253818055314" y="49.992" width="6.186815098277975" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="962.440633153592" y="49.992" width="303.772621325448" height="22.991999999999997" stroke="none" stroke-width="0" fill="#94e011"/>
<rect x="1266.21325447904" y="49.992" width="33.46035832318671" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="1299.6736128022264" y="49.992" width="18.560445294833926" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="1318.2340580970604" y="49.992" width="86.61541137589143" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="1404.8494694729518" y="49.992" width="118.88996347190823" height="22.991999999999997" stroke="none" stroke-width="0" fill="#94e011"/>
<rect x="1523.73943294486" y="49.992" width="20.364933031831697" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="1544.1043659766917" y="49.992" width="55.68133588450155" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="1599.213724125935" y="49.992" width="3" height="22.991999999999997" stroke="none" stroke-width="0" fill="#94e011"/>
<rect x="1601.6417463906766" y="49.992" width="13.610993216211455" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>
<rect x="1615.252739606888" y="49.992" width="10.105131327187337" height="22.991999999999997" stroke="none" stroke-width="0" fill="#94e011"/>
<rect x="1625.3578709340754" y="49.992" width="14.642129065924564" height="22.991999999999997" stroke="none" stroke-width="0" fill="#f7a4a4"/>

As you can see the color: #F34A4A is present in options, but is not rendered

This is how it looks like

google chart timeline

What could be the issue?

Upvotes: 1

Views: 64

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

as it turns out, the colors option for the timeline chart,
assigns each color in the colors array,
to each unique bar label.

in the example provided, there are only four unique bar labels (in the data used to draw the chart).
so there should only be four colors in the array.

to correct this issue,
you could modify getTimelineColorOptions to first build a unique list of bar labels,
then assign the colors for each...

private getTimelineColorOptions(result: any) {
  const colors = [];
  const colorMap = {
    'INTERVENTIE MATRITA/SDV': '#FFE25F',
    'INTERVENTIE UTILAJ': '#FFE25F',
    'SCHIMBARE MATRITA/SDV': '#FF99FF',
    'SCHIMBARE REPER': '#FF99FF',
    'SCHIMBARE TRASABILITATE': '#FF99FF',
    'OPRIRI TEHNOLOGICE, REGLAJE': '#FF99FF',
    'LIPSA UTILITATI (APA, AER, ELECTRICITATE)': '#FDB10F',
    'LIPSA AMBALAJE (CUTII, CONTAINERE, ETC)': '#FDB10F',
    'ASTEPTARE STIVUITOR, POD, MATRITA': '#FDB10F',
    'LIPSA PERSONAL': '#FDB10F',
    'ASTEPTARE MASURATORI 3D': '#FDB10F',
    'LIPSA COMENZI': '#FDB10F',
    'CONTROL CALITATE': '#FDB10F',
    'ASTEPTARE MATERIE PRIMA': '#FDB10F',
    'PROBE, MATERIALE, MATRITE, SDV': '#F34A4A',
    'ORGANIZARE POST DE LUCRU / 5S': '#F34A4A',
    'CURATENIE': '#F34A4A',
    'REUNIUNI / PAUZE / FORMARI': '#F34A4A',
    'MENTENTANTA PREVENTIVA, PREDICTIVA': '#F34A4A',
    'PRODUCTIE': '#94E011',
    'MICRO STOP': '#F7A4A4',
    'Demaraj not OK': '#F34A4A',
    'Lipsa conexiune': '#A8A3A3',
    'STOP': '#A8A3A3',
    'Utilaj neplanificat': '#F34A4A',
    'Defect mecanic': '#FF99FF',
    'Defect electric': '#FF99FF',
    'Operator mutat': '#F34A4A',
    'STATUS NEPRECIZAT': '#F7A4A4',
    'Start monitorizare': '#A8A3A3',
  };
  const barLabels = [];
  result.forEach(r => {
    if (barLabels.indexOf(r[1]) === -1) {
      barLabels.push(r[1]);
    }
  });
  barLabels.forEach(b => {
    colors.push(colorMap[b]);
  });
  return { colorMap, colors };
}

see following working snippet...

google.charts.load('current', {
  packages: ['timeline', 'controls']
}).then(function () {
  let result = [
    [
      "operator NEPRECIZAT",
      "MICRO STOP",
      "2020-08-25T04:00:24.000Z",
      "2020-08-25T04:00:24.000Z"
    ],
    [
      "operator NEPRECIZAT",
      "STATUS NEPRECIZAT",
      "2020-08-25T04:00:24.000Z",
      "2020-08-25T04:15:24.000Z"
    ],
    [
      "operator NEPRECIZAT",
      "PRODUCTIE",
      "2020-08-25T04:15:24.000Z",
      "2020-08-25T04:17:50.000Z"
    ],
    [
      "operator NEPRECIZAT",
      "MICRO STOP",
      "2020-08-25T04:17:50.000Z",
      "2020-08-25T04:23:24.000Z"
    ],
    [
      "operator NEPRECIZAT",
      "PRODUCTIE",
      "2020-08-25T04:23:24.000Z",
      "2020-08-25T04:29:41.000Z"
    ],
    [
      "operator NEPRECIZAT",
      "MICRO STOP",
      "2020-08-25T04:29:41.000Z",
      "2020-08-25T04:37:24.000Z"
    ],
    [
      "operator NEPRECIZAT",
      "PRODUCTIE",
      "2020-08-25T04:37:24.000Z",
      "2020-08-25T04:44:52.000Z"
    ],
    [
      "operator NEPRECIZAT",
      "MICRO STOP",
      "2020-08-25T04:44:52.000Z",
      "2020-08-25T04:50:24.000Z"
    ],
    [
      "operator NEPRECIZAT",
      "PRODUCTIE",
      "2020-08-25T04:50:24.000Z",
      "2020-08-25T05:58:56.000Z"
    ],
    [
      "Ionut ALEXANDRU",
      "REUNIUNI / PAUZE / FORMARI",
      "2020-08-25T05:58:56.000Z",
      "2020-08-25T06:07:25.000Z"
    ],
    [
      "Ionut ALEXANDRU",
      "MICRO STOP",
      "2020-08-25T06:07:25.000Z",
      "2020-08-25T06:10:25.000Z"
    ],
    [
      "Ionut ALEXANDRU",
      "PRODUCTIE",
      "2020-08-25T06:10:25.000Z",
      "2020-08-25T07:58:22.000Z"
    ],
    [
      "Ionut ALEXANDRU",
      "REUNIUNI / PAUZE / FORMARI",
      "2020-08-25T07:58:22.000Z",
      "2020-08-25T08:18:27.000Z"
    ],
    [
      "Ionut ALEXANDRU",
      "MICRO STOP",
      "2020-08-25T08:18:27.000Z",
      "2020-08-25T08:20:27.000Z"
    ],
    [
      "Ionut ALEXANDRU",
      "PRODUCTIE",
      "2020-08-25T08:20:27.000Z",
      "2020-08-25T09:58:39.000Z"
    ],
    [
      "Ionut ALEXANDRU",
      "REUNIUNI / PAUZE / FORMARI",
      "2020-08-25T09:58:39.000Z",
      "2020-08-25T10:09:28.000Z"
    ],
    [
      "Ionut ALEXANDRU",
      "MICRO STOP",
      "2020-08-25T10:09:28.000Z",
      "2020-08-25T10:15:28.000Z"
    ],
    [
      "Ionut ALEXANDRU",
      "STATUS NEPRECIZAT",
      "2020-08-25T10:15:28.000Z",
      "2020-08-25T10:43:28.000Z"
    ],
    [
      "Ionut ALEXANDRU",
      "PRODUCTIE",
      "2020-08-25T10:43:28.000Z",
      "2020-08-25T11:21:54.000Z"
    ],
    [
      "Ionut ALEXANDRU",
      "MICRO STOP",
      "2020-08-25T11:21:54.000Z",
      "2020-08-25T11:28:29.000Z"
    ],
    [
      "Ionut ALEXANDRU",
      "STATUS NEPRECIZAT",
      "2020-08-25T11:28:29.000Z",
      "2020-08-25T11:46:29.000Z"
    ],
    [
      "Ionut ALEXANDRU",
      "PRODUCTIE",
      "2020-08-25T11:46:29.000Z",
      "2020-08-25T11:47:05.000Z"
    ],
    [
      "Ionut ALEXANDRU",
      "MICRO STOP",
      "2020-08-25T11:47:05.000Z",
      "2020-08-25T11:51:29.000Z"
    ],
    [
      "Ionut ALEXANDRU",
      "PRODUCTIE",
      "2020-08-25T11:51:29.000Z",
      "2020-08-25T11:54:45.000Z"
    ],
    [
      "Ionut ALEXANDRU",
      "MICRO STOP",
      "2020-08-25T11:54:45.000Z",
      "2020-08-25T11:59:29.000Z"
    ]
  ]


  const colors = getTimelineColorOptions(result);

  const timelineChart = new google.visualization.ChartWrapper({
    chartType: 'Timeline',
    containerId: 'chart',
    dataTable: google.visualization.arrayToDataTable([['Name', 'Status', 'Start', 'End']].concat(result).map((row, index) => {
      if (index === 0) {
        return row;
      } else {
        return [
          row[0],
          row[1],
          new Date(row[2]),
          new Date(row[3])
        ];
      }
    })),
    options: {
      timeline: {
        showBarLabels: false
      },
      avoidOverlappingGridLines: true,
      colors: colors
    }
  });
  timelineChart.draw();

  function getTimelineColorOptions(result) {
    const colors = [];
    const colorMap = {
      'INTERVENTIE MATRITA/SDV': '#FFE25F',
      'INTERVENTIE UTILAJ': '#FFE25F',
      'SCHIMBARE MATRITA/SDV': '#FF99FF',
      'SCHIMBARE REPER': '#FF99FF',
      'SCHIMBARE TRASABILITATE': '#FF99FF',
      'OPRIRI TEHNOLOGICE, REGLAJE': '#FF99FF',
      'LIPSA UTILITATI (APA, AER, ELECTRICITATE)': '#FDB10F',
      'LIPSA AMBALAJE (CUTII, CONTAINERE, ETC)': '#FDB10F',
      'ASTEPTARE STIVUITOR, POD, MATRITA': '#FDB10F',
      'LIPSA PERSONAL': '#FDB10F',
      'ASTEPTARE MASURATORI 3D': '#FDB10F',
      'LIPSA COMENZI': '#FDB10F',
      'CONTROL CALITATE': '#FDB10F',
      'ASTEPTARE MATERIE PRIMA': '#FDB10F',
      'PROBE, MATERIALE, MATRITE, SDV': '#F34A4A',
      'ORGANIZARE POST DE LUCRU / 5S': '#F34A4A',
      'CURATENIE': '#F34A4A',
      'REUNIUNI / PAUZE / FORMARI': '#F34A4A',
      'MENTENTANTA PREVENTIVA, PREDICTIVA': '#F34A4A',
      'PRODUCTIE': '#94E011',
      'MICRO STOP': '#F7A4A4',
      'Demaraj not OK': '#F34A4A',
      'Lipsa conexiune': '#A8A3A3',
      'STOP': '#A8A3A3',
      'Utilaj neplanificat': '#F34A4A',
      'Defect mecanic': '#FF99FF',
      'Defect electric': '#FF99FF',
      'Operator mutat': '#F34A4A',
      'STATUS NEPRECIZAT': '#F7A4A4',
      'Start monitorizare': '#A8A3A3',
    };
    const barLabels = [];
    result.forEach(r => {
      if (barLabels.indexOf(r[1]) === -1) {
        barLabels.push(r[1]);
      }
    });
    barLabels.forEach(b => {
      colors.push(colorMap[b]);
    });
    return colors;
  }
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Upvotes: 1

Related Questions