I am trying to figure out how to plot a scatter graph with chart.js the data I am trying to plot is randomly generated where dates is a list of datetime.now() objects and prices is a list of float numbers
dates = [datetime.now().strftime("%Y-%m-%d") for i in range(10)]
var dates_ = {{dates|tojson}}
var prices_ = {{prices|tojson}}
function parse_data(dates , prices)
{
console.log(dates.length , prices.length)
var tmp = [];
for (let i = 0; i < dates.length; i++)
{
var x;
var y;
tmp[i] = {x: dates.at(i), y: prices.at(i)};
}
return tmp;
}
var data_ = parse_data(dates_, prices_);
var chart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
lablel: "some_data",
data: data_}]
});
converting the dates to float numbers does the job but it shows the dates as number and it is not that good looking
You can define your x-axis as follows
x: {
type: 'time',
time: {
parser: 'YYYY-M-D',
unit: 'day',
displayFormats: {
day: 'D MMM YYYY'
},
tooltipFormat: 'D MMM YYYY'
}
}
Further information can be found at the Chart.js documentation here and in the Chart.js samples here.
Note that I use chartjs-adapter-moment together with moment to make this work. The formats for parsing and displaying time values as desired can be found here.
Please take a look at your amended code and see how it works.
var test = [
{ x: "2022-1-8", y: 950 },
{ x: "2022-1-9", y: 1100 },
{ x: "2022-1-10", y: 990 },
{ x: "2022-1-12", y: 1250 },
{ x: "2022-1-13", y: 1050 }
];
var chart = new Chart('chart-line', {
type: 'scatter',
data: {
datasets: [{
data: test,
label: 'buys',
borderColor: "#3e95cd"
}]
},
options: {
responsive: false,
scales: {
x: {
type: 'time',
time: {
parser: 'YYYY-M-D',
unit: 'day',
displayFormats: {
day: 'D MMM YYYY'
},
tooltipFormat: 'D MMM YYYY'
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#1.0.0"></script>
<canvas id="chart-line" height="200"></canvas>
The scatter chart uses a line chart internally but changes it so the showLine property becomes false and both axis are set to linear.
So you can just set the showLine property to false in your dataset and use a line chart.
const data = {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
datasets: [{
label: 'Dataset 1',
data: [{x:1, y:12}, {x:2, y:3}, {x:3, y:2}, {x:4, y:1}, {x:5, y:8}, {x:6, y:8}, {x:7, y:2}, {x:8, y:2}, {x:9, y:3}, {x:10, y:5}, {x:11, y:7}, {x:12, y:1}]
}]
}
const config = {
type: 'scatter',
data,
options: {
responsive: true,
maintainAspectRatio: false,
},
}
const $canvas = document.getElementById('chart')
const chart = new Chart($canvas, config)
<div class="wrapper" style="width: 98vw; height:180px">
<canvas id="chart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
Related
Right now, I manually filter the last 3 months by labels: ["JAN", "FEB", "MAR"],
I need dyanamically the last 3 months should be filtered every month. How can this be done?
This is my typescript code
HTML
<div>
<canvas id="myChart" width="400" height="300"></canvas>
</div>
TS
this.canvas = document.getElementById('myChart');
this.ctx = this.canvas.getContext('2d');
let myChart = new Chart(this.ctx, {
type: 'bar',
//type: 'doughnut',
data: {
// labels: ["Sold", "Booked", "Unsold"],
// labels: this.barchartLables,
labels: ["JAN", "FEB", "MAR"],
datasets: [{
label: 'Total Expenditure.',
//data: this.barchartdata,
data: [2517453, 2617453, 3917453],
//backgroundColor: ["red", , , , , , , , "blue"],
backgroundColor: [
'#ec6666',
'#78d1dd',
'#147ad6'
],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
responsive: false,
display: true
}
});
you can use moment js library for this purpose
like you can use moment subtract method for last any month
moment().subtract(1, 'month')//for last month
moment().subtract(2, 'month') // for second last month
moment().subtract(3, 'month') // for the third one
So Im trying to find an smart way to pass data with dates to chart.js.
On the x-axis i would like to show a time line for example a week,
14/06 15/06 16/06 17/06 18/06 19/06 20/6
But the data will not inculde every day
for example
[{'date': 15/06, 'bought': 2}, {'date': 17/06, 'bought': 5}]
for what I read, I would need to create a new array (same index number as the time period), compare the dates and replace the value depending on the index value...
Is there a better process?
I would like to show a time period for like a year.
LeeLenalee's perfectly shows how Chart.js is instructed to correctly parse your data. In order to obtain a time line, you'll also need to define the x-axis as a time cartesian axis.
Please take a look at below runnable code and see how it works.
new Chart('myChart', {
type: 'line',
data: {
datasets: [{
label: 'Purchases per day',
data: [
{ 'date': '15/06', 'bought': 2 },
{ 'date': '17/06', 'bought': 5 },
{ 'date': '20/06', 'bought': 3 }
],
borderColor: 'rgb(0, 0, 255)',
backgroundColor: 'rgba(0, 0, 255, 0.5)'
}]
},
options: {
parsing: {
xAxisKey: 'date',
yAxisKey: 'bought'
},
scales: {
y: {
ticks: {
stepSize: 1
}
},
x: {
type: 'time',
time: {
parser: 'DD/MM',
unit: 'day',
tooltipFormat:'MMM DD'
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment#2.27.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#0.1.1"></script>
<canvas id="myChart" height="90"></canvas>
You can just provide that array as is to chart.js, you only need to specify which field should be mapped to the x Axis and which field to the yAxis in the parsing block of the options object.
Live example:
var options = {
type: 'line',
data: {
datasets: [
{
label: '# of Votes',
data: [{'date': '15/06', 'bought': 2}, {'date': '17/06', 'bought': 5}, {'date': '20/06', 'bought': 3}],
borderWidth: 1
}
]
},
options: {
parsing: {
xAxisKey: 'date',
yAxisKey: 'bought'
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.js"></script>
</body>
i added this code
scales:
{
xAxes:
[{
type: 'time',
time:
{
unit: 'month',
displayFormats: { month: 'MM' },
max: '2017-10-09 18:43:53',
min: '2017-10-02 18:43:53'
}
}]
},
to the options but it does not work. Any ideas what i'm making wrong?
FIDDLE ->
https://jsfiddle.net/o473y9pw/
Since you wish to use time for x-axis, your labels array should be an array of date/time string (labels array is correspondent to x-axis).
You would also need to set the parser property (to parse the date/time correctly), and x-axis' ticks source to data (to properly generate x-axis ticks).
UPDATE
If you only have a min and max date then, you can create a nice little plugin to populate the labels (date) array dynamically, as such :
plugins: [{
beforeInit: function(chart) {
var time = chart.options.scales.xAxes[0].time, // 'time' object reference
// difference (in days) between min and max date
timeDiff = moment(time.max).diff(moment(time.min), 'd');
// populate 'labels' array
// (create a date string for each date between min and max, inclusive)
for (i = 0; i <= timeDiff; i++) {
var _label = moment(time.min).add(i, 'd').format('YYYY-MM-DD HH:mm:ss');
chart.data.labels.push(_label);
}
}
}]
note: moment.js is used to make calculations easier.
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
( for demonstration purposes, I've changed the time unit to day )
$(document).ready(function() {
new Chart(document.getElementById("chartBox"), {
type: 'line',
data: {
datasets: [{
data: [12, 19, 3, 5, 2, 3, 32, 15],
label: "",
borderWidth: 2,
borderColor: "#3e95cd",
fill: false,
pointRadius: 0
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
parser: 'YYYY-MM-DD HH:mm:ss',
unit: 'day',
displayFormats: {
day: 'ddd'
},
min: '2017-10-02 18:43:53',
max: '2017-10-09 18:43:53'
},
ticks: {
source: 'data'
}
}]
},
legend: {
display: false
},
animation: {
duration: 0,
},
hover: {
animationDuration: 0,
},
responsiveAnimationDuration: 0
},
plugins: [{
beforeInit: function(chart) {
var time = chart.options.scales.xAxes[0].time, // 'time' object reference
timeDiff = moment(time.max).diff(moment(time.min), 'd'); // difference (in days) between min and max date
// populate 'labels' array
// (create a date string for each date between min and max, inclusive)
for (i = 0; i <= timeDiff; i++) {
var _label = moment(time.min).add(i, 'd').format('YYYY-MM-DD HH:mm:ss');
chart.data.labels.push(_label);
}
}
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment#latest/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="chartBox"></canvas>
The dataset should be an array of objects with properties x for time and y for value.
$(document).ready(function() {
var data = [{
x: new moment().add(-10, "months"),
y: Math.random() * 100
},
{
x: new moment().add(-8, "months"),
y: Math.random() * 100
},
{
x: new moment().add(-6, "months"),
y: Math.random() * 100
},
{
x: new moment().add(-4, "months"),
y: Math.random() * 100
},
{
x: new moment().add(-2, "months"),
y: Math.random() * 100
},
{
x: new moment().add(-0, "months"),
y: Math.random() * 100
},
];
new Chart(document.getElementById("chartBox"), {
type: 'line',
data: {
datasets: [{
data: data,
borderColor: "#3e95cd",
fill: false
}]
},
options: {
scales: {
xAxes: [{
type: 'time'
}]
},
legend: false
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>
<canvas id="chartBox"></canvas>
Fiddle
If the xAxis label is in date format use this code
time:
{
format: 'MM',
unit: 'month',
displayFormats: { month: 'MM' },
max: '2017-10-09 18:43:53',
min: '2017-10-02 18:43:53'
}
If the xAxis label is as what u used numerals use
time:
{
format: 'MM',
unit: 'month',
parser:'MM',
displayFormats: { month: 'MM' },
max: '2017-10-09 18:43:53',
min: '2017-00-02 18:43:53'
}
You might want to change a few things.
Your data should include time data.
If you set scale unit to be month, your min max should be more than one month to see the actual scales.
Here's simplified working example.
https://jsfiddle.net/f2xmkkao/
There is a way to create two label for y-axes. But how do you make a multiple x-axes label in chart.js? eg: example as in this picture:
How to group (two-level) axis labels
For v2 only (v3 see #LeeLenalee's answer)
This question has already been answered on github here
Here is a working JSFiddle
var ctx = $("#c");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January;2015", "February;2015", "March;2015", "January;2016", "February;2016", "March;2016"],
datasets: [{
label: '# of Votes',
xAxisID:'xAxis1',
data: [12, 19, 3, 5, 2, 3]
}]
},
options:{
scales:{
xAxes:[
{
id:'xAxis1',
type:"category",
ticks:{
callback:function(label){
var month = label.split(";")[0];
var year = label.split(";")[1];
return month;
}
}
},
{
id:'xAxis2',
type:"category",
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
ticks:{
callback:function(label){
var month = label.split(";")[0];
var year = label.split(";")[1];
if(month === "February"){
return year;
}else{
return "";
}
}
}
}],
yAxes:[{
ticks:{
beginAtZero:true
}
}]
}
}
});
<body>
<canvas id="c" width="400" height="300"></canvas>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
</body>
Updated accepted answer to also work with V3 since scale config has been changed:
var ctx = $("#c");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January;2015", "February;2015", "March;2015", "January;2016", "February;2016", "March;2016"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3]
}]
},
options: {
scales: {
x: {
ticks: {
callback: function(label) {
let realLabel = this.getLabelForValue(label)
var month = realLabel.split(";")[0];
var year = realLabel.split(";")[1];
return month;
}
}
},
xAxis2: {
type: "category",
grid: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
ticks: {
callback: function(label) {
let realLabel = this.getLabelForValue(label)
var month = realLabel.split(";")[0];
var year = realLabel.split(";")[1];
if (month === "February") {
return year;
} else {
return "";
}
}
}
},
y: {
beginAtZero: true
}
}
}
});
<body>
<canvas id="c" width="400" height="300"></canvas>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>
var myChart = new Chart(ctx, {
type: "line",
data: {
datasets: [{
data: [20, 50, 100, 75, 25, 0],
label: "Left dataset",
// This binds the dataset to the left y axis
yAxisID: "left-y-axis",
}, {
data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
label: "Right dataset",
// This binds the dataset to the right y axis
yAxisID: "right-y-axis",
}],
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
},
options: {
scales: {
yAxes: [{
id: "left-y-axis",
type: "linear",
position: "left",
}, {
id: "right-y-axis",
type: "linear",
position: "right",
}],
},
},
});
okay maby a bit late ;)
how can we show the last tick in the second x-axis row?
with the code from above, we return a empty string.
i want to see the label of the last point.
ticks:{
callback:function(label){
var month = label.split(";")[0];
var year = label.split(";")[1];
if(month === "February"){
return year;
}else{
return ""; **<==== ???**
}
thx for the help.
EDIT
i change it a bit but not complete like i will
i don't want the label at 30 and 31 just the last day
w.a.w 31 label , 30 not a label
month ended at 30 => label
return month;
}else if
(Nbrday === "31"){
return month;
}else if
(Nbrday === "30"){
return month;
}
else{
// return month;
return "";
I am using flot jquery library to draw charts.
when my chart has a specific number of columns, I can set the x values for my points.
but now I have a dynmic data. so how can I know the points of the x axis please?
for example,
the x axis of the first point is 1325876000000
the x axis of the second point is 1328194400000
the third is 1330360000000
the fourth is 1332838400000
but lets say that I will have 9 columns. how can I know the x axis for them please?
I am printing the chart in this way
var holder = $('#vertical-chart');
if (holder.length) {
$.plot(holder, data, chartOptions);
}
the input data is like this
label: "label1"
data: [[1325876000000,0],[1325876000000,0],[1325876000000,0],[1325876000000,30]]
but now I don't know how many points in that array. it could be 11 or it could be 2
edit
this the chartoption
chartOptions = {
xaxis: {
min: (new Date(2011, 11, 15)).getTime(),
max: (new Date(2012, 04, 18)).getTime(),
mode: "time",
tickSize: [2, "month"],
monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
tickLength: 0
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 0
},
bars: {
show: true,
barWidth: 12 * 24 * 60 * 60 * 300,
fill: true,
lineWidth: 1,
order: true,
lineWidth: 0,
fillColor: { colors: [{ opacity: 1 }, { opacity: 1 }] }
},
tooltip: true,
tooltipOpts: {
content: '%s: %y'
},
colors: App.chartColors
}
When using $.plot(holder, data, chartOptions);, save the plot with a variable.
Declare var plot; globally,
and then call like this: plot = $.plot(holder, data, chartOptions);.
You can grab the data from the plot like this:
var datasets = [];
var xData = [];
datasets = plot.getData(); //this returns an array of all datasets
//goes through each series of data
for (var i = 0; i < datasets.length; i++){
//picks the series with label of "label 1"
if (datasets[i].label == "label 1"){
//copies x coordinates from the series into xData
for (var j = 0; j < datasets[i].data[j].length; j++){
xData.push(datasets[i].data[j][0]); //if you want y coords, use datasets[i].data[j][1]
}
}
}