I am trying to plot a bar chart with multiple datasets on a time series, however some of the data gets lost along the way.
for simplicity I have removed the ajax call and plotted some data:-
var config = {
type: 'bar',
data: {
datasets: [{
label: "Dataset 1",
data: [{
x: new Date('2017-03-01'),
y: 1
}, {
x: new Date('2017-03-02'),
y: 2
}, {
x: new Date('2017-03-03'),
y: 3
}, {
x: new Date('2017-03-04'),
y: 4
}],
backgroundColor: "red"
}, {
label: "Dataset 2",
data: [{
x: new Date('2017-03-01'),
y: 1
}, {
x: new Date('2017-03-02'),
y: 2
}, {
x: new Date('2017-03-03'),
y: 3
}, {
x: new Date('2017-03-04'),
y: 4
}],
backgroundColor: "blue"
}]
},
options: {
scales: {
xAxes: [{
type: "time",
time: {
unit: 'day',
round: 'day',
displayFormats: {
day: 'MMM D'
}
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
using the above configuration dataset 1 point 1 and dataset 2 point 4 (so basically the first and last points) do not get drawn.
Any ideas where I am going wrong here?
Also I am using this time series version because I was hoping to have "gaps" in the chart, for example dataset 1 might have a series for 2017-03-01 and dataset 2 might not, in this case dataset 2's next date will bunch up to dataset 1's making it look like it does belong to that date.
Any help would be appreciated
I had the exact same issue when displaying a bar chart with time as the X axes.
Inside your xAxes you need to add an additional configuration option:
xAxes: [{
offset: true
}]
Description from the ChartJS documentation:
If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to true in the bar chart by default.
ChartJS Documentation Cartesian
Related
I am trying to create a visitors bar chart with included values, for example:
I want to show a bar chart of total daily visitors, and that bar should contain info of total visitors and first time visitors.
so data for a bar should look like:
data: {
labels: getDataAttributes(data, 'data-date'),
// an array holding the date of each bar (custom function)
// for example purposes lets say its just 3 bars
datasets: [{
label: ['Number of visitors', 'Number of new visitors'],
data: [[20,15], [25,10], [30, 15]],
// Here if we would use a simple stacked bar chart the height would be the sum of 2 values
// e.g.(20+15=35), but I wish that the bar height would be the number of total visitors 20
// the tooltip should contain values of total visitors and new visitors respectively 20 and 15
}]
}
I looked in the chartjs documentation, but found only examples with stacked values and that solution is not applied in my desired design, can someone please reference documentation/articles/tutorials or personal experience or perhaps I should switch to d3js? Thanks.
You could define two datasets, the first one would contain the values of new visitors, the second one the values of all visitors.
Then you would define the x-axis as being stacked:
options: {
scales: {
xAxes: [{
stacked: true
}],
Please take a look at below runnable code snippet to see how it works:
const baseData = [[20,15], [25,10], [30, 15]];
new Chart('chart', {
type: 'bar',
data: {
labels: ['25.10.2020', '26.10.2020', '27.10.2020'],
datasets: [{
label: 'Number of new visitors',
data: baseData.map(v => v[1]),
backgroundColor: 'green'
},
{
label: 'Number of visitors',
data: baseData.map(v => v[0]),
backgroundColor: 'blue'
}]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="100"></canvas>
I am trying to display dates on xAxes with Chart.js
I tried this with 2 dates but it shows nothing.
Probably something I did wrong with the labels or date format.
<canvas id="graph"></canvas>
<script>
var ctx = document.getElementById('graph').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["2013-02-08", "2013-02-10"],
datasets: [{
label: "Something",
data: [{
x: "2013-02-08",
y: 1
}, {
x: "2013-02-10",
y: 10
}]
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day'
}
}]
}
}
});
</script>
Need help :)
Your code looks fine except that you don't need to define data.labels since the data in your dataset is defined as individual points through objects containing x and y properties.
Chart.js internally uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.
var ctx = document.getElementById('graph').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: "Something",
data: [
{ x: "2013-02-08", y: 1 },
{ x: "2013-02-10", y: 10 }
]
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day'
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="graph"></canvas>
I have a chart built with the Charts.js api. The x axis is configured to show ticks on the hour via moment.js. I would like to give the option to change the X axis ticks from hour to days in the week: I know that to do this I just have to change the code in the Chart from this:
xAxes:
[{
type: 'time',
distribution: 'linear',
time:
{
unit: 'hour'
}
}],
To this:
xAxes:
[{
type: 'time',
distribution: 'linear',
time:
{
unit: 'week'
}
}],
But I can't get it to happen with a JavaScript function. I would like to be able to change this setting according to preferences, so I want to build a function that when called will change the "unit" attribute to something different. Can anyone help? Here is what I have so far:
function setXAxis()
{
chart.config.options.scales.xAxes.time.unit.push('week');
chart.update();
};
Complete chart.js code:
// Setting up progress chart via Charts.js
var ctx = document.getElementById("myChart").getContext("2d");
Chart.defaults.global.defaultFontColor = "#58a7dd";
// Configuration
var chart = new Chart(ctx,
{
type: 'line',
data:
[{
x: new Date(),
y: 1
},
{
t: new Date(),
y: 10
}],
options:
{
scales:
{
xAxes:
[{
type: 'time',
distribution: 'linear',
time:
{
unit: 'hour' //THIS IS WHAT I WANT TO CHANGE WITH THE FUNCTION
}
}],
yAxes:
[{
type: 'category',
labels: ['one', 'two', 'three', 'four', 'five']
}]
}
}
});
You can Update the options of a chart directly with its options key, not with config.options also unit is not array to push, its a key so assign value to it
in your code
function setXAxis()
{
chart.options.scales.xAxes[0].time.unit='week';
chart.update();
};
I'm trying to render a scatter plot in chart.js of (x,y) data where x is a date string. I've seen many examples and tutorials online where the instructor uses a function to generate the time stamp for an example chart, but I haven't found any examples that use real data like one might collect.
I have data that looks like this (collected from cron):
2017-07-08T06:15:02-0600,23.375
2017-07-08T06:20:02-0600,23.312
2017-07-08T06:25:02-0600,23.312
2017-07-08T06:30:02-0600,23.25
I tried a data like this in chart.js (both with and without "quotes" around the data string):
data: [{
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
}],
Nothing renders. What am I doing wrong?
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.
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!
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.
I couldn't find a working example from these answers, so here's mine.
new Chart(document.getElementById("chart"), {
type: "line",
data: {
datasets: [
{
showLine: false,
fill: false,
data: [
{
x: new Date(Date.now()),
y: 100,
},
{
x: new Date(Date.now() + 1000 * 60 * 60),
y: 200,
},
{
x: new Date(Date.now() + 2000 * 60 * 60),
y: 300,
},
{
x: new Date(Date.now() + 3000 * 60 * 60),
y: 400,
},
],
},
],
},
options: {
plugins: {
legend: {
display: false,
},
title: {
text: "Chart.js Time Scale",
display: true,
},
},
scales: {
x: {
type: "time",
time: {
unit: "hour",
// Luxon format string
// tooltipFormat: "DD T",
},
title: {
display: true,
text: "Hour",
},
},
y: {
title: {
display: true,
text: "value",
},
},
},
},
});
I pulled it from here: https://www.chartjs.org/docs/latest/samples/scales/time-line.html
You'll need to install momentjs and its adapter:
npm install moment chartjs-adapter-moment --save
..and then import all libraries like
import Chart from "chart.js/auto";
import "chartjs-adapter-moment";
I'm trying to use linear scale on x-axis in my chart.js chart.
I add some code beause stackoverflow makes it obligatory when adding a jsfiddle url, but I don't see the point :
var options={
scales:{
xAxes:[{ type: "linear"}]
}
};
I'm getting a very strange chart (2nd one) : http://jsfiddle.net/t0krmau8/
In the first chart, I'd like to get more space between 2 and 4 (2 times more space than between 1 and 2), that's why I'm using a linear scale.
Am I using the linear scale wrong? Or should I use something else?
Thanks
You're not providing the data in correct format for the scatter line plot.
The correct format to provide the data is described by the following example from Chart.js Docs.
var scatterChart = new Chart(ctx/* your canvas context*/, {
type: 'line',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}, {
x: 0,
y: 10
}, {
x: 10,
y: 5
}]
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom'
}]
}
}
});
source
I think the x and y should be separable into different arrays, but you can always do a combination step and combine them into objects.