Timeline Chart (Image Shown)

[ssbruce22]

Can Canvas be used to make something like what it shown below?

[Sunil Urs]

Yes, you can use Range Bar Charts with StripLine for the same.

—
Sunil Urs

[Cristi S.]

I have a hard time finding such a range bar chart example using dates for the intervals.

Could you point me to a working sample please?

Thanks,
Cristian

[Suyash Singh]

Cristian,

axisY doesn’t support datetime values as of now. However, you can workaround by converting dateTime to timestamp and formatting y-axis labels using labelFormatter. Please take a look at this JSFiddle for an example on creating timeline chart with the help of Range Bar chart.

___
Suyash Singh
Team CanvasJS

[Cristi S.]

Thanks, Suyash, but the activity chart may have multiple intervals for the same label, displayed on the same horizontal line.

I added another entry for “Walking” here.

Is there any way to get it displayed on the same line?

Thanks,
Cristian

[Suyash Singh]

Cristian,

You can display multiple intervals for same label by using x values in the dataPoints. Please have a look at this updated jsfiddle.

___
Suyash Singh
Team CanvasJS

[Cristi S.]

Yep, this is it :)
Thanks!

[vikkriko]

Hi,
Is it possible to make an outside legend for this type of chart?
Thanks.

[Thangaraj Raman]

@vikkriko,

You can set the showInLegend property to true to display a legend item for a particular dataseries.

—
Thangaraj Raman
Team CanvasJS