Related
Highcharts noob here, making a bit of progress.
Using a basic example from HC, I have this partly working but:
a) how do I format the x-axis so the actual date/time from the table appears for each y?
b) how do I make that date show in the tool-tip?
SO tells me I am trying to paste too much code and not enough discussion here so I have put it all on jsfiddle. (Apologies if I haven't learned how to work with this problem in posting.)
Partial code for only the highcharts js; data table & html can be seen on the fiddle:
<html>
<head>
(snip: see fiddle for all the JS headers)
<script type="text/javascript">
$(function() {
Highcharts.chart('container', {
data: {
table: document.getElementById('datatable'),
startRow: 0,
endRow: 10
},
chart: {
type: 'spline'
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%a, %e-%b; %H:%M', this.value);
}
}
},
title: {
text: 'Tides for: Cundy Harbor, New Meadows River, Casco Bay, Maine'
},
yAxis: {
title: {
text: 'Height of tide<br>in feet.'
},
gridLineColor: '#197F07',
gridLineWidth: 0,
lineWidth:1,
plotLines: [{
color: '#FF0000',
width: 1,
value: 0
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.point.y + ' ft.<br>' + this.point.name;
}
}
});
});
</script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"> </div>
<div>
<table id="datatable">
<thead>
<tr>
<th>Test</th>
<th>Height of Tide</th>
</tr>
</thead>
<tbody>
<tr><th>Monday, Sep 23 2019 18:32</th><td>9.4</td></tr>
<tr><th>Tuesday, Sep 24 2019 01:01</th><td>0.5</td></tr>
<tr><th>Tuesday, Sep 24 2019 07:20</th><td>8.3</td></tr>
<tr><th>Tuesday, Sep 24 2019 13:17</th><td>1.0</td></tr>
<tr><th>Tuesday, Sep 24 2019 19:38</th><td>9.7</td></tr>
<tr><th>Wednesday, Sep 25 2019 02:05</th><td>0.1</td></tr>
<tr><th>Wednesday, Sep 25 2019 08:24</th><td>8.8</td></tr>
<tr><th>Wednesday, Sep 25 2019 14:21</th><td>0.6</td></tr>
<tr><th>Wednesday, Sep 25 2019 20:41</th><td>10.1</td></tr>
<tr><th>Thursday, Sep 26 2019 03:05</th><td>-0.4</td></tr>
<tr><th>Thursday, Sep 26 2019 09:22</th><td>9.4</td></tr>
</tbody>
</table>
</div>
</body>
</html>
``
[jsfiddle here][1]
[1]: https://jsfiddle.net/splobsterman/nzd851au/5/
In your case category axis type seems to be a better choice:
xAxis: {
type: 'category'
}
Live demo: http://jsfiddle.net/BlackLabel/1qv5b48o/
API Reference: https://api.highcharts.com/highcharts/xAxis.type
I am using moment to set/change the timezone of my date object and not any other date/time value
This is what I am presently doing :
const moment = require("moment-timezone");
const dateNew = moment.tz(accountDate, "US/Pacific");
This is the accountDate value: Mon Jul 08 2019 06:05:22 GMT-0400 (Eastern Daylight Time)
I want to change it to: Mon Jul 08 2019 06:05:22 GMT-0700 (Pacific Daylight Time)
but the dateNew is still in EDT timezone.
the output of `console.log(dateNew)` is :
Moment {_isAMomentObject: true, _i: Mon Jul 08 2019 06:05:22 GMT-0400 (Eastern Daylight Time), _isUTC: true, _pf: {…}, _locale: Locale, …}
_d: Sun Jul 07 2019 23:05:22 GMT-0400 (Eastern Daylight Time) {}
_i: Mon Jul 08 2019 06:05:22 GMT-0400 (Eastern Daylight Time) {}
_isAMomentObject: true
_isUTC: true
_isValid: true
_locale: Locale {_calendar: {…}, _longDateFormat: {…}, _invalidDate: "Invalid date", ordinal: ƒ, _dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/, …}
_offset: -420
_pf: {empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -2, charsLeftOver: 0, …}
_z: Zone {name: "US/Pacific", abbrs: Array(186), untils: Array(186), offsets: Array(186), population: 15000000}
__proto__: Object
but console.log(new Date(dateNew)) gives the following output.
Mon Jul 08 2019 06:05:22 GMT-0400 (Eastern Daylight Time)
Kindly help. Thanks
You are indeed changing the timezone, everything is working fine, just add a format(), I don't have enough reputation to comment this yet, lol, but why are you using Date(), just stick to moment()
const dateNew = moment.tz(accountDate, "US/Pacific").format();
console.log(dateNew)
Since you included reactjs tag. I will give you an answer in react.js way. You could install npm package named moment-timezone to solve this. Please take a look in their docs as well. Here is a full example in React
import React, { Component } from "react";
import ReactDOM from "react-dom";
import moment from "moment-timezone";
import "./styles.css";
class App extends Component {
render() {
const _date = "Mon Jul 08 2019 06:05:22 GMT-0400 (Eastern Daylight Time)";
const result = moment.tz(_date, "US/Pacific");
return (
<div>
<p>Origin Date : {_date}</p>
<p>
Converted Date : {result.format()} {result.tz()}
</p>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
The above code will results like this
I'm posting it as another answer so I can add it as code #Tanu
const accountDate = 'Mon Jul 08 2019 06:05:22 GMT-0400 (Eastern Daylight Time)'
const dateNew = moment(accountDate).tz('US/Pacific')
console.log(dateNew.format('ddd MMM DD YYYY HH:mm:ss [GMT]ZZ zz'))
//OUTPUT: Mon Jul 08 2019 03:05:22 GMT-0700 PDT
Additionally, you can add change the abbreviations like this and add a parenthesis with some other square brackets:
var abbrs = {
EST : 'Eastern Standard Time',
EDT : 'Eastern Daylight Time',
CST : 'Central Standard Time',
CDT : 'Central Daylight Time',
MST : 'Mountain Standard Time',
MDT : 'Mountain Daylight Time',
PST : 'Pacific Standard Time',
PDT : 'Pacific Daylight Time',
};
moment.fn.zoneName = function () {
var abbr = this.zoneAbbr();
return abbrs[abbr] || abbr;
}
So the output would now bew:
console.log(dateNew.format('ddd MMM DD YYYY HH:mm:ss [GMT]ZZ [(]zz[)]'))
Mon Jul 08 2019 03:05:22 GMT-0700 (Pacific Daylight Time)
I'm using ChartJS and I'd like to highlight all Saturdays and Sundays as a different colour - I'd also light to highlight the highest and lowest values in the chart.
Is this possible?
Fiddle so far:
http://jsfiddle.net/3wku56Lq/
new Chart(document.getElementById("myChart"), {
type: 'bar',
data: {
labels: ['14 May 2019 (Tue)', '15 May 2019 (Wed)', '16 May 2019 (Thu)', '17 May 2019 (Fri)', '18 May 2019 (Sat)', '19 May 2019 (Sun)', '20 May 2019 (Mon)', '21 May 2019 (Tue)', '22 May 2019 (Wed)', '23 May 2019 (Thu)', '24 May 2019 (Fri)', '25 May 2019 (Sat)', '26 May 2019 (Sun)', '27 May 2019 (Mon)', '28 May 2019 (Tue)', '29 May 2019 (Wed)', '30 May 2019 (Thu)', '31 May 2019 (Fri)', '01 Jun 2019 (Sat)', '02 Jun 2019 (Sun)', '03 Jun 2019 (Mon)', '04 Jun 2019 (Tue)', '05 Jun 2019 (Wed)', '06 Jun 2019 (Thu)', '07 Jun 2019 (Fri)'],
datasets: [{
data: [25738, 25261, 25499, 24178, 12400, 13356, 26033, 26588, 25018, 22972, 21702, 11232, 11617, 14308, 24212, 23949, 23708, 21511, 11545, 13836, 25536, 26824, 0, 0, 0],
label: "Impressions",
backgroundColor: 'rgb(199, 199, 199, 0.7)',
borderColor: 'rgb(199, 199, 199)',
fill: true
}
]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var value = data.datasets[0].data[tooltipItem.index];
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(',');
return value;
}
} // end callbacks:
}, //end tooltips
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
userCallback: function(value, index, values) {
// Convert the number to a string and splite the string every 3 charaters from the end
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(',');
return value;
}
}
}],
xAxes: [{
ticks: {
}
}]
}
}
});
You can highlight weekends using map functions:
http://jsfiddle.net/75apft3m/
Also, you can do the same with the lowest and highest value.
But for this you must store that arrays somewhere.
Like this:
http://jsfiddle.net/75apft3m/1/
Just use Math.max.apply(null, dataArray)
and Math.min.apply(null, dataArray) to find highest and lowest values :)
I've been messing around with chart.js time options (displayFormat and tooltipFormat):
type: 'time',
unit: 'day',
unitStepSize: 1,
time: {
displayFormats: {
'day': 'dd',
},
tooltipFormat: 'll'
},
Which works as expected - on a 17inch laptop screen.
This shows dates as Mo, Tu, We, Th, Fr, Sa, Su.
However on a 24inch monitor chart.js automatically alters the dates and they become:
Aug 18 12AM - Aug 18 12PM, Aug 19 12AM - Aug 19 12PM, etc
How can I stop this from happening?
You need to set the hour property of displayFormats to dd as well, like so :
...
time: {
displayFormats: {
'day': 'dd',
'hour': 'dd' //<-- set this
},
tooltipFormat: 'll'
},
...
I am using high-charts library to draw charts on my project.
and i am facing an issue while displaying labels on X axis.
Graph is being drawn efficiently as per the values but X axis labels are not good and not as i want.
The Data is as below:
seriesData
Wed May 25 2016 17:19:52 GMT+0530 (India Standard Time),983.49,
Thu May 26 2016 17:19:52 GMT+0530 (India Standard Time),1000.3,
Fri May 27 2016 17:19:52 GMT+0530 (India Standard Time),996.24,
Sat May 28 2016 17:19:52 GMT+0530 (India Standard Time),996.75,
Sun May 29 2016 17:19:52 GMT+0530 (India Standard Time),996.75,
Mon May 30 2016 17:19:52 GMT+0530 (India Standard Time),1001.75,
Tue May 31 2016 17:19:52 GMT+0530 (India Standard Time),999.86,
Wed Jun 01 2016 17:19:52 GMT+0530 (India Standard Time),1003.16,
Thu Jun 02 2016 17:19:52 GMT+0530 (India Standard Time),996.35,
Fri Jun 03 2016 17:19:52 GMT+0530 (India Standard Time),990.99
And Highcharts JS is as below
Highcharts.setOptions({
global:
{
useUTC: currentTime.getUTCHours()==currentTime.getHours()
}
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'linechartjs',
zoomType: 'x'
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%e.%m',
year: '%e.%m.%Y'
},
},
yAxis: {
title: {
text: ''
},
min: minY,
max: maxY,
tickInterval: increment,
opposite: true
},
plotOptions: {
line: {
dataLabels: {
enabled: false
},
marker: {
enabled: false
},
enableMouseTracking: false
}
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
credits: {
enabled: false
},
series: [{
showInLegend: false,
name: '',
color: '#333',
data: seriesData,
}]
});
})
The X axis labels are as below:
X axis labels shall be in Date Format like 25.05, 26.05 .. and so on
Readers: This answer has been updated based on further input from the
questioner. Please see below.
It looks like you don't need all of that code for your dateTimeLabelFormat attribute.
From your example, it seems what you want is two-digit day and two-digit month. In that case, all you need for your x-axis labels is:
dateTimeLabelFormats: {
day: '%d.%m'
}
Here's an example fiddle (from a Highcharts demo) with this label format: http://jsfiddle.net/brightmatrix/zxt39L7g/
And here's the resulting chart:
Please let me know if this is helpful for you.
I did some further research based on the comments Gags provided
and came up with additional label formatting and intervals. These
settings can be changed based on what the user chooses in a dropdown
menu (see the comments).
First, I created the dropdown menu:
<select id="chooseDateRange">
<option value="">- choose a date range -</option>
<option value="1day">one day</option>
<option value="1week">one week</option>
<option value="1month">one month</option>
<option value="1year">one year</option>
<option value="5years">five years</option>
</select>
Second, I created a Javascript function to set and define values based on what the user chose in this menu:
// initialize local variables for the chart's options
var selectedPointInterval = 0;
var selectedPointIntervalUnit = 'day';
// set values based on which date range the user chose
function setDateRangeAndLabels(value) {
switch(value) {
case "1day":
selectedPointIntervalUnit = 'day';
selectedPointInterval = 1;
break;
case "1week":
selectedPointIntervalUnit = 'day';
selectedPointInterval = 7;
break;
case "1month":
selectedPointIntervalUnit = 'month';
selectedPointInterval = 1;
break;
case "1year":
selectedPointIntervalUnit = 'year';
selectedPointInterval = 1;
break;
case "5years":
selectedPointIntervalUnit = 'year';
selectedPointInterval = 5;
break;
default:
selectedPointIntervalUnit = 'day';
selectedPointInterval = 1;
break;
}
chartOptions.plotOptions.series.pointInterval = selectedPointInterval;
chartOptions.plotOptions.series.pointIntervalUnit = selectedPointIntervalUnit;
};
Third, I set the chart's options to a variable called chartOptions'. I moved the attributes that setpointStarttoplotOptions.series` to make them universal for all series.
// define the chart's options
var chartOptions = {
plotOptions: {
series: { pointStart: Date.UTC(2010, 0, 1) }
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%d.%m',
week: '%d.%m',
month: '%m.%y',
year: '%m.%y'
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
};
Finally, I created code to draw the chart upon first loading the page, as well as a jQuery function to redraw it based on the user choosing a new range from the dropdown menu:
// draw the chart
setDateRangeAndLabels('1day');
var chart = $('#container').highcharts(chartOptions);
// redraw the chart based on new date range
$('#chooseDateRange').change(function (){
setDateRangeAndLabels(this.value);
chart = $('#container').highcharts(chartOptions);
});
Here's the complete fiddle for review: http://jsfiddle.net/brightmatrix/zxt39L7g/
Please note: This will only change the x-axis labels, intervals, and
default tooltip text for the data that the chart is given. To get data
that's relevant to the date intervals chosen, you'll need to also
dynamically change the series data based on the user's choice.