score:0
another solution that worked great for me, was to just use the line
type for the chart, configure it for using dates for the x axis, and addtionally disable the lines, so that it just looks like a scatterplot.
new chart(ctx, {
type: 'line',
data: {
datasets: [{
x: 2017-07-08t06:15:02-0600,
y: 23.375
},{
x: 2017-07-08t06:20:02-0600,
y: 23.312
},{
x: 2017-07-08t06:25:02-0600,
y: 23.312
},{
x: 2017-07-08t06:30:02-0600,
y: 23.25
}]
},
options: {
showline: false,
scales: {
x:{
type: 'time',
display: true,
title: {
display: true,
text: 'date'
},
},
}
}
}
);
i see this as a quite elegant solution. the documentation even specifies:
the scatter chart supports all of the same properties as the line chart. by default, the scatter chart will override the showline property of the line chart to false.
score:7
that advice isn't quite right. the javascript moment.js makes it possible to plat scatter data using dates as the x axis value. for some reason the bundled version in chart.bundle.js wasn't working for me, so i downloaded moment.js directly. i'm using this to setup:
<script src="js/moment.js"></script>
<script src="js/chart.min.js"></script>
and this for my chart.js data details:
data: [
{x: moment("2017-07-08t06:15:02-0600"), y: 23.375},
{x: moment("2017-07-08t06:20:02-0600"),y: 23.312},
{x: moment("2017-07-08t06:25:02-0600"),y: 23.312},
{x: moment("2017-07-08t06:30:02-0600"),y: 23.25}
],
it's working great!
score:8
according to the documentation of scatter charts:
unlike the line chart where data can be supplied in two different formats, the scatter chart only accepts data in a point format.
so you can't use values like 2017-07-08t06:15:02-0600
. you can convert dates into numbers and use them in your data.
in your case:
data: [{
x: 1499516102000,
y: 23.375
}, {
x: 1499516402000,
y: 23.312
}, {
x: 1499516702000,
y: 23.312
}, {
x: 1499517002000,
y: 23.25
}
]
now your xaxes will be with numbers, so you can use a callback
to modify xaxes labels.
Source: stackoverflow.com
Related Query
- time scatter plot w/ chart.js
- Mixed chart scatter plot with chart.js
- Flask with Chart JS Scatter Plot struggle
- How to plot chart from external JSON and format X-AXIS to show time using Chart.JS?
- How to use chart.js to plot line chart with x axis as time stamp in seconds
- Chart.js scatter chart plot data joins start and finish points together
- Chart.js scatter plot fill portions of chart based on value
- How to prevent first/last bars from being cut off in a chart with time scale
- how to plot multiple time series in chartjs where each time series has different times
- Chart JS - Use time for xAxes
- chart.js scatter chart - displaying label specific to point in tooltip
- Chart js display empty plot
- plot a bar chart.js time series
- chartjs: How to plot multi-line chart with irregular intervals
- Chart JS - set start of week for x axis time series
- Chart.js Dynamically Updating Chart with X Axis Time
- Chartjs time plot xAxis shows year 1970
- Category scale on Y-axis and time on x-axis in bubble chart in Chartjs
- Chartjs, plot data based with unequal time intervals
- Using Chart.Js to plot a scatter plot from an Array
- Show image instead a point in a ChartJS scatter plot
- Time series line chart is not displayed
- Time Series Line chart js in react not working
- Dynamically created Chart.js chart overpopulating time based x-axis?
- Non numeric for x-axis in scatter chart in CHART.js
- ChartJs Force scatter plot to be square shaped
- Plot lap times with Chart.js from time strings
- How to access or get value of specific graph on chart plot by click event?
- chart.js v 2.0.1 line, scatter chart pointRadius bug or I'm doing it wrong
- Stacked line chart not displaying correctly when Xaxis is time
More Query from same tag
- Chartjs, How to edit data option after creating a chart?
- Chartjs bar chart blurry when height is set
- Use chartjs with rails
- Dynamically loaded chart data not showing Chartjs React
- Chart.js -- using update() with time scale datasets
- chart.js mixed chart with different data points
- JS import updated JSON file for use with ChartJS
- Chart.js with 2 y-axis
- Chart.js with plotting durations against dates
- Why does putting two data sets with a Time Cartesian axis in Chart.js cause two Y axis tick sets?
- AngularJS Pagination not showing all pages
- Limit labels number on Chart.js line chart
- How to set the pointDot option on combo stacked bar-line chart
- ChartJS Scatter plot with JSON list variable not working
- Chart.js legend text showing undefined
- Using unknown number of datasets in Chart.js
- Show point values in Radar Chart using chart.js
- format y axis labels in bold
- Line chart not rendering data
- How to display half hour ticks on x-axes
- How to change chartjs ticks orientation to 'slope right'?
- Download Chart.js graph from view
- Using public data for dynamic data
- How to remove numbering on PolarArea circles?
- Displaying JSON data in Chartjs
- How can I show Bootstrap modal when on click in individual bars in chart.js
- Receiving json data from a server to display a chart.js graph not working
- How to offset x and y axis grid points and labels using chart.js?
- Time graphs chart.js
- Chart.js Doughnut with rounded edges