I am using high chart to plot a graph.In x axis I am plotting integer values.i need to format the x axis label using date time which i have in data array.
this.point.mydate not working inside label formatter.
xAxis: {
tickInterval: 1,
min:1,
max:30,
allowDecimals: false,
title: {
text: 'Date'
},
labels: {
formatter: function () {
return Highcharts.dateFormat('%b-%d', this.point.mydate);
}
}
},
You have used Date in xAxis datatype , it should be datetime as follows.
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%a %d %b', this.point.mydate);
}
}
}
Related
xaxis: {
type: this.domain_type,
categories: this.domain,
labels: {
show: !this.isMobileOnly,
style: {
colors: this.range_color,
},
formatter: (val) =>{
if(new Date(val).getMonth() === new Date().getMonth()) {
// only those dates that includes May in their name
// every label that I want is being shown except the May 2022 Label
// May 2022 does get returned here but doesn't get shown as a label on x-axis
return moment(val).format("MMM, YYYY");
}
},
tickPlacement: 'on',
axisBorder: {
show: false,
},
axisTicks: {
show: this.range_ticks,
},
tooltip: {
enabled: this.range_tooltip,
},
tickAmount: undefined,
offsetX: 28,
},
I want to show all the labels in the x-axis in my apex chart component. In my formatter method, I check if the data (which is in the form of dates) includes the current month name irrespective to the year and if it does then, it should be rendered as a label in x-axis. All labels are being show in the x-axis except the last one that is May 2022. Why is the last label not being shown on the chart ?
I have a highcharts chart that is dynamically updated. I add the values to the series using the "AddPoint" function on the series. Here is how I am initializing the chart.
var _trendToolChart = null;
var _trendSeries = null;
function createTrendTool() {
_trendToolChart = Highcharts.chart('trendToolContainer', {
chart: {
type: 'spline',
zoomType: 'x',
panning: true,
panKey: 'shift'
},
title: {
text: 'Trending Signals'
},
yAxis: {
title: {
text: 'Values'
}
},
xAxis: {
title: {
text: 'Time'
},
type: 'datetime'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: true
}
}
},
responsive: {
rules: [{
condition: {
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
_trendToolChart.showLoading("Loading...");
}
I keep the _trendToolChart variable as a global reference for later. On the regular I query our API to get a value. The value return is an x value of a datetime and a y value of a decimal. Since I have a multi line series, I have a WebId associated with each line on the chart itself. I find the series by this GUID, then add a point to the series.
Here's inside the function when I call it on the second:
var xValue = Date.UTC(apiResponse.DateString); // convert str to date
var yValue = apiResponse.Value; // decimal value
var point = [xValue, yValue];
// add to series & graph
var chartSeries = $.grep(_trendToolChart.series, function (e) { return e.userOptions.WebId == apiResponse.elemId; })[0];
chartSeries.addPoint(point);
_trendToolChart.redraw();
When I add these values to the chart, highcharts instead adds the x value as integer counts, not as a date. Here's the check inside the response function on chrome's developer side:
So instead of a series of ["11/27/2017",22] I get [0, 22] in my x values. And it shows on my chart, my xaxis labels has a "0" or 1 and not a Date.
Here's what I tried, instead of addPoint([Date,number]);, I've done addPoint ({x:Date, y:number}); Now that showed in the points on the highchart series with a date value, but then on my chart visually I saw, ZERO points added after the redraw.
What am I doing wrong?
Alright, it seems that the object being put in the x value was not a date, despite what it seems. It was actually a string.
So this returns a string:
Date("2017-11-27")
As a result, highcharts didn't know how to interpret that as a datetime, since I told it to do datetime in the options. The solution was this:
moment("2017-11-27").ToDate()
This returned a proper date object, and highcharts was able to interpret.
options passed like below:
var chartOptions = {
chart: {
backgroundColor: 'white',
type:'line'
},
title: {
text:null
},
xAxis: {
gridLineWidth:0.5,
gridLineColor:'#e1e1e1',
tickInterval:intervalPeriod,
tickWidth: 0,
type: 'datetime',
dateTimeLabelFormats: dateTimeLabelFormats
},
yAxis: {
gridLineWidth:0.5,
gridLineColor:'#e1e1e1',
allowDecimals:false,
tickAmount: 5,
title: {
text: null
}
},
tooltip:{
shared:true,
xDateFormat:'%e %b, %Y',
crosshairs:true
}
}
You need to have the same value for tickInterval and pointInterval in order to display tick synced with series' points. When points have irregular intervals, then you can use tickPositions array.
API Reference:
http://api.highcharts.com/highcharts/xAxis.tickInterval
http://api.highcharts.com/highcharts/plotOptions.series.pointInterval
http://api.highcharts.com/highcharts/xAxis.tickPositions
Example:
http://jsfiddle.net/zycwaexa/ - using the same tickInterval and pointInterval
http://jsfiddle.net/z7pnwtrs/ - using tickPositions
I have a Highchart bar graph (column type) which will show the data for each of the dates. Now it is getting the values through AJAX and date range
can be selected. Because of size limitations, I need to display the date labels in 5 day interval if the date range selected is more than 10 days.
That is all bars needs to be shown, but the interval for labels should be in 5 days interval if the date range is more than 10 days. If it is 10 days or lower, it should show all the dates.
My graph config is like the following :
var chart = new Highcharts.Chart({
credits: {
enabled: false
},
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 20,
y: 10
},
chart: {
renderTo: 'id_name',
type: 'column'
},
xAxis: {
categories: dates,
crosshairs: true
},
yAxis: {
title: {
text: 'Y Axis Title'
}
},
colors: ['#1A7BB9', '#18A689', '#21B9BB', '#F7A54A', '#EC4758'],
title: {
text: 'My title goes here'
},
subtitle: {
text: 'my subtitle goes here'
},
series: PHP formatted data goes here
});
I'm not sure about the interval (every fifth label should be displayed? Or you want to compare time-range to determine that?), but in general you have two solutions:
easier one: disable dataLabels by default (series.dataLabels.enabled = false) but enable that for a specific points, for example:
series: [{
data: [{
x: timestamp_1,
y: timestamp_1,
dataLabels: {
enabled: true
}
}, [timestamp_2, value_2], [timestamp_3, value_3], ... , {
x: timestamp_N,
y: timestamp_N,
dataLabels: {
enabled: true
}
}]
}]
harder one: wrap drawDataLabels method, and remove unnecessary labels:
(function (H) {
H.wrap(H.seriesTypes.column.prototype, 'drawDataLabels', function (p) {
var step = H.pick(this.options.dataLabels.step, 0),
iterator = 0;
p.call(this);
if(step) {
H.each(this.points, function (point) {
if (point.dataLabel) {
if (iterator % step !== 0) {
point.dataLabel = point.dataLabel.destroy();
}
iterator ++;
}
});
}
});
})(Highcharts)
jsFiddle for the second solution: http://jsfiddle.net/gL2kw73b/2/
I have large collection of data in the format [1421065200000, 1.72], where the first parameter is time in milliseconds and the second parameter is the value at that specific time. I have data array consisting of such data in large size. Now I want scrollable graph containing plot of such time and value data. Here is my javascript implementation to do so,
var dataArray; //This contains my data array i.e. ([[t1, v1],[t2, v2],...])
var minDate = dataArray[0][0];
var maxDate = dataArray[dataArray.length - 1][0];
var chartOption = {
chart: {
type: graphType,
renderTo: 'graph-container',
zoomType: 'x',
useUTC: false
},
title: {
text: 'Data from last 24 hours'
},
credits : {
enabled: false
},
xAxis: {
title: {
text: null
},
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
},
allowDecimals: false,
ordinal: false,
min: minDate,
max: maxDate
},
yAxis: {
title: {
text: null
}
},
plotOptions: {
series: {
pointStart: minDate,
pointInterval: 5 * 60 *1000
}
},
series: [{
name: parameterName,
data: dataArray
}],
exporting: {
enabled: false
}
};
parameterChart = new Highcharts.Chart(chartOption);
}
The chart shows incorrect data, the time value on x-axis doesn't match the value at y-axis. What is the most correct and efficient to show such time series. Should I use Highcharts or Highstock. Please guide me through this, with suggestion or maybe with solution.
What I did was, I used HighStock instead of HighCharts (since I needed scrollbar along x-axis for large collection of data). I was passing the date in my local time zone format, whereas the chart was using UTC. So, I disabled the use of UTC (alternative: I could have provided data in UTC and drawn the graph using the same, In my case I needed my local labels). I gave the minimum and maximum range to the x-axis through x-axis min and max configuration. Here is the sample of my code,
//dataArray contains the array of data [[x1, y1], [x2, y2], ...]
//x is Date, y is temperature value (say)
var minDate = dataArray[0][0];
var maxDate = dataArray[dataArray.length - 1][0];
//Disable use of UTC
Highcharts.setOptions({
global: {
useUTC: false
}
});
//Create graph options
var chartOption = {
chart: {
type: graphType, //line, bar, column, etc
renderTo: 'graph-container', //div where my graph will be drawn
zoomType: 'x' //Making x-axis zoomable/scrollable
},
title: {
text: 'Data from last 6 hours'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
xAxis: {
title: {
text: null
},
type: 'datetime', //For time series, x-axis labels will be time
labels: {
//You can format the label according to your need
format: '{value:%H:%m}'
},
min: minDate,
max: maxDate,
minPadding: 0.05,
maxPadding: 0.05
},
yAxis: {
title: {
text: null
}
},
scrollbar: {
enabled: true
},
series: [{
name: "Temperature", //Name of the series
data: dataArray
}],
exporting: {
enabled: false
},
credits : {
enabled: false
}
};
//Finally create the graph
var myChart = new Highcharts.Chart(chartOption);