I am not too sure why my chart x axis plots all the ticks as 01-1970.
Plotting the chart
xAxis: {
type: 'time',
labels: {format: '{value:%m-%Y}'},
title: {text: 'Date'},
distribution: 'linear',
accessibility: {rangeDescription: 'Range: 1 to 20'},
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 1572566400
}
Defining the dates
const fromDate= '1572651390'
const toDate = '1674749890'
Obtaining finance data
elementList.map((element) => fetch(`https://finnhub.io/api/v1/stock/candle?symbol=${element}&resolution=D&from=${fromDate}&to=${toDate}&token=${token}`)
.then((response) => response.json())
.then((data) => list.push(data['c'])))
TIA - would welcome any suggests
Related
I am trying to use this chart to display my data - https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/spline-irregular-time
My data looks like this on the backend -
My chart looks like this
Notice the date on the x-axis is wrong and the date on the label always says 1 Jan for all datapoints. How do I fix this such that the date on the label and x-axis is correct. Here is my JS code
var credit = '<?php echo (isset($credit))?$credit:0; ?>'
Highcharts.chart('transactionId', {
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
series: {
marker: {
enabled: true
}
}
},
colors: ['#6CF', '#39F', '#06C', '#036', '#000'],
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
series: [{
name: "Winter 2016-2017",
data: JSON.parse(credit)
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
plotOptions: {
series: {
marker: {
radius: 2.5
}
}
}
}
}]
}
});
The problem is the date format 2020-12-13. Passing a date string directly doesn't work. You have to convert to Date.UTC(year, month, day) format.
So your credit array should look like this when passing to chart config.
credit = [
[Date.UTC(2020, 12, 13), 5000],
[Date.UTC(2020, 12, 19), 50000],
...
]
I want to change the format of data from hours to percentages in the pie chart.
Im pretty new to javascript and this is part of a code im not the author of.
let diagramme = new Chart(canevas, {
type: 'pie',
data: {
labels: axe.composantes.map(c => c.id.toString()),
datasets: [{
data: array_lapse, // axe.composantes.map(c => c.duree) // remplacer le format HH:MM -> %
backgroundColor: couleursDiagramme
}]
},
options: {
rotation: Math.PI,
legend: {
display: false
},
tooltips: {
callbacks: {
label: (item, data) => formatValToLabel(data.datasets[item.datasetIndex].data[item.index])
}
},
plugins: {
datalabels: {
color: '#FFF',
font: {
size: 14,
weight: 'bold'
},
formatter: (val, context) => (val <= 0? '' : formatValToLabel(val))
}
},
}
})
It was the formatValToLabel() function that was formatting the values.
I'm currently attempting to use Chart.JS to create a line graph, displaying brightness percentages (0-100%) of an LED over 24H.
I'm trying to configure the chart to have set X and Y axis scales.
I need the X axis to display every hour (0,1,2,3... 21,22,23,24), and the Y axis to display values up to 100, going up by 10 (0,10,20... 90,100). I'm unsure how to get it to work. So far I've tried "unitStepSize: 1" and "min: 00:00" + "max: 24:00" as below, but these do not work in the way I had hoped. How can I get this graph to display correctly? Here's my code:
var labels = result.map(e => moment(e.x, 'HH:mm'));
var data = result.map(e => +e.y);
var ctx = document.getElementById("chart").getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'White',
data: data,
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
format: "H:mm",
unit: 'hour',
unitStepSize: '1',
tooltipFormat: "H:mm A",
displayFormats: {
hour: 'H',
min: '00:00',
max: '24:00',
}
}
}]
},
}
});```
under options / scale try something like this: --> see yAxes
options: {
responsive: true,
legend: {
position: 'bottom',
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
max: 100
}
}]
...
}
I'm trying to make a line chart using Chart.js. My data is of the form:
var result = [{x:"18:00",y:"230"},{x:"19:00",y:"232"},{x:"20:00",y:"236"},{x:"22:00",y:"228"}];
Where x represents the time with hours and minutes. I fed the data like this
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00","24:00"],
datasets: [{
label: 'Voltage Fluctuation',
data: result,
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
position: 'bottom',
unit: 'minute',
time: {
displayFormats: {
hour: 'HH:mm'
}
}
}],
},
}
});
And I'm getting an empty chart. Where am I going wrong? I feel I'm doing something wrong with my labels since they don't show up on the chart but I don't understand how. Is there any way I can feed datalabels with momentjs?
You cannot just pass the result array to data, as it isn't in correct format. data property expects an array of numbers. So, you need to parse the labels (using moment.js) and data from result array before using them for the chart.
Here is how labels and data should be parsed from the result array and fed to the chart :
var result = [{ x: "18:00", y: "230" }, { x: "19:00", y: "232" }, { x: "20:00", y: "236" }, { x: "22:00", y: "228" }];
// parse labels and data
var labels = result.map(e => moment(e.x, 'HH:mm'));
var data = result.map(e => +e.y);
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Voltage Fluctuation',
data: data,
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'hour',
displayFormats: {
hour: 'HH:mm'
}
}
}]
},
}
});
<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.6.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>
I am passing a Json to highcharts
json: {"0":[{"name":"normal","data":["1647","270905","412080","13609","17062","20889","16","765097","13424","14","2044","630686","104019","3097","733","1462"]},{"name":"rft","data":[1300177,4599692,957739,4177103,3436151,3752121,1978772,1850918,2538336,521542,2951953,4108915,1516107,3329831,661657,3447965]}]}
and used this code to breakdown and passing to highcharts:
series: [{
data: (function() {
var chart_data =[];
$.each(obj[0], function (index, value) {
var arra=[];
// alert(value['name'])
arra['name']=value['name'];
arra['data']=[];
//alert(value['data'].length);
$.each(value['data'],function(ind,val){
arra['data'].push(parseInt(val));
});
//console.log(arra);
chart_data.push(arra);
});
return chart_data ;
})()
}]
but not working....
var arra=[];
// alert(value['name'])
arra['name']=value['name'];
This code shows you are treating an array (only number indices) as an object (string index). Try using:
var arra={};
// alert(value['name'])
arra['name']=value['name'];
First construct your JSON Data to exclude the keys "0" and "1" if that will be possible. Once done you can plot your graph as can be seen on this JSFiddle
var obj=[{"name":"normal","data":["1647","270905","412080","13609","17062","20889","16","765097","13424","14","2044","630686","104019","3097","733","1462"]},{"name":"rft","data":[1300177,4599692,957739,4177103,3436151,3752121,1978772,1850918,2538336,521542,2951953,4108915,1516107,3329831,661657,3447965]}];
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
series: (function(){
return obj;
})()
});
});
But if your JSON Data must be as it is currently, then you can change series to:
series: (function(){
return obj[0];
})()