Gantt chart using C3.js: How to use Axis Y Category or Y timeseries?

Asked

Viewed 1,682 times

1

I am looking for a solution within the javascript library C3.JS (Based on D3.JS) where I can create a graph that shows over a period the types of certain thing being used and intercalated.

A small example: Relevem o paint Well, I’ve tried using

var chart = c3.generate({
    ...
    , axis: {
        y: {
            type: 'category',
            categories: ['Tipo 1', 'Tipo 2', 'Tipo 3', 'Tipo 4']
        }
    }
});

That didn’t work, it seems to me the C3 only supports type: 'category' in the axis: { x: [...]

I also tried to invert and put Category on x, but it seems that y also does not support type: 'timeseries'.

var chart = c3.generate({
    data: {
        y: 'datas',
        [...]
    }
    [...]
    axis: {
        rotated: true,
        y: {
            type: 'timeseries'
        }
    }
});

Actually what I was able to do was this: Relevem as setas, meu inglês é péssimo

(I couldn’t put C3.js and D3.js in the tags)

javascript svg graphic d3.js

  • It’s a Gantt Chart.

  • Have you considered using any ready-made library, such as http://taitems.github.io/jQuery.Gantt/ http://www.jsgantt.com/ or http://dhtmlx.com/docs/products/dhtmlxGantt/ ?

  • I had not considered, but it seems to be a way out. I will try to stick to at least D3.JS. (http://bl.ocks.org/dk8996/5449641)

  • Perhaps there are others, these there I put were of the first listings here that I found in Google. Finding some good, you can put as Answer.

3 answers

1


var tasks = [
{"startDate":new Date("Sun Dec 09 01:36:45 EST 2012"),"endDate":new Date("Sun Dec 09 02:36:45 EST 2012"),"taskName":"E Job","status":"SUCCEEDED"},
{"startDate":new Date("Sun Dec 09 04:56:32 EST 2012"),"endDate":new Date("Sun Dec 09 06:35:47 EST 2012"),"taskName":"A Job","status":"FAILED"},
{"startDate":new Date("Sun Dec 09 06:29:53 EST 2012"),"endDate":new Date("Sun Dec 09 06:34:04 EST 2012"),"taskName":"D Job","status":"KILLED"},
{"startDate":new Date("Sun Dec 09 05:35:21 EST 2012"),"endDate":new Date("Sun Dec 09 06:21:22 EST 2012"),"taskName":"P Job","status":"RUNNING"},
{"startDate":new Date("Sun Dec 09 05:00:06 EST 2012"),"endDate":new Date("Sun Dec 09 05:05:07 EST 2012"),"taskName":"D Job","status":"KILLED"},
{"startDate":new Date("Sun Dec 09 03:46:59 EST 2012"),"endDate":new Date("Sun Dec 09 04:54:19 EST 2012"),"taskName":"P Job","status":"RUNNING"},
{"startDate":new Date("Sun Dec 09 03:27:35 EST 2012"),"endDate":new Date("Sun Dec 09 03:58:43 EST 2012"),"taskName":"E Job","status":"SUCCEEDED"},
{"startDate":new Date("Sun Dec 09 01:40:11 EST 2012"),"endDate":new Date("Sun Dec 09 03:26:35 EST 2012"),"taskName":"A Job","status":"FAILED"},
{"startDate":new Date("Sun Dec 09 03:00:03 EST 2012"),"endDate":new Date("Sun Dec 09 03:09:51 EST 2012"),"taskName":"D Job","status":"KILLED"},
{"startDate":new Date("Sun Dec 09 01:21:00 EST 2012"),"endDate":new Date("Sun Dec 09 02:51:42 EST 2012"),"taskName":"P Job","status":"RUNNING"},
{"startDate":new Date("Sun Dec 09 00:27:15 EST 2012"),"endDate":new Date("Sun Dec 09 00:54:56 EST 2012"),"taskName":"E Job","status":"SUCCEEDED"},
{"startDate":new Date("Sun Dec 09 00:29:48 EST 2012"),"endDate":new Date("Sun Dec 09 00:44:50 EST 2012"),"taskName":"D Job","status":"KILLED"},
{"startDate":new Date("Sun Dec 09 07:39:21 EST 2012"),"endDate":new Date("Sun Dec 09 07:43:22 EST 2012"),"taskName":"P Job","status":"RUNNING"},
{"startDate":new Date("Sun Dec 09 07:00:06 EST 2012"),"endDate":new Date("Sun Dec 09 07:05:07 EST 2012"),"taskName":"D Job","status":"KILLED"},
{"startDate":new Date("Sun Dec 09 08:46:59 EST 2012"),"endDate":new Date("Sun Dec 09 09:54:19 EST 2012"),"taskName":"P Job","status":"RUNNING"},
{"startDate":new Date("Sun Dec 09 08:27:35 EST 2012"),"endDate":new Date("Sun Dec 09 08:58:43 EST 2012"),"taskName":"E Job","status":"SUCCEEDED"},
{"startDate":new Date("Sun Dec 09 08:40:11 EST 2012"),"endDate":new Date("Sun Dec 09 08:46:35 EST 2012"),"taskName":"A Job","status":"FAILED"},
{"startDate":new Date("Sun Dec 09 08:00:03 EST 2012"),"endDate":new Date("Sun Dec 09 08:09:51 EST 2012"),"taskName":"D Job","status":"KILLED"},
{"startDate":new Date("Sun Dec 09 10:21:00 EST 2012"),"endDate":new Date("Sun Dec 09 10:51:42 EST 2012"),"taskName":"P Job","status":"RUNNING"},
{"startDate":new Date("Sun Dec 09 12:27:15 EST 2012"),"endDate":new Date("Sun Dec 09 12:54:56 EST 2012"),"taskName":"E Job","status":"SUCCEEDED"},
{"startDate":new Date("Sat Dec 08 23:12:24 EST 2012"),"endDate":new Date("Sun Dec 09 00:26:13 EST 2012"),"taskName":"A Job","status":"FAILED"}];

var taskStatus = {
    "SUCCEEDED" : "bar",
    "FAILED" : "bar-failed",
    "RUNNING" : "bar-running",
    "KILLED" : "bar-killed"
};

var taskNames = [ "D Job", "P Job", "E Job", "A Job"];

tasks.sort(function(a, b) {
    return a.endDate - b.endDate;
});
var maxDate = tasks[tasks.length - 1].endDate;
tasks.sort(function(a, b) {
    return a.startDate - b.startDate;
});
var minDate = tasks[0].startDate;

var format = "%H:%M";

var gantt = d3.gantt().taskTypes(taskNames).taskStatus(taskStatus).tickFormat(format);
gantt(tasks);
html,body,#wrapper {
	width: 100%;
	height: 100%;
	margin: 0px;
}
 
.chart {
	font-family: Arial, sans-serif;
	font-size: 12px;
}
 
.axis path,.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}
 
.bar {
	fill: #33b5e5;
}
 
.bar-failed {
	fill: #CC0000;
}
 
.bar-running {
	fill: #669900;
}
 
.bar-succeeded {
	fill: #33b5e5;
}
 
.bar-killed {
	fill: #ffbb33;
}
 
#forkme_banner {
	display: block;
	position: absolute;
	top: 0;
	right: 10px;
	z-index: 10;
	padding: 10px 50px 10px 10px;
	color: #fff;
	background:
		url('http://dk8996.github.io/Gantt-Chart/images/blacktocat.png')
		#0090ff no-repeat 95% 50%;
	font-weight: 700;
	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	text-decoration: none;
}
.tick text{
  color:#333;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://static.mentful.com/gantt-chart-d3v2.js"></script>
I used the library Gantt-Chart-D3.js along with the D3.js to build the chart. Codepen

0

  • 1

    I ended up using a php graphics class (Mahatma Gantti)... This javascript class "Gantt-Chart-D3.js" also doesn’t fit.

0

Browser other questions tagged javascript svg graphic d3.js

You are not signed in. Login or sign up in order to post.