js timeseries/waterfall graph within table

Question

I need to create a timeseries graph within a table. For example how the network tab in chrome dev tools is done (image below). They call it "waterfall". I saw few examples from d3 and highcharts, but they only supported a single column on y axis.

I'm trying to display a series of alerts. So need to show all alert details in different columns and for each row on the right hand side when the alert occurred/ended.

Recommendations on javascript libraries? is it possible with d3? How does chrome do it? Sorry if its a duplicate, i have really tried searching for something similar but don't know what exactly to search for.

EDIT: Clarification.

There is going to be only one point per category. But i need all the data in the category to be displayed as columns. From the added example below, the bold column headers need to be shown.

Example:

+----------+------------+------------+---------+--------+--------+------------------------------+
| alert_id | alert_name | alert_desc | etc.... | start  | end    | timeseries....               |
+----------+------------+------------+---------+--------+--------+------------------------------+
| a1       | name1      | desc1      | ...     | time1  | time2  |    |==|                      |
+----------+------------+------------+---------+--------+--------+------------------------------+
| a2       | name2      | desc2      | ....    | time11 | time22 |       |=====|                |
+----------+------------+------------+---------+--------+--------+------------------------------+
| a3       | name3      | desc3      | ....    | ..     | ...    |                   |========| |
+----------+------------+------------+---------+--------+--------+------------------------------+

wergeld wergeld · Accepted Answer · 2018-01-26T20:02:47

It is not really clear what you meant by "they only supported a single column on y axis" but, yes, you can have multiple points per category. I am using columnrange series. Take a look at the data format you need. You need to explicitly state what category index the data points are for:

series: [{
    name: 'Temperatures',
    data: [
        {x: 0, low: -9.7, high: 9.4},
        {x: 0, low: 20.7, high: 30.4},

        {x: 1, low: -9.7, high: -5.5},

        {x: 2, low: 1, high: 20},
        {x: 2, low: 50, high: 55},
    ]
}]

Minimal working example.

js timeseries/waterfall graph within table

1 Answers