CODEWITHSUNDEEP
highcharts
user4772933
user4772933

Reputation: 321

HeatMap or ColumnChart ideas for multi-category datetime data

I want to create a chart like the pic below enter image description here Each point has x, value, cat1, cat2

x-Axis to have DateTime data y-Axis can be Category cat1. I want cat2 as a sub category/ as an analogy it could be a highchart series

Please do not suggest to take cartesian product of cat1 cat2 and plot a single category because that crowds the chart and looses the functionality to select via cat2

Cat1 and cat2 are not related to each other. Just think of it as 2 enum tags to each data point.

Ex for a daily cars sold data, Cat1 = [Hatchback, Sedan...], Cat2 = [Yellow, Red, Green] etc..

This is a very trivial usecase and I find it hard to believe that highchart cannot let me do it. i am sure I am missing something. Any examples or help would be highly appreciated since i have tried several approaches already now and spent considerable amount of time

The idea is not to have a mixture of column series or heatmap series. i am ok with same type for all series, I personally would prefer a heatmap solution

Upvotes: 0

Views: 71

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You can create two separate heatmap charts, both of them with two rows of data:

Highcharts.chart('container', {
    ...,
    xAxis: {
        type: 'datetime',
        visible: false
    },
    series: [{
        type: 'heatmap',
        data: [
            [0, 0, 10],
            [1, 0, 19],
            [2, 0, 8],
            [3, 0, 24],
            [4, 0, 67],
            [0, 1, 92],
            [1, 1, 58],
            [2, 1, 78],
            [3, 1, 117],
            [4, 1, 48]
        ],
        ...
    }]
});

Highcharts.chart('container2', {...});

Live demo: https://jsfiddle.net/BlackLabel/jLbvw43z/

Docs: https://www.highcharts.com/docs/chart-and-series-types/heatmap

Upvotes: 0

Related Questions