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.
Related
I have data that looks like this:
Time,Speed
Mon May 11,21
Tue May 12,34
Wed May 13,12
Thu May 14,12
Fri May 15,45
Mon May 18,34
Tue May 19,56
Wed May 20,67
Thu May 21,78
I am trying to plot this on a HighCharts line chart with the speed on the y-axis and the time on the x-axis. I would like to keep my time labels as they are in the data. This works in Firefox and Edge. However, Chrome is trying to translate the time into a date value so it messes up the format of the labels. How do I get around this so I can keep my Axis labels the way they exist in the raw data.
var csv = {this is my data};
var options = {chart: {
backgroundColor: '#f6f6f6',
type: 'line',
style: {
fontFamily: 'Arial'
},
borderWidth: 1,
borderColor: "#ddd",
borderRadius: "5",
zoomType: "xy",
renderTo: 'chartContainer',
},
xAxis: {
labels: {
formatter: function(){
return this.value;
}
}
}
data: {
csv: data
},
title: {
text: chartTitle
}
}};
var chart = new Highcharts.Chart(options);
}
Use category axis type:
xAxis: {
type: 'category',
...
}
Live demo: http://jsfiddle.net/BlackLabel/25ypbo1e/
API Reference: https://api.highcharts.com/highcharts/xAxis.type
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'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'
},
...
When displaying time based data using Chart.js, the data itself doesn't seem to be aligned with the X axis labels. For instance, when the data is for 2016-11-30, the bar is actually showing in December. The last date in a series of dates doesn't even show on the chart. How can I make them align correctly?
$(document).ready(function(){
var config = {
type: 'bar',
data: {
labels: [
'2016-11-30', // Why showing in December?
'2017-04-01', // Why not showing in beginning of April?
'2017-06-30'], // Why not showing?
datasets: [{
label: 'Contacts',
backgroundColor: 'red',
data: [
1,
5,
7
]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
stepSize:1
}
}],
xAxes: [{
type: 'time',
barThickness:2,
time: {
unit: 'month'
}
}]
}
}
};
var Canvas = $("#Chart");
var cc = new Chart(Canvas, config);
});
Example on Codepen:
https://codepen.io/skunkbad/pen/EmBJMa
Regarding the showing on the wrong date:
This is because of how you instantiate a date object and how it relates to timezones, your browser is likely resolving that to your timezone and you get a different value.
I am on GMT-3 and this is what happens for me for example:
$ new Date('2016-11-30')
- Tue Nov 29 2016 21:00:00 GMT-0300 (BRT)
$ new Date(2016, 11, 30)
- Fri Dec 30 2016 00:00:00 GMT-0300 (BRT)
Regarding not showing last data:
The bar is plotted but it's not on visible location. It's possible to verify this on this JSFiddle (not sure why not on codepen), if you move your mouse to the very edge of the screen the label will appear.
This is a known issue and is being tracked here: #2415
If possible, I think that the easiest workaround would be to manually define a max property on your time scale