score:14
Accepted answer
i suggest you scatter chart. in scatter charts, you can draw multiple independent lines. as you can see from the below image.
[sample code]
var scatterchart = new chart(ctx1, {
type: 'line',
data: {
datasets: [
{
label: 'scatter dataset',
backgroundcolor: "rgba(246,156,85,1)",
bordercolor: "rgba(246,156,85,1)",
fill: false,
borderwidth : 15,
pointradius : 0,
data: [
{
x: 0,
y: 9
}, {
x: 3,
y: 9
}
]
},
{
backgroundcolor: "rgba(208,255,154,1)",
bordercolor: "rgba(208,255,154,1)",
fill: false,
borderwidth : 15,
pointradius : 0,
data: [
{
x: 3,
y: 7
}, {
x: 5,
y: 7
}
]
},
{
label: 'scatter dataset',
backgroundcolor: "rgba(246,156,85,1)",
bordercolor: "rgba(246,156,85,1)",
fill: false,
borderwidth : 15,
pointradius : 0,
data: [
{
x: 5,
y: 5
}, {
x: 10,
y: 5
}
]
},
{
backgroundcolor: "rgba(208,255,154,1)",
bordercolor: "rgba(208,255,154,1)",
fill: false,
borderwidth : 15,
pointradius : 0,
data: [
{
x: 10,
y: 3
}, {
x: 13,
y: 3
}
]
}
]
},
options: {
legend : {
display : false
},
scales: {
xaxes: [{
type: 'linear',
position: 'bottom',
ticks : {
beginatzero :true,
stepsize : 1
}
}],
yaxes : [{
scalelabel : {
display : false
},
ticks : {
beginatzero :true,
max : 10
}
}]
}
}
});
rest the configuration like colors or if you want to hide the y axes do it as your project required.
score:0
an easy solution to this is to use quickchart.io
the good support people at quickchart.io were kind enough to send me an example that includes dates on the x-axis unlike some of the answers above. you can access the example here.
if you would then like to embed a gantt chart into gmail email you would first need to send the html to a service such as htmlcsstoimage.com
score:0
i think it's easier with highcharts. check out their documentation.
it's really easy to use when it comes to project management charts.
here is a jsfiddle link to example usage.
var today = new date(),
day = 1000 * 60 * 60 * 24,
// utility functions
dateformat = highcharts.dateformat,
defined = highcharts.defined,
isobject = highcharts.isobject;
// set to 00:00:00:000 today
today.setutchours(0);
today.setutcminutes(0);
today.setutcseconds(0);
today.setutcmilliseconds(0);
today = today.gettime();
highcharts.ganttchart('container', {
series: [{
name: 'offices',
data: [{
name: 'new offices',
id: 'new_offices',
owner: 'peter'
}, {
name: 'prepare office building',
id: 'prepare_building',
parent: 'new_offices',
start: today - (2 * day),
end: today + (6 * day),
completed: {
amount: 0.2
},
owner: 'linda'
}, {
name: 'inspect building',
id: 'inspect_building',
dependency: 'prepare_building',
parent: 'new_offices',
start: today + 6 * day,
end: today + 8 * day,
owner: 'ivy'
}, {
name: 'passed inspection',
id: 'passed_inspection',
dependency: 'inspect_building',
parent: 'new_offices',
start: today + 9.5 * day,
milestone: true,
owner: 'peter'
}, {
name: 'relocate',
id: 'relocate',
dependency: 'passed_inspection',
parent: 'new_offices',
owner: 'josh'
}, {
name: 'relocate staff',
id: 'relocate_staff',
parent: 'relocate',
start: today + 10 * day,
end: today + 11 * day,
owner: 'mark'
}, {
name: 'relocate test facility',
dependency: 'relocate_staff',
parent: 'relocate',
start: today + 11 * day,
end: today + 13 * day,
owner: 'anne'
}, {
name: 'relocate cantina',
dependency: 'relocate_staff',
parent: 'relocate',
start: today + 11 * day,
end: today + 14 * day
}]
}, {
name: 'product',
data: [{
name: 'new product launch',
id: 'new_product',
owner: 'peter'
}, {
name: 'development',
id: 'development',
parent: 'new_product',
start: today - day,
end: today + (11 * day),
completed: {
amount: 0.6,
fill: '#e80'
},
owner: 'susan'
}, {
name: 'beta',
id: 'beta',
dependency: 'development',
parent: 'new_product',
start: today + 12.5 * day,
milestone: true,
owner: 'peter'
}, {
name: 'final development',
id: 'finalize',
dependency: 'beta',
parent: 'new_product',
start: today + 13 * day,
end: today + 17 * day
}, {
name: 'launch',
dependency: 'finalize',
parent: 'new_product',
start: today + 17.5 * day,
milestone: true,
owner: 'peter'
}]
}],
tooltip: {
pointformatter: function () {
var point = this,
format = '%e. %b',
options = point.options,
completed = options.completed,
amount = isobject(completed) ? completed.amount : completed,
status = ((amount || 0) * 100) + '%',
lines;
lines = [{
value: point.name,
style: 'font-weight: bold;'
}, {
title: 'start',
value: dateformat(format, point.start)
}, {
visible: !options.milestone,
title: 'end',
value: dateformat(format, point.end)
}, {
title: 'completed',
value: status
}, {
title: 'owner',
value: options.owner || 'unassigned'
}];
return lines.reduce(function (str, line) {
var s = '',
style = (
defined(line.style) ? line.style : 'font-size: 0.8em;'
);
if (line.visible !== false) {
s = (
'<span style="' + style + '">' +
(defined(line.title) ? line.title + ': ' : '') +
(defined(line.value) ? line.value : '') +
'</span><br/>'
);
}
return str + s;
}, '');
}
},
title: {
text: 'gantt project management'
},
xaxis: {
currentdateindicator: true,
min: today - 3 * day,
max: today + 18 * day
}
});#container {
max-width: 800px;
margin: 1em auto;
}
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>
<div id="container"></div>
score:1
you can try this library jquery.gantt. it is very useful and provide lots of options to draw gantt chart
score:10
edit this method would not work efficiently for more complicated cases where multiple bars need to be shown for a single y value.
i would go with a stacked horizontalbar chart of two datasets. the first dataset would be transparent and used to offset the second dataset which is your actual data. the code below prevents tooltip from appearing for the first dataset as well.
http://codepen.io/pursiankatze/pen/ombwvz?editors=1111
[sample code]
var baroptions_stacked = {
hover :{
animationduration:10
},
scales: {
xaxes: [{
label:"duration",
ticks: {
beginatzero:true,
fontfamily: "'open sans bold', sans-serif",
fontsize:11
},
scalelabel:{
display:false
},
gridlines: {
},
stacked: true
}],
yaxes: [{
gridlines: {
display:false,
color: "#fff",
zerolinecolor: "#fff",
zerolinewidth: 0
},
ticks: {
fontfamily: "'open sans bold', sans-serif",
fontsize:11
},
stacked: true
}]
},
legend:{
display:false
},
};
var ctx = document.getelementbyid("mychart");
var mychart = new chart(ctx, {
type: 'horizontalbar',
data: {
labels: ["1", "2", "3", "4"],
datasets: [{
data: [50,150, 300, 400, 500],
backgroundcolor: "rgba(63,103,126,0)",
hoverbackgroundcolor: "rgba(50,90,100,0)"
},{
data: [100, 100, 200, 200, 100],
backgroundcolor: ['red', 'green', 'blue', 'yellow'],
}]
},
options: baroptions_stacked,
});
// this part to make the tooltip only active on your real dataset
var originalgetelementatevent = mychart.getelementatevent;
mychart.getelementatevent = function (e) {
return originalgetelementatevent.apply(this, arguments).filter(function (e) {
return e._datasetindex === 1;
});
}.graph_container{
display:block;
width:600px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.1.3/chart.js"></script>
<html>
<body>
<div class="graph_container">
<canvas id="mychart"></canvas>
</div>
</body>
</html>
Source: stackoverflow.com
Related Query
- How to Draw Gantt chart using chart js or other libraries
- How to create a gantt chart using Chart.js and populate dates?
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- How to draw multiple color bar in a bar chart using chart.js
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- How to Draw a line on chart without a plot point using chart.js
- How to draw a chart like below using chart js
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- how to draw Line chart using chart.js and datalabels should be shown
- Gantt Chart Variation with Chart JS or other libraries
- How to run Chart.js samples using source code
- How to use canvasjs to draw column chart using text data
- How to pass Arrays from backing bean to JavaScript to draw a chart using Chart.js in an Ajax call
- How to add text inside the doughnut chart using Chart.js?
- How to add an on click event to my Line chart using Chart.js
- How to save Chart JS charts as image without black background using blobs and filesaver?
- How can I draw dotted line using chartjs?
- How to add text in centre of the doughnut chart using Chart.js?
- How to create stacked bar chart using react-chartjs-2?
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- How to access labels array using chart plugin (Chart.pluginService.register) in Chartjs 2.x?
- How to display the labels in doughnut chart using ng2 charts?
- How to create single value Doughnut or Pie chart using Chart.js?
- How to draw Horizontal line on Bar Chart Chartjs
- How to make a chart scroll horizontally (when using Chart.js)
- How to draw a needle on a custom donut chart and add datapoints to the needle?
- How to show percentage (%) using chartjs-plugin-labels ( Pie chart ) in angular 2/8
- How to draw a chart with Chart.JS?
- Using chart js version 3, how to add custom data to external tooltip?
- How to draw horizontal Lines using chart.js 3.x ? Cannot get it working
More Query from same tag
- Chartjs - Add backgroundColor for labels radar chart
- Problem in passing values using props in react.js while using chart.js
- Angular Chart.js does not show trendline
- How to remove the extra Y axis from a bar chart in chart.js
- Chart.js - Same min and max value of two charts
- ChartJS BoxWidth not working
- Is there a way to make a view run without having to show the view in the browser in laravel?
- Chart.js showing x-axis ticks even though set to false
- Display Chart.js chart in Node.js
- Convert a JSON file to an array in javascript to visualize the data in ChartsJS
- Convert two lists into a dictionary of X and Y Format
- Moving the zerolines in ChartJS scatter chart
- "Does not provide an export named 'Tooltip'," even though I can output Tooltip
- Can you change legend style for bar datasets with chart.js?
- Is there a max width of canvas Chart.js can draw charts within?
- Vue.js access variable from method
- Chart.js Change color of the values *inside* the bars of a Bar chart
- Chartjs display bug when pushing data to graph
- Chart JS: Old chart data not clearing
- Vertical line using Chart.js annotations plugin with linear scale on x axis
- Unable to parse color in line chart (angular-chart.js)
- JavaScript doughnut chart with centered hover label
- Combine multiple columns values to one label in chart.js
- React Native Chart not showing data
- How to create a scatter plot where x-axis represents a day by hours with datetime object? chartJS
- Laravel 5.1 format date array for chart.js data
- Time format on the x axis in Chart.js
- Custom data position on the doughnut chart in chart.js
- Creating a diagonal shaded area in chart.js
- ChartJS legend background color while using point styles