score:1
Accepted answer
yes, this is possible by using the time axis. you'll need to remodel your data to fit the required input format; an example of this is in the snippet below using foreach
.
it's important to note that chart.js requires moment.js for datetime handling. make sure to include moment.js before chart.js, or use the chart.js bundled build.
let j = {
"site1": [{
"datetime": "2019-01-09 14:43:58",
"price": "649.99"
},
{
"datetime": "2019-01-09 14:44:17",
"price": "649.99"
},
{
"datetime": "2019-01-09 15:02:59",
"price": "649.99"
},
{
"datetime": "2019-01-09 15:05:43",
"price": "649.99"
},
{
"datetime": "2019-01-09 15:08:52",
"price": "649.99"
},
{
"datetime": "2019-01-09 15:16:51",
"price": "649.99"
}
],
"site2": [{
"datetime": "2019-01-09 15:03:05",
"price": "0"
},
{
"datetime": "2019-01-09 15:05:52",
"price": "804.91"
},
{
"datetime": "2019-01-09 15:09:00",
"price": "804.91"
},
{
"datetime": "2019-01-09 15:16:58",
"price": "804.91"
}
]
},
k = object.keys(j),
datasets = [];
// remodel the data so it can be provided direct to chart.js
k.foreach(function(val) {
let d = {
label: val,
data: []
};
j[val].foreach(function(val2) {
d.data.push({
x: val2.datetime,
y: val2.price
});
});
datasets.push(d);
});
// create the chart.
new chart(document.getelementbyid('canvas'), {
type: 'line',
data: {
datasets: datasets
},
options: {
scales: {
xaxes: [{
type: 'time'
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.3/chart.bundle.min.js"></script>
<canvas id="canvas"></canvas>
score:1
this can be achieved using chart.js + moment.js when you're plotting a chart against time.
see this below code or fiddle -> http://jsfiddle.net/goz3jehy/4/
var config = {
type: 'line',
data: {
datasets: [{
label: "site1",
backgroundcolor: 'red',
bordercolor: 'pink',
fill: false,
data: [{
x: '2019-01-09 14:43:58',
y: 649.99
},
{
x: '2019-01-09 14:44:17',
y: 649.99
},
{
x: "2019-01-09 15:02:59",
y: 649.99
},
{
x: "2019-01-09 15:05:43",
y: 649.99
},
{
x: "2019-01-09 15:08:52",
y: 649.99
},
{
x: "2019-01-09 15:16:51",
y: 700
}
],
},
{
label: "site2",
backgroundcolor: 'orange',
bordercolor: 'yellow',
fill: false,
data: [{
x: "2019-01-09 15:03:05",
y: 0
},
{
x: "2019-01-09 15:05:52",
y: 804.91
},
{
x: "2019-01-09 15:09:00",
y: 804.91
},
{
x: "2019-01-09 15:16:58",
y: 804.91
}
],
}
]
},
options: {
scales: {
xaxes: [{
type: 'time',
time: {
}
}],
},
}
};
var ctx = document.getelementbyid("mychart").getcontext("2d");
new chart(ctx, config);
Source: stackoverflow.com
Related Query
- How to create a multiline graph with differents labels
- How to skip labels of a line in multiline graph in chartjs?
- How to Create Chart.JS Bar Graph with Min, Max & Average
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- How to create rounded bar graph with Angular 7 and Chartjs (v2)
- Chartjs: how can i create a graph with multiple jsons files?
- How to create a charjs bar graph with many bars?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- How to display Line Chart dataset point labels with Chart.js?
- How to fix bars in Chart.js with long labels
- How to display data labels outside in pie chart with lines in ionic
- How can I create a time series line graph in chart.js?
- Create a rounded bar graph with Angular and chartJS
- How to display value labels above graph bars using chart.js
- How to create dynamic charts with Django and Chart.js?
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to add images to chart labels with vue-chartjs?
- How to create a simple Gauge with ChartJS v3?
- How to create chartjs chart with data from database C#
- How to create a stacked graph using ChartJS
- How to create a linechart with Chart.JS (not filled)
- how to draw line graph with line animation from left to right using chartjs?
- How do I correctly include Moment.js and Chart.js with RequireJS when I want to create charts with time scales?
- How to create Bar chart that gets updated from new ajax requests with ChartJS?
- Angular 2: How to pass my API data to graph and Display the Graph with data
- How do I create stacked chart with Chart.js version 2.0.0-beta
- How to prevent tick labels from "jumping" when drawn with ChartJS BeforeDraw
- How do you plot scatter graph with chart.js
- How to change fonts and axis labels for Chart.js image rendering with QuickChart?
- How to create line graph use chartjs?
More Query from same tag
- Chart.js show x-axis data from right to left
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- ChartJS changing displayed data based on date?
- angular 5 reset chart js bar in same component
- Extend chart.js in PHP heredoc causes parse error
- ChartJs line chart - display permanent icon above some data points with text on hover
- Angular 7 - Labels and Date values
- ChartJS v2 - Outer arc when hover on a pie/doughnut segment
- Using CHARTJS with a JavaScript Array
- How to show tooltip value of all data falling on the same axis in chart js?
- Chart.js Line graph y-axis not starting from 0
- react chart js, title is not displayed
- Chart.js How to invert (swap) axes?
- Error Message when using ChartJS with React
- Chart.js show data in chronological order
- Reverse tick order
- how to disable last/max value shown on x axis in chart js?
- How can I fix the offset of the gradient to be aligned with the chart points(chart.js)?
- How can I draw a line to the highest datapoint in chart js?
- Unable to load Chart.js data from getJSON / PHP?
- Unable to update state in ReactJS
- How to use custom rendering methods of chartJs through ng2-charts angular?
- Chartjs 3 ToolTip styling is not being picked up
- Chart.js: summing number of items in active/shown datasets on yAxes of pie chart
- Chartjs - custom y axis range
- cannot view graph using toArray()
- Error when adding data on top of each bar
- Chartjs - Insert additional data into chart tooltip
- How to Increase the label font size and decrease the size of my pie using chart.js?
- JavaScript Chart.JS - Custom tooltips to add description of specific data point when hovering