Geek Answers Handbook

Create a Gantt-like parallel bar graph to visualize thread synchronization in parallel

I need to create a chart that looks like what the Chrome Inspector shows you to visualize all the requests related to the page in the timeline. The input is a simple tuple:

(start_timestamp, end_timestamp, task_name)

The task is independent, so I'm not interested in Gantt visualization like "Y-go-after-X".

Now my approach will be to crack the horizontal histogram (the first line in the stack will be transparent so that the effect of tasks starts later T equal to 0).

I'm just wondering if something has already been done for this type of visualization.

Any sane language will be valid.

+6
source share
1 answer

A JavaScript bar chart library with floating histograms should be able to do what you want for a flexible time setting. Some even have the UTC option so you can use this for timestamp data, if that is how they are collected.

Here is a basic demo that I did with a ZingChart JS chart with two tasks for several months:

 var myConfig = { "type":"hbar", "title":{ "text":"Timing Visualization" }, "plot":{ }, "scale-x":{ "values":["task1","task2"] }, "scale-y":{ "values":["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct"], "item":{ "font-size":"6px" } }, "series":[ { "values":[10,1], "offset-values":[1,1], "text":"Microsoft", "background-color":"#2ABCF8" }, { "values":[7,3], "offset-values":[2,2], "text":"Oracle", "background-color":"#15A7E3" }, { "values":[6,10], "offset-values":[3,3], "text":"Dell", "background-color":"#0193CF" } ] }; zingchart.render({ id : 'myChart', data : myConfig, height: 400, width: 600 }); 
 <html> <head> <!--Assets will be injected here on compile. Use the assets button above--> <script src= 'https://cdn.zingchart.com/2.1.2/zingchart.min.js'></script> <script> zingchart.MODULESDIR = 'https://cdn.zingchart.com/2.1.2/modules/';</script> <!--Inject End--> </head> <body> <div id='myChart'></div> </body> </html>

Full disclosure, I am on the ZingChart team. Other JS libraries are available, but I would be happy to answer any questions about how this demo was compiled.

+7
source

More articles:


All Articles