I need to plot some information that the X-axis is the time and the Y-axis is the a numerical value. The structure is similar to the next table,
Name Date Result
N1 9:00 88
N1 9:10 84
N1 9:16 83
N1 9:23 83
N1 9:29 85
N2 9:03 87
N2 9:07 87
N2 9:18 87
N2 9:25 86
N2 9:29 86
Thus, what I need with this example, are two independent lines that each one work with it data.
To show this info I'm using chart.js. My first idea was to use the scatter type graph, but this is not possible because it only works with numerical values. Therefore, I thought about using the line type graph, but the problem with this is that by default you can only define a single label and how you can see I need each information to be independent since they don't have to match the hours.
Is it possible to add another label? I've tried to define two lists but it doesn't work and I don't know how to deal with it.
let ctx = document.getElementById("my_chart").getContext("2d");
my_chart = new Chart(ctx, {
type: 'line',
data: {
labels: [
['9:00','9:10','9:16','9:23','9:29'],
['9:03','9:07','9:18','9:25','9:29']
],
datasets: [{
data: [88,84,83,83,85],
label: "N1",
borderColor: "#8e5ea2",
fill: false
}, {
data: [87,87,87,86,86],
label: "N2",
borderColor: "#c45850",
fill: false
}]
},
options: {
title: {
display: true,
text: 'Info'
}
}
});
EDIT: My modifications with the help of #alonas and #HeadhunterKev
This is what I have now, is not working I suppose the format is wrong but I don't know what. Maybe I need seconds? Probably is a silly question but I'm lost with this...
var sData = {
datasets: [{
label: 'Dataset1',
data: [{
x: '09:00',
y: 88
}, {
x: '09:10',
y: 89
}, {
x: '09:13',
y: 86
}, {
x: '09:23',
y: 86
}, {
x: '09:26',
y: 85
}, {
x: '09:29',
y: 83
}]
}, {
label: 'Dataset2',
data: [{
x: '09:02',
y: 88
}, {
x: '09:13',
y: 89
}, {
x: '09:14',
y: 86
}, {
x: '09:20',
y: 86
}, {
x: '09:24',
y: 85
}, {
x: '09:29',
y: 83
}]
}]
}
sData.datasets[0].data = formatData(sData.datasets[0].data)
sData.datasets[1].data = formatData(sData.datasets[1].data)
function formatData(oldData) {
var newData = []
for (var i = 0; i < oldData.length; i++) {
var currentData = {}
currentData.x = moment(oldData[i].x, "hh:mm").format('HH:mm')
currentData.y = oldData[i].y
newData.push(currentData)
}
return newData
}
var data = sData
var options = {
responsive: true,
scales: {
xAxes: [{
type: 'time',
}]
},
tooltips: {
callbacks: {
title: function(tooltipItem, data){
return moment(tooltipItem[0].label).format('hh:mm')
}
}
}
}
var ctx = document.getElementById('bateria_graf');
let chart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
Can somebody help me? Thank you very much.
You can provide data as a list of x,y:
datasets: [{
data: [{y:88,x:`${timestamp of 9:00}` },...],
...
}, {
data: [{y:87, x:`${timestamp of 9:03}`},...],
...
}]
like here https://www.chartjs.org/docs/latest/charts/line.html#point
And then in options define how to display the x value (timestamp) as hour:minutes
{
scales: {
xAxes: [{
ticks: {
callback = (label, index, labels) => {
return moment.unix(label).format('HH:mm');
}
}
}]
}
}
Related
I am trying to make a chart which has years along the x-axis and dollar amounts along the y-axis. I finally got close to what I'm looking for, but I found that because the x coordinates are numbers, ChartJS is putting commas in them which looks really strange for years.
After some digging, I used the callbacks. options.plugin.tooltip.callbacks.label worked to let me remove commas in the tooltips, but when I use options.scales.x[0].ticks.callback to try to fix the labels on the bottom, not only does it not work, but I don't see the console.log statement in their ever being printed so it seems it's not even calling the callback. I've tried several variations of how to do the callback based on what I found online and on Stack Overflow which I think correspond to the different ways ChartJS did this in different versions. (I'm on version 3.5.1.)
Then, I realized that... none of the options under options.scales appear to have any effect. I change the min, the title, the tick settings (color to red, callback, etc.) and it has no effect. (This also explains why I was having trouble when using the line chart and had to switch to scatter; apparently type: 'linear' wasn't being picked up nor did it do anything different when I set it to type: 'date' or whatever the exact working was for that.)
Meanwhile, the other options like options.showLine or options.elements do have an effect and I'm seeing the chart and not getting any errors in the console. So, it is picking up the options, just ignoring everything I have in options.scales.
Here is the relevant code:
// Sample data added to make this example self-contained
// This is my internal data format
let data = {
"Series1": [ {x: 2001, y: 100 }, {x: 2002, y: 110 }, {x: 2003, y: 107 }, ],
"Series2": [ {x: 2001, y: 107 }, {x: 2002, y: 102 }, {x: 2004, y: 95 }, ],
}
// Define data //////////////////////////////////////////////////////
// I convert data to format ChartJS wants and add a few options
let datasets = [];
for(let label in data) {
let c = colorIterator.next().value
datasets.push({
label: label,
data: data[label],
backgroundColor: c,
borderColor: c,
});
}
// Define options //////////////////////////////////////////////////////
let chartConfig = {
type: 'scatter',
data: { datasets: datasets, },
options: {
title: { display: false },
indexAxis: 'x', responsive: true, maintainAspectRatio: false,
showLine: true,
elements: {
line: { display: true, tension: 0, borderWidth: 1, fill: false, },
point: { radius: 3 }
},
interaction: { mode: 'x', },
scales: {
x: [{
type: 'linear',
min: 1995, max: (new Date()).getFullYear()+1, stepSize: 1,
title: { display: true, text: 'Year' },
ticks: {
display: true,
major: { enabled: true },
color: 'red',
callback: function(value, index, ticks) {
console.log(value);
return Chart.Ticks.formatters.numeric.apply(this, [value, index, ticks])
.replace(",","");
}
}
}],
y: [{
title: { display: true, text: '$' },
ticks: {
display: true,
color: 'red',
},
}],
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if(label) {
let x = context.label.replace(",","");
let y = context.formattedValue;
return 'Year ' + x + ' "' + label + '": $' + y;
} else { return 'x'; }
},
},
},
},
}
};
// MAKE CHART //////////////////////////////////////////////////////
let mainChart = new Chart(document.getElementById(c.id), chartConfig);
As described in the docs the scales are not arrays. All the scales are objects in the scale object.
So you will need to change your code to this:
options: {
scales: {
x: {
// x options
},
y: {
// y options
},
}
}
the issue I have now is that I'm trying to use objects in the "data" field of my Chartjs script. This is my code below:
<canvas id="QGL_Chart"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script>
var interval = window.onload = () => {
var selectedDate;
const buyPriceData = [];
const buyVolData = [];
const sellPriceData = [];
const sellVolData = [];
var ctx = document.getElementById("QGL_Chart").getContext('2d');
ctx.canvas.width = 934;
ctx.canvas.height = 400;
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Line A',
data: [{
x: 90,
y: 90
}, {
x: 20,
y: 96
}, {
x: 15,
y: 97
}]
},
{
label: 'Line B',
data: [{
x: 10,
y: 96
}, {
x: 20,
y: 95.8
}, {
x: 100,
y: 99
}]
}
]
},
options: {
title: {
display: true,
text: 'Equilibrum Graph',
fontSize: 18
},
legend: {
display: true,
position: "bottom"
},
scales: {
xAxes: [{
ticks: {
reverse: false,
// stepSize: 6,
min: 0
}
}]
}
}
});
function refreshCurveData () {
selectedDate = document.querySelectorAll(".buyclass .column-date.sorting_1")[1].textContent;
buyPriceTable = document.querySelectorAll(".buyclass td.column-price");
buyVolTable = document.querySelectorAll(".buyclass td.column-volume");
sellPriceTable = document.querySelectorAll(".sellclass td.column-price");
sellVolTable = document.querySelectorAll(".sellclass td.column-volume");
let i = 0;
do {
var buyPriceData1 = buyPriceTable[i].textContent;
var buyVolData1 = buyVolTable[i].textContent;
var sellPriceData1 = sellPriceTable[i].textContent;
var sellVolData1 = sellVolTable[i].textContent;
buyPriceData[i] = `{x: ${buyPriceData1}, y: ${buyVolData1}}`
sellPriceData[i] = `{x: ${sellPriceData1}, y: ${sellVolData1}}`
//buyPriceData[i] = buyPriceData[i].replace(/"/g, "");
//sellPriceData[i] = sellPriceData[i].replace(/"/g, "");
// buyPriceData.push ({ x: buyPriceData1, y: buyVolData1 });
// sellPriceData.push ({ x: sellPriceData1, y: sellVolData1 });
i++;
}
while ( document.querySelectorAll(".column-date.sorting_1")[i].textContent == selectedDate && i < 9);
}
setInterval(() => {
refreshCurveData();
myChart.update();
},2500);
};
</script>
When I replace the codes in the "data" fields with buyPriceData and sellPriceData respectively, the graph does not visualize, I also tried doing:
data: {
datasets: [{
label: 'Line A',
data: Object.values(buyPriceData)
},
{
label: 'Line B',
data: Object.values(sellPriceData)
}
]
},
But I still have the same problem, please can someone help me with this?
I've created a pen here: https://codepen.io/scottfranc/pen/BaLGwZK
Thank you.
it looks like you are saving a String in buyPriceData. It looks like it should be an object
Maybe try this:
buyPriceData[i] = { x: buyPriceData1, y: buyVolData1 };
and then do the same for sellPriceData
There are multiple charts on one page.
Each chart line is common.
I want to display a legend that is common to multiple charts like the figure.It shows and hides all chart lines with OnClick like the default legend.
THIS PICT IS FAKE
Is that possible? how?
I had tried Chart.js sync legend toggle on multiple charts, One legend, multiple charts Chart JS and etc.
But, those solutions have one chart with legend, and that legend affects other charts.
Should I hide the chart and show only the legend?
Should I draw a chart with no data?
I would be grad if you could tell me
HTML
<script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js"></script>
<div>
<canvas id="myChartA"></canvas>
</div>
<div>
<canvas id="myChartB"></canvas>
</div>
JS
var ctxA = document.getElementById("myChartA").getContext("2d");
var ctxB = document.getElementById("myChartB").getContext("2d");
let data_A1 = [{
x: "2019-01-01 00:01:38",
y: "13.0"
},
{
x: "2019-01-01 01:01:39",
y: "11.0"
},
{
x: "2019-01-01 02:01:40",
y: "16.0"
},
{
x: "2019-01-01 03:01:41",
y: "15.0"
},
{
x: "2019-01-01 04:01:42",
y: "14.0"
}
];
var data_A2 = [{
x: "2019-01-01 00:01:42",
y: 14.671
}, {
x: "2019-01-01 01:01:42",
y: 13.691
}, {
x: "2019-01-01 02:01:42",
y: 16.691
}, {
x: "2019-01-01 03:01:42",
y: 17.691
}, {
x: "2019-01-01 04:01:42",
y: 18.691
}];
let data_B1 = [{
x: "2019-01-02 00:01:38",
y: "12.0"
},
{
x: "2019-01-02 01:01:39",
y: "11.0"
},
{
x: "2019-01-02 02:01:40",
y: "13.0"
},
{
x: "2019-01-02 03:01:41",
y: "14.0"
},
{
x: "2019-01-02 04:01:42",
y: "16.0"
}
];
var data_B2 = [{
x: "2019-01-02 00:00:00",
y: 14.671
}, {
x: "2019-01-02 01:01:42",
y: 13.691
}, {
x: "2019-01-02 02:01:42",
y: 16.691
}, {
x: "2019-01-02 03:01:42",
y: 15.691
}, {
x: "2019-01-02 04:01:42",
y: 14.691
}];
var myChartA = new Chart(ctxA, {
type: 'line',
data: {
datasets: [{
label: '1st Data',
data: data_A1,
borderColor: '#0f0',
showLine: true
}, {
label: '2nd Data',
data: data_A2,
borderColor: '#f00',
showLine: true
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
displayFormat: 'h:mm',
}
}]
}
}
});
var myChartB = new Chart(ctxB, {
type: 'line',
data: {
datasets: [{
label: '1st Data',
data: data_B1,
borderColor: '#0f0',
showLine: true
}, {
label: '2nd Data',
data: data_B2,
borderColor: '#f00',
showLine: true
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
displayFormat: 'h:mm',
}
}]
}
}
});
You can create a common legend and through generateLegend api, if both the datasets are similar.
First disable the default legends though the options
legend: {
display: false
}
Then use generateLegend() api to get the data labels and set it to a common element.
<ul class="legend">
</ul>
Then add event listeners to the generated elements and target all the charts
document.querySelector('.legend').innerHTML = myChartA.generateLegend();
var legendItems = document.querySelector('.legend').getElementsByTagName('li');
for (var i = 0; i < legendItems.length; i++) {
legendItems[i].addEventListener("click", legendClickCallback.bind(this,i), false);
}
function legendClickCallback(legendItemIndex){
document.querySelectorAll('.myChart').forEach((chartItem,index)=>{
var chart = Chart.instances[index];
var dataItem = chart.data.datasets[legendItemIndex]
if(dataItem.hidden == true || dataItem.hidden == null){
dataItem.hidden = false;
} else {
dataItem.hidden = true;
}
chart.update();
})
}
A sample pen is present here
https://codepen.io/srajagop/pen/yLBJOOo
Note I am using chartjs 2.8
If anyone using React version of Chartjs particularly react-chartjs-2, I have done it using React Hooks with react-chartjs-2, see the sandbox demo
I would like to create a function that I can send data to push to my line chart. My function currently looks like this:
function addData(label, xp1, yp1, xp2, yp2) {
chart.data.labels.push(label);
chart.data.datasets.data.push({x: xp1, y: yp1}, {x: xp2, y: yp2});
chart.update();
}
label is a string
xp1, xp2, yp1, yp2 are doubles
I am running a loop that will execute this function. Nothing happens and my chart remains blank.
I have looked at the Chart.js docs and it doesn't seem to be helpful for my situation and it appears they have errors in their example code
This is my starting code:
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [''],
datasets: [{}]
},
options: {}
});
This is what I expect it to look like once it's filled in:
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['a', 'b', 'c'],
datasets: [{
label: 'a',
fill: false,
data: [
{
x: 0,
y: 9
}, {
x: 3,
y: 9
}
]
},
{
label: 'a',
fill: false,
data: [
{
x: 3,
y: 7
}, {
x: 5,
y: 7
}
]
},
{
label: 'c',
fill: false,
data: [
{
x: 5,
y: 5
}, {
x: 10,
y: 5
}
]
}]
},
options: {}
});
You need to change your function this way:
function addData(label, xp1, yp1, xp2, yp2) {
chart.data.labels.push(label);
chart.data.datasets.push([{ label: label, fill: false, data: [ {x: xp1, y: yp1}, {x: xp2, y: yp2} ] }]);
chart.update();
};
You can directly access your data and update contents with:
chart.data.datasets[0].data.push( {x:5, y:2} ,{x:10, y:12},...,{x:50, y:25} );
which is easier if your want to maintain the series paint/color settings.
I am trying to create a line plot from the json response from a webApi. I would like to create a time point dataset which looks like below:
var adddata = {
datasets: [{
label: "a",
backgroundColor: "rgba(255,0,0,0.5)",
fill: false,
data: [{
x: newDateString(0),
y: 22
}, {
x: newDateString(2),
y: 25
}, {
x: newDateString(4),
y: 12
}, {
x: newDateString(5),
y: 22
}],
}, {
label: "b",
backgroundColor: "rgba(0,255,0,0.5)",
fill: false,
data: [{
x: newDate(0),
y: 34
}, {
x: newDate(1),
y: 22
}, {
x: newDate(4),
y: 2
}, {
x: newDate(5),
y: 13
}]
}]
};
Now if I have a json which looks like:
{"Values":{"2018-01-17 09:24:34":"0","2018-01-17 09:24:31":"0","2018-01-17 09:24:33":"0","2018-01-17 09:24:35":"0"}}
Would it be possible to create a data set defining individual points?
You can parse your JSON string and transform resulting json object to dataset like below:
var json_str = '{"Values":{"2018-01-16 09:24:34":"10","2018-01-16 19:24:31":"5","2018-01-17 09:24:33":"8","2018-01-18 09:24:35":"9"}}'
var json = JSON.parse(json_str);
var data = [];
for (var d in json.Values) {
console.log(d, json.Values[d]);
data.push({
x : new Date(d),
y : json.Values[d]
})
}
var dataset = {
label : "c",
backgroundColor : "rgba(0,0,255,0.5)",
borderColor : 'green',
fill : false,
data : data
};
// add to existing datasets
adddata.push(dataset);
So this is the result: https://jsfiddle.net/beaver71/mfvc9p9x/