score:0
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}]
score:2
this is possible in chartjs, and will work with the given code once a couple issues are fixed:
- 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.
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
.
- the labels set for the
category
axis currently affect all axes instead of only the y (category) axis. we can fix this by settingylabels
instead oflabels
, as shown in the documentation.
change
labels: ["mon", "tue", "wed", "thu"],
to
ylabels: ["mon", "tue", "wed", "thu"],
- 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.
Source: stackoverflow.com
Related Query
- Category scale on Y-axis and time on x-axis in bubble chart in Chartjs
- chart js - bar chart with time scale on Y axis in Hours and Minutes
- Chart.js bar chart with time on X axis and category on Y axis is not rendered
- ChartJs line chart time cartesian axis number of ticks and wierd offset
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- chartjs time cartesian axis adapter and date library setup
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Display Time In Y Axis - Bubble Chart
- How to set a time scale to a ChartJS chart from JSON?
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- Google Charts, HighCharts or ChartJS Dual Axis Gantt Chart and Line Chart Visualization
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- ChartJS Tooltips with time axis and multiple datasets
- ChartJS Bar chart with time scale - Bars overlap with each other
- ChartJs - width scale of chart area and label area
- Creating a real time line chart using chartjs and firebase realtime db
- In Chart.js set chart title, name of x axis and y axis?
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- How to prevent first/last bars from being cut off in a chart with time scale
- chartjs : how to set custom scale in bar chart
- chartjs datalabels change font and color of text displaying inside pie chart
- show label in tooltip but not in x axis for chartjs line chart
- Chart JS - set start of week for x axis time series
- time series stream, removing am/pm on x axis and 24 hour format
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Chart.js Dynamically Updating Chart with X Axis Time
- chartjs - top and bottom padding of a chart area
- Chartjs 2: Multi level/hierarchical category axis in chartjs
- How to hide the y axis and x axis line and label in my bar chart for chart.js
More Query from same tag
- ChartJS - Adding legend title into tooltip title
- Chart.js plugin annotation line shadow
- Modify the x-axis label in chart js
- How to add tooltip for the inner doughnut
- Chart.js chart not displaying until I open the browser's console
- Change style of hover and tooltip in chartjs or ng2-charts
- How does one add data to a Chart in an ajax call?
- how to put "%" in chart pie (chartjs)
- (Chart.js) Is there a way to compare one chart with another so as not to have this inconsistent effect of small values being as big as big values?
- How to align multiple pie charts side by side?
- Issues getting JSON string for chart.js data
- Polar Area in Chart JS Rotates When Adding Labels
- Can you add an action to an element within the tooltip in chart.js?
- chart.js display even intervals between two dates and adding label to y axes
- Vue chartjs is not rendering from API
- React-Chart.js legend onClick function
- ng-chart.js - First data set always has color gray
- How do I loop under Chart js in JavaScript for multiple axis?
- how can i remove the grid lines in chartJs
- How to assign specific colors to data items in a doughnut chart in Angular Chart?
- is it possible to sum up the properties of an array of objects and to filter it according to another property?
- Error with Chart.js : TypeError: t is undefined
- How can i add min and max range horizontal line in angular-chart.js
- Chart.js Bar Chart with a switch/radio button to group data / Troubleshooting bar color
- Chart.js can't push dataset to charts made dynamically
- Chart.js is only displaying after f12 is pressed
- Chart.js How to sum the values in a pie chart and display them in the header
- How to subscribe to elements in a response object
- Chart.js - Plot line graph with X , Y coordinates and connected by line
- chartjs output data in month week and day