Trying to use plotly js to make a plot of dates, but for some reason it is showing time and date.
How can I remove time from this plot? Thanks!
x = ["2023-02-13", "2023-02-14"];
y = [3, 4];
var trace1 = {
type: "scatter",
mode: "lines",
name: '',
x: x,
y: y,
line: {color: '#17BECF'}
}
var layout = {
xaxis: {
type: 'date',
},
title: '',
};
var data = [trace1];
Plotly.newPlot('plotDiv', data, layout);
We can specify the tickformat in the xaxis of the layout with tickformat: '%b %d, %Y' to avoid including the time. And to avoid having the same date repeat on multiple ticks for the same day, we can also set the distance between ticks to be 1 day using dtick: 86400000.0 (which will be in units of seconds according to the documentation).
The codepen can be viewed here.
var layout = {
xaxis: {
type: 'date',
tickformat: '%b %d, %Y',
dtick: 86400000.0
},
title: '',
};
Related
In the following code, if I choose scatter3d instead of scatter, all parameter tickformat and title inside xaxis are completely ignored, and it is impossible to format anything under any axis.
Any suggetion would be appreciated.
Failing 3D Plot with outrageous date format
Working Plot with proper HH:MM:SS Format
function setup_plot(){
type='scatter';
var x=[],x0=new Date();
for (i=0;i<5;i++){
x[i]=new Date();
x[i].setTime(x0.getTime()+i*12*3600000);
}
var trace = [
{
type: type,
mode: 'lines',
x: x,
y: [1.0,1.0,1.0,1.0,1.0],
z: [2.6,1.2,6.3,4.8,4.7]
},
{
type: type,
mode: 'lines',
x: x,
y: [2.0,2.0,2.0,2.0,.0],
z: [3.1,2.6,4.8,3.8,1.7]
}
];
var layout = {
title: "Failing Plot",
xaxis:{
title:'Dates',
tickformat: '%H:%M:%S',
tickformatstops: [
{
dtickrange: [1000,60000],
value: '%H:%M:%S'
},
{
dtickrange: [60000,3600000],
value: '%H:%M:%S'
},
{
dtickrange: [3600000,86400000],
value: '%H:%M:%S'
},
{
dtickrange: [86400000,604800000],
value: '%d'
}
]
}
};
Plotly.newPlot('plot',trace,layout);
}
For 3d charts, axis layouts have to be provided within a scene, so
const layout = {
scene: {
xaxis: {
title: 'Dates',
...
}
}
}
See https://plotly.com/javascript/3d-axes/
I have a dataset that has data something like this
var data =[10,30,20,50,80,60,120,40,20,90,30,10];
var labels = [moment("12:00:00", 'HH:mm:ss'),moment("12:00:01", 'HH:mm:ss'),moment("12:00:02", 'HH:mm:ss'),moment("12:00:03", 'HH:mm:ss')];
I fed the data to chartJS like this
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Voltage Fluctuation',
data: [10,20,30,40,50],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'minute',
displayFormats: {
hour: 'HH:mm:ss'
}
}
}]
},
}
});
However, I'm only getting data for the first four points i.e for each label.
Here's the JSFiddle
I want the data to be distributed for all the labels, in this case one data point for every (4/12)seconds and adjust the graph accordingly.
Is there any possible way I can achieve that without hardcoding it by converting the labels to milliseconds format?
I went ahead and hardcoded the entire thing by chopping seconds into milliseconds in order to create arrays of equal length
is it possible to set highcharts to show data only in specific time range, like 2 hours for example, without any zooming.
For example at the beginning i have data for 2 hours from now. And is it possible not to show some points if they do not fit 2 hours from now?
for example, on the highcharts x-axis labels will be always constant like: [12:00, 12:30, 13:00, 13:30, 14-00] even without any data that is related with this time.
And when the new data comes, labels of time shift to new values like: [12:30, 13:00, 13:30, 14:00, 14:30]
I tried to do like:
this.chart = new Highcharts.Chart({
chart: {
reflow: false,
type: 'line',
renderTo: newSensor.get('id')
},
title: {
text: newSensor.get('name')
},
xAxis: {
minRange : 1
},
yAxis: {
title: {
text: 'Values'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: dataToChart,
plotOptions: {
series: {
lineWidth: 1,
turboThreshold: 0,
threshold: null
}
}
});
But minRange is not right property for this.
I think you should set min and max for xAxis. Then, when new point is added (using addPoint() ) you should set new extremes using
chart.xAxis[0].setExtremes( newMin, newMax )
Updated substantially to make my question more clear (I hope). I have data that I'm charting in columns to show change by year, and a sort of drill down that I'd like to put on a second X-axis to show the breakdown in the last year. If I do this:
var yearbyyear = [
[2002, 591856],
[2003, 839446],
[2004, 848463],
[2005, 1034755],
[2006, 1569442],
[2007, 1484477],
[2008, 2280282],
[2009, 3261702],
[2010, 4132972],
[2011, 5321516]
];
function createSeries(data, yAxisIndex) {
var i;
var series = [];
for (i = 0; i < data.length - 1; i++) { // Node length-1
var start = data[i];
var end = data[i + 1];
series.push({
yAxis: yAxisIndex
});
}
return series;
}
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: [{
min: 2002,
tickInterval: 1
}, {
offset: 0,
labels: false,
left: 400,
width: 100
}],
plotOptions: {
column: {
stacking: 'normal',
}
},
series: [{
xAxis: 0,
name: 'Year over Year',
data: yearbyyear
}, {
xAxis: 1,
name: 'Top Stack',
data: [2011, 2770158]
}, {
xAxis: 1,
name: 'Next Stack',
data: [2011, 2551358]
}]
};
var chart = new Highcharts.Chart(options);
The chart is fully fluid, but the series all overlap. I can keep them from overlapping, but only by giving the first chart an explicit width, and the second an x-offset to accommodate that width. Is there a way I can keep that fluidity but keep the second x-axis to the right of the first?
A commenter here pointed out that I can fudge the chart by putting the drilldown at 2012 on the same x-axis but I don't love the idea of introducing inaccuracy, even under the hood, by saying the data belongs to 2012 when it is definitely 2011 numbers.
$(function () {
$('#container').highcharts({
chart: {
showAxes : true,
type: 'line',
marginRight: 130,
marginBottom: 25
},
tooltip: {
crosshairs: [true],
shared : true
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
type :'datetime',
tickInterval : 12*30*24*3600* 1000,
min : Date.UTC(2011, 0, 1),
max : Date.UTC(2020, 0, 1),
label : {
align : 'left'
}
},
yAxis: {
title: {
text: 'PRICE Rs. / SQ.FT.'
},
lineWidth: 2,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: [{
data:[2165,1831,2798,2200,2237,2799,2400,2500,2865,2850]
}]
});
});
My x-axis having Years and data series having information which i want to show on Y axis.
When i remove the interval from 2010 to 2022 i . e comment min and max option highcharts draws a graph starting from 1970 , but no points afterwards.
http://jsfiddle.net/R8kx7/3/ here is the link
Based on your comments to #SteveP answer, if you don't want to explicitly pair x values to each y for each series, use the plotOptions.series pointStart and pointInterval properties.
plotOptions: {
series: {
pointStart: Date.UTC(2011, 0, 1),
pointInterval : 12*30*24*3600* 1000
}
},
series: [{
data:[2165,1831,2798,2200,2237,2799,2400,2500,2865,2850]
}]
Updated fiddle here.
Although you are specifying min and max, your data has no x values specified, so it is assuming that the date time values are starting at 0. There are several ways to render the chart you want.
Firstly, you could specify x values in your data points e.g.
{x:Date.UTC(2011, 0, 1),y:2165}
Another way is to not use a datetime axis type, and just specify the categories you want in the x-axis:
categories:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
The second option is probably a bit simpler http://jsfiddle.net/K6xxz/