Menu
I need to create a chart which is sort of like what Chrome Inspector shows you to visualize all page-related requests on a timeline. Input data is a simple tuple:
(start_timestamp, end_timestamp, task_name)
Task are independent, so I'm not interested it Gantt-like "Y-goes-after-X" visualization.
My approach right now would be to hack a stacked horizontal bar chart (first bar in a stack would be transparent, to give the effect of tasks starting later than T equal 0).
I'm just wondering if there's something already made for this kind of visualization.
Any sane language will do, really.
959
Gantt charts help teams to plan work around deadlines and properly allocate resources. Projects planners also use Gantt charts to maintain a bird's eye view of projects. They depict, among other things, the relationship between the start and end dates of tasks, milestones, and dependent tasks.
A JavaScript charting library with floating bar charts should be able to do what you want for flexible task timing. Some even have a UTC option so you could use that for your time stamp data, if that's how it is collected.
Here is a basic demo I made with ZingChart's JS chart library, with two tasks across 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'm on the ZingChart team. Other JS libs available, but I'd be happy to answer any questions about how this demo was put together.
194
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
