2

I'm trying to figure out how to approach drawing this chart. It looks like a stacked horizontal bar chart, but I'm having troubles with defining a datasets format for duration intervals. I still haven't found the right way to structure the data source to achieve this result.

Another option could be a line/scatter chart. And the final one is writing custom plugin and drawing this on a canvas manually, shape by shape. I would like to avoid this though :)

Any idea would be really helpful. Thanks!

enter image description here

Oddomir
  • 81
  • 2
  • 10
  • 1
    Time to switch over https://www.amcharts.com/demos/gantt-chart/ – Aroon Oct 30 '18 at 11:42
  • 1
    Thanks for the advice @Aroon! [This one](https://www.amcharts.com/demos/gantt-chart-dates/) looks even better. Noted for the future reference. However, there are a several reasons why it has to be Chart.js at the moment. Please share if you have an idea or snippet that solves this, even partially would be great. – Oddomir Oct 30 '18 at 12:40
  • 2
    Possible duplicate of: https://stackoverflow.com/questions/41259441/how-to-draw-gantt-chart-using-chart-js-or-other-libraries – John Go-Soco Oct 30 '18 at 14:37
  • It's very good lead actually @JohnGo-Soco! I just learned that this chart is called Gantt's chart :) Thanks! – Oddomir Oct 31 '18 at 12:35
  • Some advice - you can use a 'line' chart and when you define the dataset config options, set the `spanGaps` to false. This way, you can use NaN values to get the gap between two non-contiguous sections of the data. – John Go-Soco Oct 31 '18 at 13:23
  • Yep, that's a valid approach. I decided to go with another format of the data array though (`[{ x:10, y: 20}, {x: 15, y: 10},...]`). With this approach each line is a separate dataset with two points defining a start date and the end date. – Oddomir Nov 01 '18 at 10:00

1 Answers1

0

I found the way to work this out with the help of @John Go-Soco. Some very key pieces of the graph config are bellow. In short, each line is a separate dataset with two data points defining a start date and the end date.

const yMap = [ 'amlodipine', 'simvastatin', 'lisinopril' ];

const mapDataPoint = function(xValue, yValue) {
                       return {
                          x: xValue,
                          y: yMap.indexOf(yValue)
                       };
                     };

const config = {
                type: 'line',
                data: {
                    datasets: [
                        {
                            //other dataset config options here
                            data: [
                                mapDataPoint('1/1/2007', 'simvastatin'),
                                mapDataPoint('6/1/2010', 'simvastatin'),
                            ]
                        },
                        {
                            //other dataset config options here
                            data: [
                                mapDataPoint('9/1/2010', 'simvastatin'),
                                mapDataPoint('11/1/2018', 'simvastatin'),
                            ]
                        },
                        {
                            //other dataset config options here
                            data: [
                                mapDataPoint('1/1/2007', 'lisinopril'),
                                mapDataPoint('9/1/2015', 'lisinopril'),
                            ]
                        },
                        {
                            //other dataset config options here
                            data: [
                                mapDataPoint('1/1/2014', 'amlodipine'),
                                mapDataPoint('11/1/2022', 'amlodipine'),
                            ]
                        },
                    ]
                },
                options: {
                    //other chart config options here
                    scales: {
                        xAxes: [
                            {
                                type: 'time',
                                time: {
                                    unit: 'year',
                                    round: 'day',
                                    displayFormats: {
                                        year: 'YYYY'
                                    },
                                    min: moment('2006', 'YYYY'),
                                    max: moment('2019', 'YYYY')
                                },

                            }
                        ],
                        yAxes: [
                            {
                                 ticks: {
                                    min: -1,
                                    max: yMap.length,
                                    //setting custom labels on the Y-axes
                                    callback: function(value) {
                                        return yMap[ value ];
                                    }
                                }
                            }
                        ]
                    }
                },

            };

const ctx = 'reference to your ctx here';

const chart = new Chart(ctx, config)
Oddomir
  • 81
  • 2
  • 10