I'm trying to set my own labels on the xAxis however I'm not sure how to do it using the example code I found.
I want it to look like this essentially: https://www.chartjs.org/samples/latest/scales/time/line.html
var result = [{ x: "00:01:53", y: "22" }, { x: "00:02:13", y: "45" }, { x: "00:02:43", y: "46" }, { x: "00:02:51", y: "51" }];
var result2 = [{ x: "00:01:52", y: "20" }, { x: "00:02:11", y: "42" }, { x: "00:02:41", y: "43" }, { x: "00:02:38", y: "50" }];
var labels = result.map(e => moment(e.x, 'h:mm:ss'));
var data = result.map(e => +e.y);
var data2 = result2.map(e => +e.y);
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'g-force',
data: data,
borderColor: "#3e95cd",
borderWidth: 1
},
{
label: 'g-force',
data: data2,
borderColor: "#8e5ea2",
borderWidth: 1
}
],
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'second',
displayFormats: {
second: 'h:mm:ss'
}
}
}]
},
}
});
This seems to work. This code starts from today and adds in the next 10 days. You'll have to change date to whenever you want your start date to be as well as how many dates you need.
let labels = [];
var date = new Date();
var options = {
month: "long",
day: "numeric"
};
for (i = 0; i < 10; i++) {
date.setDate(date.getDate() + i);
labels.push(date.toLocaleDateString("en-US", options));
}
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
...
Related
I am trying to make a line chart by using chart.js. But I facing a problem. I want to control the space between points, but the chart.js makes it equal.
Here is my code:
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js" integrity="sha512-OD9Gn6cAUQezuljS6411uRFr84pkrCtw23Hl5TYzmGyD0YcunJIPSBDzrV8EeCiFxGWWvtJOfVo5pOgB++Jsag==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var ctx = document.getElementById("myChart");
var points = [1,1,9,9.3];
var Dates = ["Dec 29th", "jan 10th", "Feb 21st", "Feb 25th"];
var myChart = new Chart(ctx, {
type: "line",
data: {
labels: Dates,
datasets: [
{
label: "My chart",
data: points,
backgroundColor: "black",
borderColor: "blue",
borderWidth: 3,
fill: false,
lineTension: 0.4,
}
]
},
options: {
legend: {display: false},
scales: {
yAxes:[{
ticks: {
min:1,
max: 9.9,
callback: function(value, index, values) {
return '$' + value;
}
}
}],
},
elements: {
point:{
radius: 0
}
}
}
});
</script>
Here is the result of my code:
But I want the big space in middle like this:
How can I make the big space between point 3 and point4, please?
Can you use time on the x axis?
Below is an example
// "+" before (new Date(2021,11,29)) return miliseconds from 1970 year
const dataA = [
{x:+new Date(2021,11,29), y:1}, // { x: 1640732400000, y: 1},
{x:+new Date(2022,0,10), y:1}, // { x: 1641769200000, y: 1},
{x:+new Date(2022,1,21), y:9}, // { x: 1645398000000, y: 9},
{x:+new Date(2022,1,25), y:9.3}, // { x: 1645743600000, y: 9.3}
];
const cfgChart = {
type: 'line',
data: {
datasets: [
{
backgroundColor: '#74adf7',
borderColor: '#74adf7',
data: dataA,
label: 'A',
lineTension: 0.4,
},
],
},
options: {
animation: false,
parsing: false,
interaction: {
mode: 'index',
axis: 'x',
intersect: false,
},
scales: {
x: {
type: 'time',
},
},
},
};
const chart = new Chart(document.querySelector('#chart').getContext('2d'), cfgChart);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.3.1/luxon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-luxon/1.1.0/chartjs-adapter-luxon.min.js"></script>
<div>
<canvas id="chart"></canvas>
</div>
New to Chart.js, I was wondering if there is a built in method to sum y values depending on time unit.
Asking here after a lot of search in the docs.
For now, the bar for March shows 20 and the bar for June shows 10.
I want to have 25 for March and 15 for June, so to sum y for the same month.
const ctx = document.getElementById("tests-chart")
const testsChart = new Chart(ctx, {
type: "bar",
data: {
datasets: [
{
label: 'Dataset 1',
data: [
{ x: "24/03/2022", y: 20 },
{ x: "25/03/2022", y: 5 },
{ x: "24/06/2022", y: 10 },
{ x: "25/06/2022", y: 5 },
],
backgroundColor: 'rgb(255, 99, 132)',
},
],
},
options: {
scales: {
x: {
type: "time",
time: {
parser: "dd/MM/yyyy",
unit: "month",
// Luxon format string
tooltipFormat: "MM",
round: 'month'
},
},
},
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon#2.3.1/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon#1.1.0/dist/chartjs-adapter-luxon.min.js"></script>
<div>
<canvas id="tests-chart"></canvas>
</div>
You can manipulate your dataset as mentioned below and achieve your expected output.
const ctx = document.getElementById("tests-chart");
const data =[
{ x: "24/03/2022", y: 20 },
{ x: "25/03/2022", y: 5 },
{ x: "24/06/2022", y: 10 },
{ x: "25/06/2022", y: 5 }
];
let updatedData =[];
let tempDateCollection =[];
data.map((yData , index)=> {
const formatedDate = moment(yData.x, "DD/MM/YYYY").format('MMM/YYYY');
if(tempDateCollection.includes(formatedDate)){
const index = tempDateCollection.indexOf(formatedDate);
const element = updatedData[index];
updatedData[index] = {...element, y: element.y + yData.y}
} else{
tempDateCollection.push(formatedDate);
updatedData.push(yData);
}
})
const testsChart = new Chart(ctx, {
type: "bar",
data: {
datasets: [
{
label: 'Dataset 1',
data:updatedData,
backgroundColor: 'rgb(255, 99, 132)',
},
],
},
options: {
scales: {
x: {
type: "time",
time: {
parser: "dd/MM/yyyy",
unit: "month",
// Luxon format string
tooltipFormat: "MM",
round: 'month'
},
},
},
},
})
<script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon#2.3.1/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon#1.1.0/dist/chartjs-adapter-luxon.min.js"></script>
<div>
<canvas id="tests-chart"></canvas>
</div>
I am trying to plot some data as a scatter plot using Chart.js. I tryed almost everything on the internet and I am still getting the x-axis as shown in the screenshot below. The date format is an interger and I need it a date.
EDIT:
I also find out, when I omit the square brackets for the axis properties, which is teh way described in the documentations, I am getting an error (Uncaught Error: This method is not implemented: Check that a complete date adapter is provided. ). When I used the square brackets for the axis, the properties are not recognised.
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.4.1/dist/chart.min.js"></script>
<canvas id="mychart"></canvas>
<script>
data = [{
x: new Date("2017-01-20"),
y: 43
}, {
x: new Date("2017-01-21"),
y: 45
}, {
x: new Date("2017-01-22"),
y: 120
}, {
x: new Date("2017-01-23"),
y: 100
}]
let options = {
scales: {
yAxes: [{ticks: {min: 0}}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
}
}],
},
};
let chartData = {
//labels: labels,
datasets: [{
data: data,
label: 'Amount of Stuff',
backgroundColor: '#fffff',
}]
};
let ctx = document.getElementById('mychart').getContext('2d');
new Chart(ctx, {
data: chartData,
type: 'scatter',
options: options,
});
</script>
The result I am getting is:
You can use a callback function to alter how the data on the axis is displayed.
let options = {
scales: {
yAxes: [{ticks: {min: 0}}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
},
ticks: {
callback: function(value, index, values){
// do something with value
return value;
}
}
}],
},
};
I found out, where the problem was:
I needed to reference an adaptor for the moment like this and remove the the square brackets for the properties of the axis as shown in the documetnation:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#0.1.2"></script>
<canvas id="mychart"></canvas>
<script>
data = [{
x: new Date("2017-01-20"),
y: 43
}, {
x: new Date("2017-01-21"),
y: 45
}, {
x: new Date("2017-01-22"),
y: 120
}, {
x: new Date("2017-01-23"),
y: 100
}]
let options = {
scales: {
yAxes: {ticks: {min: 0}},
xAxes: {
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
}
},
},
};
let chartData = {
//labels: labels,
datasets: [{
data: data,
label: 'Amount of Stuff',
backgroundColor: '#fffff',
}]
};
let ctx = document.getElementById('mychart').getContext('2d');
new Chart(ctx, {
data: chartData,
type: 'scatter',
options: options,
});
</script>
This is the code I'm using to display the chart
<canvas id="myChart"></canvas>
<script>
var data1 = [{
x: new Date("2020-01-01 18:00:00"),
y: 1
}, {
x: new Date("2020-01-02 18:00:00"),
y: 2
},{
x: new Date("2020-01-03 18:00:00"),
y: 3
}];
var ctx = document.getElementById('myChart');
console.log(data1);
var chart = new Chart(ctx, {
type: 'line',
data: data1,
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day'
},
distribution: 'linear',
}]
}
}
});
</script>
I've tried pasting a typical chart.js example from their website and the chart is displayed just fine. I have also tried using a string in the x-axis but that doesn't seem to work as well
Can't figure out why this is happening, any help would be greatly appreciated.
As palaѕн commented, you don't correctly retrieve the 2D-Context. This should look as follows.
var ctx = document.getElementById('myChart').getContext('2d');
Further the data object needs to be defined in a different way.
data: {
datasets: [{
data: data1
}]
},
Please have a look at your amended code below.
var data1 = [{
x: new Date("2020-01-01 18:00:00"),
y: 1
}, {
x: new Date("2020-01-02 18:00:00"),
y: 2
}, {
x: new Date("2020-01-03 18:00:00"),
y: 3
}];
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: data1
}]
},
data1,
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day'
},
distribution: 'linear',
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="120"></canvas>
I am fairly new to javascript world, so bear with me if there is an obvious solution to this, but I'm struggling to graph the dates (X-points) on the X axis of the chartjs graph. I get some weird times there that you can check on jsfiddle. What am I doing wrong?
var ctx = document.getElementById("myChart");
var data = {
datasets: [{
label: " Property",
lineTension: 0.1,
data: [{
x: 2017 - 04 - 11,
y: 2000000.00
},
{
x: 2017 - 04 - 12,
y: 1000000.00
},
{
x: 2017 - 04 - 13,
y: 3000000.00
},
]
},
{
label: " Property",
lineTension: 0.1,
data: [{
x: 2017 - 04 - 12,
y: 472943.00
},
{
x: 2017 - 04 - 13,
y: 1000000.00
},
]
},
]
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [{
id: 'ScartCharxAxes',
type: 'time',
unit: 'day',
time: {
displayFormats: {
day: 'D MMM YYYY'
},
}
}]
}
}
});
My code is available on http://jsfiddle.net/py1bpf02/3/
In your datasets, dates should be strings. What you did is math, not dates. 2017-04-11 = 2002.
var ctx = document.getElementById("myChart");
var data = {
datasets: [
{
label: " Property",
lineTension: 0.1,
data: [{
x: "2017-04-11",
y: 2000000.00
},
{
x: "2017-04-12",
y: 1000000.00
},
{
x: "2017-04-13",
y: 3000000.00
},
]
},
{
label: " Property",
lineTension: 0.1,
data: [{
x: "2017-04-12",
y: 472943.00
},
{
x: "2017-04-13",
y: 1000000.00
},
]
},
]
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [{
id: 'ScartCharxAxes',
type: 'time',
time: {
unit: 'day',
displayFormats: {
day: 'D MMM'
},
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>