Chart.js custom charts

Question

Example graph depicting the desired outcome

I'm trying to create a chart with Chart.js which resembles the chart above...also if any other charting library makes this easier then please shout!

The chart needs to have:

• Coloured areas which highlight morning, afternoon & evening with custom a background image for the icon.
• A line graph which depics the number of calls made during each hour
• A legend of numbers at the bottom

I'm at a slight loss on how to do this natively by extending Chart.js so any help would be appreciated for custom chart examples or an idea of how to execute this.

var rangesStart = scale.calculateX(0);
var rangesEnd = scale.calculateX(23);
var gradient = this.chart.ctx.createLinearGradient(0, rangesStart, 0, rangesEnd);

ranges.forEach(function (range) {
  gradient.addColorStop((scale.calculateX(range.start) - rangesStart) / (rangesEnd - rangesStart), range.color);
  gradient.addColorStop((scale.calculateX(range.end) - rangesStart) / (rangesEnd - rangesStart), range.color);
})

I did attempt this here, but couldn't get the desired result, the colours seem to go horizontially instead of vertically.

http://jsfiddle.net/shxnhdfd/

Answer 1

Solved issues by using the beginPath() method

ctx.beginPath();

        ranges.forEach(function (range) {

          var numbersBetween = range.end - range.start

          ctx.fillStyle = range.color;
          ctx.fillRect(_this.datasets[0].points[range.start].x - 0 * unitX, yTop, unitX * numbersBetween, yHeight);
        })

        ctx.fill();

Working fiddle below:

http://jsfiddle.net/cvwporru/2/