admin管理员组文章数量:1389754
I'm currently trying to fetch data from blockchain.info and to display it on a Chart.js in a simple JavaScript file.
It works just fine if my xAxes type is 'linear', but in that case the labels on the x-Axis are displayed with the numeric unix timestamp.
xAxes: [{
type: 'linear',
time: {
unit: 'day',
tooltipFormat: 'lll',
}
}]
I'd prefer the labels to be displayed in days (e.g. 27 Jan 2018) or grouped by months (30 points on the chart with 1 label -> month). For that reason I changed the xAxes type to 'time', which then results in the following error:
"Uncaught Error: Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at ".
I've played around with momentjs and inclused it by the script tag. Unfortunately I wasn't able to solve the issue.
The data in my JSON looks like this:
{
"status": "ok",
"name": "Confirmed Transactions Per Day",
"unit": "Transactions",
"period": "day",
"description": "The number of daily confirmed Bitcoin transactions.",
"values": [
{
"x": 1442534400, // Unix timestamp (2015-09-18T00:00:00+00:00)
"y": 188330.0
},
...
}
Here's my plete code:
var requestURL = ';cors=true';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
var response = request.response;
drawChart(response);
}
function drawChart(jsonObj) {
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: jsonObj["values"],
datasets: [{
label: jsonObj["name"],
data: jsonObj["values"],
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'lll',
}
}]
}
}
});
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="node_modules/chart.js/dist/Chart.js"></script>
<script srx="myChart.js"></script>
<body>
<canvas id="myChart" width="100%" height="100%"></canvas>
</body>
</html>I'm currently trying to fetch data from blockchain.info and to display it on a Chart.js in a simple JavaScript file.
It works just fine if my xAxes type is 'linear', but in that case the labels on the x-Axis are displayed with the numeric unix timestamp.
xAxes: [{
type: 'linear',
time: {
unit: 'day',
tooltipFormat: 'lll',
}
}]
I'd prefer the labels to be displayed in days (e.g. 27 Jan 2018) or grouped by months (30 points on the chart with 1 label -> month). For that reason I changed the xAxes type to 'time', which then results in the following error:
"Uncaught Error: Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at https://momentjs.".
I've played around with momentjs and inclused it by the script tag. Unfortunately I wasn't able to solve the issue.
The data in my JSON looks like this:
{
"status": "ok",
"name": "Confirmed Transactions Per Day",
"unit": "Transactions",
"period": "day",
"description": "The number of daily confirmed Bitcoin transactions.",
"values": [
{
"x": 1442534400, // Unix timestamp (2015-09-18T00:00:00+00:00)
"y": 188330.0
},
...
}
Here's my plete code:
var requestURL = 'https://blockchain.info/de/charts/market-price?format=json&cors=true';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
var response = request.response;
drawChart(response);
}
function drawChart(jsonObj) {
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: jsonObj["values"],
datasets: [{
label: jsonObj["name"],
data: jsonObj["values"],
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'lll',
}
}]
}
}
});
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="node_modules/chart.js/dist/Chart.js"></script>
<script srx="myChart.js"></script>
<body>
<canvas id="myChart" width="100%" height="100%"></canvas>
</body>
</html>3 Answers
Reset to default 1In the image above you can see the data, notice that I separate it in three arrays, in the chart I have two datasets (Ingreso(x[date],y[value]), Egreso(x[date],y[vlue])) and "Label" that is the one that fills the x-Axis label. And here is how I did it !
so in the label option I fill with my label array with the dates
I run your script, works fine with some enhancements in the way that each point shows the money but since the query returns 365 elements is too much data to show in the chart, that's why I think there are overlaying labels. I noticed that each value in the array has the same date (Sat Jan 17 1970 xx:yy:zz and Sun Jan 18 1970 qq:ww:ee) but different time.. then I group the data by these dates like this:
here's the entire script.
$('#getData').on('click', function(){
var requestURL = 'https://blockchain.info/de/charts/market-price?format=json&cors=true';
var request = new XMLHttpRequest();
let newData = [], labels = [];
let sameDate = "", previousDate = "", value = 0;
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
// Group the Data by Day
request.response.values.forEach(function(item,i){
if (previousDate !== getDateFormat(moment(item.x)._d) )
{
value = 0;
value = item.y;
sameDate = getDateFormat(moment(item.x)._d);
request.response.values.forEach(function(ele, j){
if ( j > i){
if (sameDate === getDateFormat(moment(ele.x)._d)){
value+= ele.y;
previousDate = getDateFormat(moment(ele.x)._d);
}
}
});
newData.push({x:sameDate, y:value});
labels.push(sameDate);
}
});
drawChart(newData,labels);
}
function getDateFormat(momentType)
{
console.log(momentType);
return momentType.getDate()+"-"+(momentType.getMonth()+1)+"-"+momentType.getUTCFullYear();
}
function drawChart(jsonObj,label) {
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: label,
datasets: [{
label: "Average USD",
data:jsonObj}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}],
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'value'
}
}]
},
plugins: {
datalabels:{
borderRadius: 4,
color: 'black',
anchor: 'end',
align: 'end',
backgroundColor: function(context) {
return context.dataset.borderColor;
},
formatter: function(value, context){
// show the value on the point
return Number(value.y).toFixed(2);
},
}
}
}
});
}
});In addition, here's my entire script.
var requestURL = 'https://blockchain.info/de/charts/market-price?format=json&cors=true';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
var response = request.response;
drawChart(response);
}
function fillLabel(jsonObj){
var label = [];
var arr = jsonObj["values"];
arr.forEach(element => {
label.push((element.x));
});
return label;
}
function drawChart(jsonObj) {
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: fillLabel(jsonObj),
datasets: [{
label: jsonObj["name"],
data: jsonObj["values"],
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}],
xAxes: [{
type: 'time',
time: {
unit: 'second',
displayFormats: {
millisecond: 'h:mm:ss.SSS a',
second: 'D MMM',
minute: 'D MMM',
hour: 'hA',
day: 'MMM D',
week: 'll',
month: 'MMM YYYY',
quarter: '[Q]Q - YYYY',
year: 'YYYY'
},
},
display: true,
scaleLabel: {
display: true,
labelString: 'value'
}
}]
}
}
});
}
本文标签： javascriptHow to label xAxis in Chartjs by daysStack Overflow
版权声明：本文标题：javascript - How to label x-Axis in Chart.js by days? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744578929a2613798.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论