Render Jira Agile Burndown in chartist.js?

Question

Issue

I'm using json data from jira to render a project's burndown chart. For reasons I won't go into, I can't use the built-in Jira Agile charts. I'm using chartist.js to render the burndown but I'm running into troubles and would appreciate a chartist.js user's input.

I've attached an image of the chart I want to generate as a reference.

Problem

1. Burndown events happen more than once during the day. Each has its own time that it happened. I don't want to show the specific time each happened in the x axis label group. Is there a way to "group" the events for a given day on a specific day, but show that they didn't all happen at once?
2. I want to create a burndown "guideline" (see the grey line in the attached image). Is there an easy way to have a line start from the top and finish at the bottom for a given time?

Asides

I've been enjoying using chartist.js, but I'm not married to it for my project, I can use any chart library I want. I would gladly accept suggestions for another charting library that does what I need it to.

Answer 1

Although Chartist does not directly support a convenient API for creating time based charts (this will land very soon), we have added dynamic axis configuration which allows you to switch the standard X axis type (step based) to a more sophisticated scale axis.

As Dates will be converted to numbers and the math behind the scene is the same, you can very easily create time based charts with a bit of manual work. We have no tick generator based on time frames as of yet but again this will come with the TimeAxis that will be created very soon in Chartist.

To get more information on the custom axis configuration you can read the docs here: http://gionkunz.github.io/chartist-js/getting-started.html#switching-axis-type

To show you and others how easy it would be to implement a burndown chart I've created one for you with Chartist 0.9.1. I'm using moment.js to format the dates.

Here is the jsbin: http://jsbin.com/lokozu/edit?html,js,output

var chart = new Chartist.Line('.ct-chart', {
  series: [{
    name: 'remaining',
    data: [
      {x: new Date(143134652600), y: 53},
      {x: new Date(143334652600), y: 40},
      {x: new Date(143354652600), y: 45},
      {x: new Date(143356652600), y: 41},
      {x: new Date(143366652600), y: 40},
      {x: new Date(143368652600), y: 38},
      {x: new Date(143378652600), y: 34},
      {x: new Date(143568652600), y: 32},
      {x: new Date(143569652600), y: 18},
      {x: new Date(143579652600), y: 11}
    ]
  }, {
    name: 'stories',
    data: [
      {x: new Date(143134652600), y: 53},
      {x: new Date(143334652600), y: 30},
      {x: new Date(143384652600), y: 30},
      {x: new Date(143568652600), y: 10}
    ]
  }]
}, {
  axisX: {
    type: Chartist.FixedScaleAxis,
    divisor: 5,
    labelInterpolationFnc: function(value) {
      return moment(value).format('MMM D');
    }
  },
  axisY: {
    onlyInteger: true,
    low: 0
  },
  series: {
    remaining: {
      lineSmooth: Chartist.Interpolation.step(),
      showPoint: false
    },
    stories: {
      lineSmooth: false
    }
  }
});