[Solved]-Category scale on Y-axis and time on x-axis in bubble chart in Chartjs-Chart.js

Please try data:

[ {x: '2016-05-11 12:00:00', y: 'Mon', r: 15}, {x: '2016-05-11 20:00:00', y: 'Sat', r: 20}, {x: '2016-05-11 05:00:00', y: 'Wed', r: 5} ]

Instead of data:

[{x: 2,y: 0,r: 15},{x: 3,y: 1,r: 19}, {x: 5,y: 2,r: 15}, {x: 4, y: 3,r: 18}]

This is possible in ChartJS, and will work with the given code once a couple issues are fixed:

1. The options config, containing the scales, is within another options object. This means the options in this second layer will not take effect.

Changing this

options: {
  responsive: true,
  title: {
    display: true,
    text:'Weekly activity'
  },
  options: {
    scales: {
      yAxes: [{
          // will this create y-axis with days of week?
          type: 'Category',
          position: 'bottom',
          ticks: {
            ticks.min: "Mon",
            ticks.max: "Thu"
          }
      }],
      xAxes: [{
          type: 'time',
          time: {
              displayFormats: {
                  minute: 'hh:mm a'
              }
          }
      }]
    }
  }
}

to this (by removing the excess options block)

options: {
  responsive: true,
  title: {
  display: true,
  text:'Weekly activity'
  },
  scales: {
    yAxes: [{
        // will this create y-axis with days of week?
        type: 'Category',
        position: 'bottom',
        ticks: {
          ticks.min: "Mon",
          ticks.max: "Thu"
        }
    }],
    xAxes: [{
        type: 'time',
        time: {
            displayFormats: {
                minute: 'hh:mm a'
            }
        }
    }]
  }
}

remedies this issue.

2. The scale type of the x-axis is Category, which is not a recognized ChartJS scale type only because of the capital letter. Renaming the type to its lowercase partner, category, allows it to be recognized by ChartJS.

3. The tick options are set incorrectly, and are also invalid property names, which stops ChartJS from functioning.

Documentation says the tick values tick.min & tick.max must be in the Labels array.

As of now, ticks.min and ticks.max are optional for category scales. However, if you would like to continue to use ticks.min and ticks.max, you could do this:

Change

ticks: {
  ticks.min: "Mon",
  ticks.max: "Thu"
}

to

ticks: {
  min: "Mon",
  max: "Thu"
}

Although it was not as clear as it could have been in the official documentation, this is what is meant when the options ticks.min and ticks.max are specified - instead of having the previous ticks.ticks.min, we can now access our settings at ticks.min.

4. The labels set for the category axis currently affect all axes instead of only the y (category) axis. We can fix this by setting yLabels instead of labels, as shown in the documentation.

Change

labels: ["Mon", "Tue", "wed", "Thu"],

to

yLabels: ["Mon", "Tue", "wed", "Thu"],

5. Having both the x and y axes on the bottom produces a garbled chart. This can be remedied by moving the y-axis back to the left.

Change

type: 'category',
position: 'bottom',
ticks: {

to

type: 'category',
position: 'left',
ticks: {

It now looks something like this:

We now have a working bubble chart! The y-axis shows days of the week, and the x-axis shows a time value formatted in 'hh:mm a'. Here is the sample completed codepen: http://codepen.io/albinodrought/pen/VmNwoj

In response to the reasoning for this way of graphing,

(only because Chart.js allows timescale only on the x axis)

There also seems to be workarounds for plotting timescale values on the y-axis: ChartJS issue #2791

Mainly, setting the y-value of your datapoints to a time-formattable value (epoch), and then changing the callback of your y-axis to format those values. See the ChartJS docs for setting tick callbacks.