I am working with a line chart I am trying to get the dates to show on the x axis. It should be shown monthly. I am getting two months to show up but not 3. The first month (august) is not displaying on the x axis yet there is data plotted. Can someone help me?
This is the time_stamp being passed through.
its better you provide a sample in codesandbox, or maybe try this:
xAxes: [{
ticks: {
autoSkip: true,
maxTicksLimit: 5
},
scaleLabel: {
display: true,
labelString:[ `Issues: ${yAxisCreatedIssues.length} created and ${resolvedNumber.length} resolved. Period: last 90 days (grouped daily)`] ,
},
type: 'time',
time: {
parser: 'YYYY-MM-DD',
unit: 'month',
displayFormats: { month: 'MMM-YYYY'}
}
},
],
Related
I am making a chart displaying stock data using ChartJs (react-chartjs-2). I have a datapoint for every minute from 9:30am to 3:59pm. When I plot it, my chart looks like the image below. The points don't even remotely align with the grid. The point in the image says 10:16 but the chart positions it between 9 and 10. Why is it like this? The points should also start halfway after the 9 tick since my data starts at 9:30. Does anyone know what I can do to resolve this?
My data is in the format like x = 2023-02-15 09:30:00-05:00 and y = 226.145. I have an option that truncates what is displayed on the tick so instead of displaying the entire datetime format, it only displays the hour.
Here is some of my code:
const data = {
labels: Object.keys(stockdata),
datasets: [
{
data: Object.values(stockdata),
borderColor: "rgba(75,192,192,1)",
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: "top",
},
title: {
display: true,
text: "Chart.js Line Chart",
},
},
pointRadius: 0,
scales: {
x: {
ticks: {
callback: function (val) {
const time = parseInt(
this.getLabelForValue(val).split(" ")[1].split(":")[0] % 12
);
return time == 0 ? 12 : time;
},
maxTicksLimit: 7,
},
grid: {
color: "#303030",
},
},
y: {
grid: {
color: "#303030",
},
},
},
};
React component render:
<Line data={data} options={options} />
I assume the issue is, that your localtime has a date offset off -1 hours, but without seeing the data (and knowing the offset), I can't say for sure.
If this would be the case, you could/would have to convert your dataset values. Depending on your dataset and available libraries you could use functions like:
momentjs:
let localDate= moment.utc("2023-02-01 10:00:00")
.local()
.format("YYYY-MM-DD HH:mm:ss");
vanilajs:
let localDate = new Date(Date.UTC(2023, 1, 1, 10, 0, 0));
You would have to loop through all the x-values / dates entries, to fix this.
I am trying to make a dashboard with a time series plot with time on the x axis. I have got my date in an epoch format such as:
return {
labels: [1568160683.5443,1568161754.43038,1568162825.31646,1568163896.20253, .......]
I have then arranged the options of my chart as such:
xAxes: [
{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: "rgba(29,140,248,0.1)",
zeroLineColor: "transparent"
},
ticks: {
padding: 20,
fontColor: "#9a9a9a"
},
type: 'time',
distrubution: 'linear',
time: {
displayFormats: {
'millisecond': 'h:mm a',
'second': 'h:mm a',
'minute': 'h:mm a',
'hour': 'h:mm a',
'day': 'h:mm a',
'week': 'h:mm a',
'month': 'h:mm a',
'quarter': 'h:mm a',
'year': 'h:mm a'
},
}
}
]
I have read that js epoch parsing will require the epoch to be in milliseconds, I have tried multiplying the epoch by 1000 to get in milliseconds, but my ouptput in my chart is still wrong. When using a web epoch converter my date comes out as "Wednesday, 11 September 2019 00:11:23.544" which is the correct value but in the chart it displays the date as Jan 1970 as seen below:
Whatever I try, the date comes out as 1970. Is there a simple fix that I'm missing?
As you wrote, "multiplying the epoch by 1000 to get milliseconds" should do the trick.
I made a runnable snippet out of the few epoch values you provided. The relevant line is the following:
labels: epochs.map(e => e * 1000),
To me, the result looks fine.
const epochs = [1568160683.5443,1568161754.43038,1568162825.31646,1568163896.20253];
const values = [2, 3, 1, 2];
var canvas = document.getElementById('myChart');
new Chart(canvas, {
type: 'line',
data: {
labels: epochs.map(e => e * 1000),
datasets: [{
label: 'My Dataset',
data: values,
fill: false,
borderColor: 'red',
}]
},
options: {
responsive: true,
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
type: 'time',
time: {
unit: 'minute'
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>
I am new to the highcharts. I am using donut highchart where in the below provided link we can get the static data
http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/3d-pie-donut/
But i have a no. of data in the same format as
Highcharts.chart('container5',{
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: 'Daily Report'
},
subtitle: {
text: '3D donut'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
series: [{
name: 'Amount',
data: [$rootScope.oprep2]
}]
})
Here $rootScope.oprep2 is the data which in the array format as per the format shown / given in the demo as
in the above picture you can the line number 1025 which is in the required format.
the above pic shows the open array which contains data as unitno and amountpaid
My Query is, that the data is not displaying in the chart. So any idea, which will help me a lot. Here is the view as daily report
Here is my data
Array[11] =>
Array[2]=>
0:"001"
1:180
Array[2]=>
0:"007"
1:4570
Array[2]=>
0:"008"
1:1060
Array[2]=>
0:"026"
1:180
Each array is seperated by ,
As i have gone through your code, i see that your getting array of array, but you are assigning that data again with array which is not getting the chart. Instead of joining, separation, try to remove the array assign it directly.
data:$rootScope.oprep2
but not
data:[$rootScope.oprep2]
I'm using Chartjs and Angular(angular-chart.js) and I need a way to show my graphs in a better way. My graphs have data with too much variation:
Graph image
There are any way I can group some Ticks of the graph? Like the interval of 200 - 400 with just one Tick. Or there are any other way to deal with it?
Can you create the plunkr to reproduce this issue or you can try this,
Linear Scale config
var chartInstance = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
max: 5,
min: 0,
stepSize: 0.5
}
}]
}
}
});
I want to use KendoUI Line Graph for Angular which is not displaying X Axis Label. I tried editing the existing example where the code is as follows:
k-series="[
{ field: 'nuclear', name: 'Nuclear electricity' },
{ field: 'hydro', name: 'Hydro electricity' },
{ field: 'wind', name: 'Wind electricity' }
]
I tries changing the code as shown in some other angular chart example by KendoUI as
k-series="[{ xField: 'price', yField: 'performance' }]"
k-x-axis="{
max: 1000,
labels: { format: '${0}' },
title: { text: 'Price' }
}"
k-y-axis="{
min: 80,
labels: { format: '{0}%' },
title: { text: 'Performance Ratio' }
But it seems if your chart type is line, it doesn't recognizes k-x-axis and k-y-axis .
k-series-defaults="{ type: 'line'}"
Please provide help as how I can show x-axis values:
Link to their Angular Line Chart is as follows:
To see the information about this chart, please see
http://demos.telerik.com/kendo-ui/line-charts/angular
For Editing : http://dojo.telerik.com/iVOxo
Scatter charts, such as scatterLine use the axes configured in xAxis and yAxis. Arrays are accepted when defining multiple axes.
In your example the series type is set to line. This series type uses the categoryAxis and valueAxis. Therefore the axis configuration, as it is, will be ignored.
You should remove the field: '...' bindings and change the series type to scatterLine
k-series-defaults="{ type: 'scatterLine'}"
I hope this helps.