Menu
Is is possible to have a category scale on y-axis in Bubble chart? I am trying to create a bubble chart where on y-axis-> days of the week and x-axis-> time in "hh:mm a" format. (only because Chart.js allows timescale only on the x axis). Please suggest how I can change this question to be more helpful to more people.
<body><canvas id="bubble" width="400" height="400"></canvas></body>
<script>
$(function() {
Chart.defaults.global.defaultFontColor = '#fff'
var bubbleBackgroundColor = function() {
return 'rgba(255, 206, 86, 0.2)'
};
var bubbleBorderColor = function() {
return 'rgba(255, 206, 86, 1)'
};
var bubbleChartData = {
animation: {
duration: 10000
},
// Documentation says the tick values tick.min & tick.max must be in the Labels array. So thats what I have below
labels: ["Mon", "Tue", "wed", "Thu"],
datasets: [{
label: "Requests and bookings",
fill: false,
lineTension: 0.1,
backgroundColor: bubbleBackgroundColor(),
borderColor: bubbleBorderColor(),
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(153, 102, 155, 0.2)",
pointHoverBorderColor: "rgba(153, 102, 155, 1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
// how would the data change ...how can the numbers for y be replaced with strings
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}]
}]
};
var ctx = document.getElementById('bubble');
var bubble = new Chart(ctx, {
type: 'bubble',
data: bubbleChartData,
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'
}
}
}]
}
}
}
});
});
</script>
244
A coordinate grid has two perpendicular lines, or axes (pronounced AX-eez), labeled just like number lines. The horizontal axis is usually called the x-axis. The vertical axis is usually called the y-axis. The point where the x- and y-axis intersect is called the origin.
The scale of an axis is the units into which the axis is divided. The units are marked by ticks, labels, and grid lines. When you change an axis' scale, you change how the ticks, labels, and grid lines will display. The scale of a category axis is very simple: Each category is one unit.
The chart legend displays data about the datasets that are appearing on the chart.
This is possible in ChartJS, and will work with the given code once a couple issues are fixed:
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.
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.
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.
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"],
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.
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
