I'm working with highcharts char. I need to show the yaxis labels H:i:s time format(for ex. yaxis - 00:00:00, 00:05:00, 00:10:00 and etc.).
Here is my code (full code in this fiddle):
LiveFeeds = {
init: function(tab)
{
var tab = tab || '#calling-intensity';
$(tab+'-chart').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: ''
},
xAxis: {
type: 'datetime'
},
yAxis: {
min: 0,minRange: 0.1,
title: {
text: chartYaxis
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
tooltip: tooltipData,
series: seriesData
});
}
};
This is a example but on Flot chart https://jsfiddle.net/p41d165j/14/.
Use http://api.highcharts.com/highcharts#xAxis.labels.formatter to format the labels as you wish.
To change date format of labels you could use dateTimeLabelFormats like:
dateTimeLabelFormats: {
millisecond: '%H:%M:%S',
second: '%H:%M:%S',
minute: '%H:%M:%S',
hour: '%H:%M:%S',
day: '%H:%M:%S',
week: '%H:%M:%S',
month: '%H:%M:%S',
year: '%H:%M:%S'
},
Example: https://jsfiddle.net/hzjbb848/10/
Axis by default will display labels for each day, because of axis range, but if you zoom in - you will see hours.
You could consider using different format for day or use tickPositioner to set ticks not on days.
To fully control what is displayed in axis labels set up formatter function.
Related
I'm building an Angular app where I use higcharts. The issue I have is the size of the exporting dialog box. I have several graphs on the page, but only one graph has this problem, the dialog box is way too large than the boxes on the others graphs. Below some screenshots so you can observe the difference.
Noramal size:
The large one:
Of course the graphs have the same height and width.
For exporting the graphs, I'm using:
import * as Highcharts from 'highcharts';
import exporting from 'highcharts/modules/exporting';
import exportingData from 'highcharts/modules/export-data';
exporting(Highcharts);
exportingData(Highcharts);
The configuration of all graphs has the same structure like below:
this.chartOptionsAvg = {
colors: ['#0026ff', '#ff0000', '#000000', '#229e00'],
chart: {
type: "scatter",
zoomType: 'x'
},
title: {
enabled: true,
text: '',
verticalAlign: 'top',
align: 'center'
},
xAxis: {
type: 'datetime',
title: {
text: this.translate.instant('map.time')
},
dateTimeLabelFormats: {
minute: '%H:%M',
hour: '%H:%M',
month: '%d/%m/%Y',
year: '%Y'
}
},
yAxis: {
title: {
text: this.translate.instant('map.graph-measurements-title-yaxis')
},
type: 'logarithmic',
minorTickInterval: 0.1,
},
credits: {
enabled: false
},
tooltip: {
valueSuffix: " V/m",
pointFormat: '<b>{point.x:%d/%m/%Y %H:%M}</b> </br> <b>{point.y}</b>',
dateTimeLabelFormats: {
minute: '%H:%M',
hour: '%H:%M',
month: '%d/%m/%Y',
year: '%Y'
}
},
plotOptions: {
series: {
marker: {
radius: 2
}
},
scatter: {
threshold: this.wb_threshold
}
},
legend: {
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6
},
exporting: {
enabled: true,
},
series: [
{
name: '100 KHz - 7 GHz',
data: avg_data1
},
{
name: '925 MHz - 960 MHz',
data: avg_data2
},
{
name: '1805 MHz - 1880 MHz',
data: avg_data3
},
{
name: '2110 MHz - 2170 MHz',
data: avg_data4
}
]
}
Have you any idea what is going wrong? Or, there is any way to style the box so I can change the font size maybe? Thank you.
Photo with faulty chart | Zooming in (less data points) plots correctlyWhen charting a boolean value over time (as stepped), Highstock 7.2.0 is introducing interpolated values between 0 and 1. I would like the result to just plot 0s and 1s in a stepped fashion. See attached photos. The one marked up is showing interpolated values.
I'm looking at the difference between series.data and series.processedYData and while series.data is a mix of 0s and 1s as expected, series.processedYData contains some interpolated values between 0 and 1. If I zoom in on the affected time range, it renders correctly. It is only happening when pulling in larger set of data (over 100 or so).
scope.CreateChart = function () {
if (scope.chart) scope.chart.destroy();
scope.chart = new Highcharts.stockChart('trend', {
rangeSelector: {
enabled:false
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
enabled:true
},
plotOptions: {
connectNulls: false
},
chart: {
zoomType: 'xy',
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%b %e',
week: '%b %e',
month: '%b \'%y',
year: '%Y'
}
},
yAxis: [{ id: GuidSvc.Create(), title: { text: 'Default' }, opposite: false }],
series: [
{name: 'Series 1',
step: true,
type: 'line',
data: [[1568293051542,0],[1568293352761,0],[1568293652277,0]
],
credits: { enabled: false },
lang: {
noData: "No tags selected. Click on a tag to trend"
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#ccc'
}
}
});
};
This is happening probably because of series dataGrouping. It is the concept of sampling the data values into larger blocks in order to ease readability and increase performance.
So the solution could be to disable it or change the approximation method so that it shows not group average but one of its points (so that it will be 0 or 1).
plotOptions: {
series: {
dataGrouping: {
enabled: false
}
}
}
API reference:
https://api.highcharts.com/highstock/series.line.dataGrouping
https://api.highcharts.com/highstock/series.line.dataGrouping.approximation
I am using high charts lib to render date time column chart. But x-axis is not taking the exact starting value for the chart. In below example we need to set the bar width before 12th NOV x-axis value
chart: {
type: 'column',
width : 709,
marginTop : 100,
reflow: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
colors: ["#00ACE6", "#EA8939", "#2D8093", "#EB5C6A", "#D9A300", "#1B7CDE", "#8D69E0", "#378A4E", "#4F5A65"],
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e %b',
year: '%b'
},
},
yAxis: {
allowDecimals: false,
min: 0,
},
plotOptions: {
column: {
stacking: 'normal'
},
series: {
animation: false
}
},
series:[{"name":"sent","data":[],"stack":"sent","_colorIndex":0},{"name":" received","data":[],"stack":"received","_colorIndex":1},{"name":"1 sent","data":[[1511136000000,1],[1510531200000,1],[1510444800000,1]],"stack":"sent","_colorIndex":2},{"name":"1 received","data":[],"stack":"received","_colorIndex":3},{"name":" made","data":[[1510531200000,1],[1510444800000,2]],"stack":"sent","_colorIndex":4},{"name":" received","data":[],"stack":"received","_colorIndex":5}], //Server data
loading: {
style: {
marginTop: "-25px"
}
}
});
js fiddle link : http://jsfiddle.net/L94731ge/5/
Could you please help me on this.
adding startOnTick for xAxis maybe correct your chart
xAxis: {
type: 'datetime',
startOnTick:true,
dateTimeLabelFormats: {
month: '%e %b',
year: '%b'
},
},
please check this fiddle
I'm working with Highcharts JS library,
Now I need to create monthly report. I have number of sales orders, which corresponding to days in month. For example at day 1, number of sales orders is 30, day 2 is 20....
But I only want to show in x-Axis (day) something like 1, 5, 10, 15, 20, 25, 30 and information about sales orders of each day is still displayed.
What option I have to use?
Thank you very much.
EDIT 1
Here is my js code
<script>
var d = new Date();
var m = d.getMonth();
d.setMonth(d.getMonth() - 1);
if (d.getMonth() === m)
d.setDate(0);
d.setHours(0, 0, 0);
new Highcharts.Chart({
chart: {
renderTo: 'container_sales_report',
type: 'line',
height: 380,
width: 415,
zoomType: 'xy'
},
colors: ['#FF0000'],
title: {
text: 'Last 30 Days Reports',
x: -20 //center
},
xAxis: [{
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b'
},
crosshair: true
}],
yAxis: [{
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: '',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}],
tooltip: {
formatter: function () {
return Highcharts.dateFormat('%d/%m', this.x) + ' : ' + this.y;
}
},
legend: {
layout: 'horizontal',
align: 'bottom',
verticalAlign: 'bottom',
borderWidth: 0,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
plotOptions: {
spline: {
marker: {
enabled: false
}
}
},
series: [{
name: 'Cost',
type: 'spline',
data: [<?php echo $purchasesData; ?>],
pointStart: Date.UTC(d.getYear(), d.getMonth(), d.getDate()),
pointInterval: 24 * 3600 * 1000 // one day
}]
});
</script>
Now the time interval in x-Axis is 7 days. It's fine but I wonder is there anyway I can control this interval?
You can try tickInterval option for the x-axis. E.g.
xAxis: {
tickInterval: 5
}
This code generates a highchart with 2 Y axis and 1 X:
$('#main_chart').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Overview'
},
xAxis: [{
type: 'datetime'
}],
yAxis: [{ // Primary yAxis
labels: {
format: '${value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Y1',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Y2',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
scrollbar: {
enabled: true
},
series: [{
name: 'Y1',
data: y1Data
}
,{
name: 'Y2',
data: y2Data
}
]
});
y1Data and y2Data are the arrays of arrays [[1426525200, 2], [1426611600, 0], [1426698000, 0]...] where the 1st element is date. The dates are sequent with a step of 1 day:
1 Mar 2015, 2 Mar 2015, 3 Mar 2015....
However, I see only time from 12:00 till 12:55 on X and nothing else:
What I want to see is the dates 1 Mar 2015, 2 Mar 2015, 3 Mar 2015.... EndDate. Moreover, why is there minus $20? There're no negative values in the data set.
When defining data, either provide timestamp in miliseconds (not seconds) or use JavaScript Date object instead:
var y1Data = [[new Date(), 2], [1426611600000, 0], [Date.UTC(2010, 2, 1), 0]];
To answer your $-20 question, Highcharts use their own algorithm to guess the most appropriate axis minimums a maximus. If you're not happy with it, simply set
yAxis: {
min: 0,
...
}