I am somewhat new to Highcharts and I am trying to pull off something that I am sure can be done but I cant figure it out.
I have posted my jsfiddle here: https://jsfiddle.net/dfeagin/1hn6c9ad/7/
Here is what the data looks like in my categories section for that axis:
categories: ['1/20/2020 9:22:02 PM', '1/20/2020 9:22:03 PM', '1/20/2020 9:22:04 PM', '1/20/2020 9:22:08 PM', '1/20/2020 9:22:09 PM', '1/20/2020 9:22:10 PM', '1/20/2020 9:22:12 PM', '1/20/2020 9:22:14 PM', '1/20/2020 9:22:15 PM', '1/20/2020 9:22:16 PM', '1/20/2020 9:22:18 PM', '1/20/2020 9:22:19 PM'.....]
On the XAxis, which represents minutes, there are a total of 46 minutes between the start to end time frame. I want to show two minute increments and just show the minute number vs. a date/time stamp:
0 2 4 6 8 10 ..... 42 44 46
How can I get it to do that? The data will have differing numbers of data points between those two minute increments but I want the 2 min intervals to be consistent.
Another note: I am generating the data that I feed to Highcharts in a .net web application so if it helps the situation I can send in a series of minute numbers vs. time/date stamps. So I could be sending over:
categories: ['0', '0', '0', '1', '1', '2', '2', '2', '2', '2', '2', '2', '3', ... '43', '43', '43', '44', '44', '45', '45', '45', '45', '45', '45', '45', '46', '46']
I think you would be better setting the chart up as spline rather than each series, with a datetime x-axis and putting data into the series as an array of date/value x/y pairs.
This way you can have more control over the xAxis ticks in this case setting tick interval to 2 minutes, and is more flexible in general.
Use a custom formatter to manipulate the tick value.
https://jsfiddle.net/gazx45oy/
Chart type:
chart: {
type: 'spline',
xAxis settings:
xAxis: [{
type: 'datetime',
startOnTick: true,
minPadding: 0,
tickInterval: 120000,
labels: {
formatter: function () {
return (this.value - this.axis.min) / 60000;
},
Series data:
var vesselSteamTemp = [
[Date.UTC(2020,20,1,9,22,2), 119],
Related
I created this simple line chart using morris.js. But it is not showing data properly. I don't know why?
Please check it at js fiddle.
Js fiddle: link
new Morris.Line({
element: 'multi-line-mp',
data: [
{
day: 'Jan 1',
sales: '0',
purchases: '1'
},
{
day: 'Jan 2',
sales: '14',
purchases: '3'
},
{
day: 'Jan 3',
sales: '45',
purchases: '0'
},
{
day: 'Jan 4',
sales: '47',
purchases: '32'
},
{
day: 'Jan 5',
sales: '90',
purchases: '10'
}
],
xkey: 'day',
ykeys: ['Sales', 'Purchases'],
labels: ['Sales', 'Purchases'],
resize: true
});
The date format of your xkey (day) is not good, this is rather a string than a real date.
You have 2 choices:
change the format of the xkey to be a real date (like 2021-01-01 instead of Jan 1)
set the option parseTime to false, so that it won't try to format the string to be a date
In case you change the format of xkey, you still can change the way the date is displayed thanks to the function dateFormat (see the documentation for this here: http://morrisjs.github.io/morris.js/lines.html)
trying to get better at making my code less dense but I'm stumped on this one. what's the best way to use a dropdown menu to choose between options 1-24, while the array is nested within an object?
I am trying to make a chrome extension to create notifications for different time functions from the local time (ie 1hr, 3hrs, 12hrs, etc)
I know it works with this array here:
var d = new Dropdown({
id: 'd',
val: 'custom:',
data: ['1 hour', '2 hours', '3 hours', '4 hours', '5 hours', '6 hours', '7 hours', '8 hours', '9 hours', '10 hours', '11 hours', '12 hours', '13 hours', '14 hours', '15 hours', '16 hours', '17 hours', '18 hours', '19 hours', '20 hours', '21 hours', '22 hours', '23 hours', '24 hours'],
cb: function cb(newval) {
alert(newval);
}
});
for the future, to avoid the rewriting of 24 separate options would this logic work? it returns the items as an array of strings with the values being updated as the first parameter, but I am not sure if it's bad practice.
let h = Array.from(Array(24).toString(),
(_hour, index) => `${[index + 2]} hours`).map(String);
const itr = h.values();
console.log(Array.isArray(h)); // outputs true
console.log(itr); // outputs {[Iterator]}
// here's where I get lost
if there's an easier way that I'm just missing please let me know. I prefer this to the html input, since I am not messing with dates in the timer, just logging the local time +n.
Use map and check to use plural or not.
const hours = new Array(24).fill(0).map((_, i) => `${i+1} hour${i > 0 ? 's' : ''}`)
console.log(hours)
You can use spread the array and then use map() on it.
const arr = [...Array(24)].map((_, i) => `${i + 1} hours`);
console.log(arr)
Is there a way to restrict the minimum zoom of plotly chart to one day?
In the tickformat of xaxis, I specified %d %b to show only day and month. If you zoom too much, the chart will show multiple ticks for one day.
I know plotly tries to zoom the axes further on the bases of time but that is not required in my case.
I have tried using tickvals and ticktexts but ended up having too many overlapping ticks as trace's x array can have values from 0 to 365 days.
var trace1 = {
x: ['2000-01-01', '2000-01-02', '2000-01-03', '2000-01-04', '2000-01-05', '2000-01-06', '2000-01-07', '2000-01-08', '2000-01-09', '2000-01-10', '2000-01-11', '2000-01-12', '2000-01-13', '2000-01-14', '2000-01-15', '2000-01-16', '2000-01-17', '2000-01-18', '2000-01-19', '2000-01-20', '2000-01-21', '2000-01-22', '2000-01-23', '2000-01-24', '2000-01-25', '2000-01-26', '2000-01-27', '2000-01-28', '2000-01-29', '2000-01-30', '2000-01-31'],
y: [4.3, 8.2, 4.1, 5.6, -3, -0.2, 0.3, 0.4, 4.1, 5, 4.6, -0.2, -8.5, -9.1, -2.7, -2.7, -17, -11.3, -5.5, -6.5, -16.9, -12, -6.1, -6.6, -7.9, -10.8, -14.8, -11, -4.4, -1.3, -1.1],
mode: 'lines',
type: 'scatter',
name: '2000'
};
var data = [ trace1 ];
var layout = {
xaxis: {
type: 'date',
title: 'January Weather',
tickformat: '%d %b'
},
yaxis: {
title: 'Daily Mean Temperature'
},
title:'2000 Toronto January Weather'
};
Plotly.plot('myDiv', data, layout);
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<div id="myDiv" style="width:100%;height:400px;"></div>
I want to have single tick for a day on maximum zoom possible. Is there a way to either restrict the zoom or to show at max one tick per day?
Thanks!
Looks like the best way is to use type: 'category' instead type: 'date'
I use Highstock to display a graph showing the number of visitors in column and I need the zoom to display the number of visitors per day, per month and per year
In my graph I can display a number of visitor per day, but I would like display a number of visitor per month and per year too.
But when I look my graph (per month) I don't have a graph with 12 column, I have a graph with 365 column (one per day).
I use the type datetime for xAxis, but it doesn't work...
x rangeSelector: {
inputDateFormat:'%d.%m.%Y',
inputEditDateFormat:'%d.%m.%Y',
buttonTheme: {
width: 80
},
buttons: [{
type: 'day',
count: 7,
text: 'day'
}, {
type: 'month',
count: 12,
text: 'month'
}, {
type: 'year',
count: 1,
text: 'years'
}],
selected: 0
},
Axis: {
minTickInterval: 24 * 3600 * 1000,
type: 'datetime',
title: {
text: 'Time'
},
dateTimeLabelFormats: {
day: '%d.%m<br/>%Y'
}
}
How can I have a graph with "a addition of the visitors per column" ?
Below is what I get now. The first graph is OK, but the second, it's not OK. I would 12 columns and not 365.
Per Days:
Per Years:
Range selector buttons affecting to the time span which should be displayed on a chart. If you want to display specific unit on a chart, you need to use forced dataGrouping, see:
http://api.highcharts.com/highstock#plotOptions.series.dataGrouping.units
http://api.highcharts.com/highstock#plotOptions.series.dataGrouping.forced
Example could be found here: http://www.highcharts.com/stock/demo/candlestick-and-volume
I'm using Highcharts/Highstock to plot a fairly large amount of data (~10,000 points). The data consists of Date objects on the X axis and floats on the Y, formatted as such: [[(date), 1.728], [(date), 0.346], ...]. The dates are always 1 hour apart and there are no gaps in the data.
When the chart's range is >= 21 days (such that at least 21 days of data is graphed), the chart appears correctly. Whenever the range is less than that, though, the chart becomes blank and the tooltip displays each point as having a Y-value of 0.0. The Y values for those points do exist in the array (I can see them in Firebug), but they aren't displayed on the chart. Here's how I'm initializing it:
mainChart = new Highcharts.StockChart({
chart: {
renderTo: 'linegraph'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1 d'
}, {
type: 'week',
count: 1,
text: '1 wk'
}, {
type: 'month',
count: 1,
text: '1 mo'
}, {
type: 'year',
count: 1,
text: '1 yr'
}, {
type: 'all',
text: 'All'
}],
selected: 2
},
series: [{
name: 'Electricity usage (kWh)',
data: graphData,
tooltip: {
valueDecimals: 2,
valueSuffix: "kWh"
}
}],
});
I had the same issue, but it was everything normal with timestamps on X axis.
Resolved it by sorting data by ascending (provided firstly in reversed order).
It turns out that you can't use Date in the X axis of your data. Instead, use the Unix timestamp of the date: Date.getTime(). Major props to FloppyDisk for pointing me in the right direction.