Develop Reference

How can I add double related x-axis bar to high chart in zoom

Below is the custom xAxis bar I want to implement.
When user is doing a selection highchart will zoom accordingly and also datetime format x-axis would also zoom in & out accordingly.
Which option should I use?

You can use two linked datetime x-axis with enabled zoom and different tick interval:
chart: {
zoomType: 'x'
},
xAxis: [{
type: 'datetime'
}, {
type: 'datetime',
tickInterval: 1000 * 60 * 60 * 24 * 30,
linkedTo: 0
}]
Filling label backgrounds will be harder to achieve, but this thread should help: How can i create Highchart xAxis labels centered and enclosed?
Live demo: http://jsfiddle.net/BlackLabel/ot6g0fvj/
API Reference: https://api.highcharts.com/highcharts/xAxis

Format google line chart tooltip data to use a percentage

I have a line chart with data coming from a test JSON file, like so:
{
"cols": [
{"id":"Day","label":"Day","type":"number"},
{"id":"Failed","label":"Checks Failed","type":"number"},
{"id":"Passed","label":"Checks Passed","type":"number"},
],
"rows": [
{"c":[{"v":"1","f":null},{"v": "25","f":null},{"v": "72","f":null}]},
{"c":[{"v":"2","f":null},{"v": "6","f":null},{"v": "67","f":null}]},
{"c":[{"v":"3","f":null},{"v": "6","f":null},{"v": "32","f":null}]},
{"c":[{"v":"4","f":null},{"v": "6","f":null},{"v": "7","f":null}]},
{"c":[{"v":"5","f":null},{"v": "6","f":null},{"v": "57","f":null}]},
]
}
I have my chart script:
var graph_1 = $.ajax({
url: "/linegraph.json",
dataType: "json",
async: false
}).responseText;
var data = new google.visualization.DataTable(graph_1);
var linechart_1 = new google.charts.Line(document.getElementById('lg1'));
var lg1_options = {
legend: {position: 'none'},
height: 100,
vAxis: {format: '#%'}
};
linechart_1.draw(data, lg1_options);
The format option doesn't seem to be giving me the results other suggest it should. My tooltip just shows a plain number, whereas I'd like to see the number followed by %. Where am I going wrong?

The Material Charts are in beta. The appearance and interactivity are largely final, but the way options are declared is not. If you are converting a Classic Line Chart to a Material Line Chart, you'll want to replace this line:
chart.draw(data, options);
...with this:
chart.draw(data, google.charts.Line.convertOptions(options));
Docs
So you'll want to replace your code with this:
linechart_1.draw(data, google.charts.Line.convertOptions(lg1_options));
Note that the #% formatter forces it to interpret your values as percentages, ie. 5 == 500%, not 5%, so you probably want to use format:'#\'%\''
JSFiddle

Incorrect data point value in highcharts navigator series when extending min and max date

I recently updated highstock in which I used a chart that displayed values with an "extended range", i.e. where the min and max date is set outside the boundaries of the chart data.
After the update (which fixed some other bugs) I noticed that the last data point in the navigator series at the bottom is not correct according to the data in the actual series. As can be seen, there's an additional data point at the far right in the bottom that doesn't exist in the actual series.
This can be viewed at http://jsfiddle.net/ab96pnjf/ as well
The code that creates the chart is the following
$(function () {
var fromdate = new Date('2011-04-01');
var todate = new Date('2012-05-21');
var series = [{
color: 'red',
data: MSFT,
name: 'MSFT'
}];
$('#container').highcharts('StockChart', {
navigator: {
series: {
data: series[0].data,
color: '#4572A7',
fillOpacity: 0.05
}
},
xAxis: {
ordinal: false,
min: fromdate.getTime(),
max: todate.getTime()
},
legend: {
enabled: true
},
series: series
});
});
Now, if I change the navigator.series property to
navigator: {
series: series
}
the navigator chart is correct, as in the values are cut off at the right when there is no more data available. This is what I want; the only problem is that the color is the same as the series, and I want it to use my custom color, as in the first example.
So how do I configure HighStock to cut off the last value in the navigator chart while at the same time being able to use a custom color for the series?

Hm, well I have a "quick fix" to this problem, as I am not sure how I would configure highcharts to do it for me.
Using jQuery I can extract the line in the navigator, since highcharts (at least) applies a class to the series. It sets the class name for all series including the one in the "main area", but the last one is the navigator series it seems, or every odd series if there is more than one highcharts chart in the document.
$(function () {
// ... as previous
$('#container').highcharts('StockChart', {
navigator: {
series: series
},
// ... as previous
});
// added code to apply a custom style to the navigator line diagram
var navseries = $('.highcharts-series:last').children();
// can be undefined if the series has no data points
if (navseries) {
navseries.css('stroke', '#4572A7');
navseries.css('strokeWidth', 1);
navseries.css('fillOpacity', 0.05);
}
});

Remove UTC date from Highcharts tooltip

I have been facing this problem in Highcharts for a while now
The tooltip :
At the top, the date hour is in UTC format, I want it to be in the same format the data is (or local time zone and it shouldn't change to UTC etc, remove the "T & Z" from the date also!)
My snippets of code that concern tooltip are as follows :
dateTimeLabelFormats : {
second : '%H:%M',
minute : '%H:%M',
hour : '%H:%M',
day : '%e. %b %a',
week : '%e',
month : '%b',
year : '%e'
},
labels : {
formatter: function(){
var daystr = Highcharts.dateFormat('%e %b %a', this.value);
var first = daystr.substring (0,daystr.length - 1);
return first; //return Highcharts.dateFormat('%e %b,', this.value);
}
And :
tooltip: {
shared: true,
valueDecimals: 2,
},
Also, the day coming on the x-axis is 2 days +/- , I tried removing the UTC format by setting useUTC to false, even that did not work.
I need to know how to get datehour in non-UTC format for the tooltip.
All approaches/suggestions are most welcome.
UPDATE :
Ok, somehow I am not able to remove the UTC from any of my tabs.
But it has somehow already removed from one tab. I have no idea how!
I used this at the end of my highcharts which is not working :
,setOptions : ({
global : {
useUTC : false
}
})
However, where exactly do I use the following as mentioned on the site ( This is not working )
Highcharts.setOptions({
global: {
useUTC: false
}
});
I really don't understand what is happening here. The first one should work technically.
Can you tell me exactly where to add these snippets, my huge code of highcharts starts as :
$j(function () {
$j('#container1').highcharts({
chart: {
zoomType:'xy'
},
credits: {
enabled: false
},
title: {
text: 'Trend Graph'
}, << And so on ....... >>

You need to indeed set useUTC to false and then use timezoneOffset to be the same as timezone used in data.
useUTC didn't work? How did you set this? Make sure the same way as in demos.

In your tooltip you should add xDateFormat for date format
tooltip: {
xDateFormat: '%Y-%m-%d',
shared: true,
valueDecimals: 2
}
If you want to have date with time you need to add like this
tooltip: {
xDateFormat: '%Y-%m-%d %H:%M:%S',
shared: true,
valueDecimals: 2
}
then remove dateTimeLabelFormats.

It's worth noting that useUTC should be set before creating your charts, otherwise it won't pick up the settings if you apply after.

Highcahrt time format issue

this is my yAxsis and normally displays time for column range chart
yAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%H:%M:%P', this.value);
}
}
It normally works perfect when distance is some amount .
Question : When time distance between starttime and endtime is low then yAxsis dispalys 00:00 pm through the axsis I also tried %M:%P still dispalys 00:pm
here is the js fiddle

Thanks Sebastian .
minPointLength
did work..