I´m trying to display a timeline using Highchart, my problem is that when you put the mouse over one element of the series, it highlight and shows the tool-tip of other element of the same series. What I´m doing wrong?
You can see a http://jsfiddle.net/ncdysafk/
var chart;
var options = {
chart: {
events: {
load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
},
renderTo: 'container',
type: 'columnrange',
inverted: true,
zoomType: 'y'
},
title: {
text: 'Portes de hoy'
},
xAxis: {
categories: ["SERIE1","SERIE2","SERIE3"]
},
yAxis: {
type: 'datetime',
title: {
text: 'Horas del día'
}
},
plotOptions: {
series: {
stickyTracking: true,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
},
columnrange: {
grouping: false
}
},
legend: {
enabled: true
},
series: [{"name":"SERIE2","data":[{"x":1,"low":1425538800000,"high":1425543300000},{"x":1,"low":1425567600000,"high":1425571200000},{"x":1,"low":1425584000000,"high":1425589100000}]},{"name":"SERIE3","data":[{"x":2,"low":1425538800000,"high":1425543300000},{"x":2,"low":1425567600000,"high":1425571200000}]}]
};
chart = new Highcharts.Chart(options);
This is bug in 4.1.3/2.1.3 version of Highcharts/Highstock. Bug reported is here. Already fixed, that means try https://github.highcharts.com/highstock.js and https://github.highcharts.com/highcharts-more.js files from master branch. Working demo http://jsfiddle.net/ncdysafk/1/
Related
I am new to working with HighCharts. I am working on a project that was started by someone else but not finished. In this project the user will have a chart that spans multiple days but only wants to use certain sections of it. The user wants to use the bottom navigation 1 bar which lets you zoom into certain time spans to move around the chart to save different version of the chart. They will press the save button to save the state of the chart which they are currently viewing. I need a to know if it is possible if you can access the labels in the x-axis of the line chart so I can save the time positions they are looking at? Do HighCharts provide any way of getting output from the Navigation 1 bar?
I have accessed the x-axis labels with jquery and can see the data I need using ('#fn.init').prevObject[0].all.chartContainer.innerText, but I am not sure if this is the correct way to go about it. Is there a better way to do this?
Chart Configuration:
Highcharts.stockChart('container',
{
navigator: {
enabled: true
},
scrollbar: {
enabled: false
},
chart: {
renderTo: 'container',
type: 'spline',
zoomType: 'xy',
panning: true,
panKey: 'ctrl',
events: {
load() {
const chart = this;
chart.showLoading('Loading, Please Wait ...');
setTimeout(function() {
chart.hideLoading();
},
1500);
}
}
},
boost: {
useGPUTranslations: true,
turboThreshold: 1000
},
rangeSelector: {
buttons: [
$('#heatingStart').val(),
toDateAdd($('#heatingStart').val(), 1, 'H'));
graphicinfo(RecipeId, $('#heatingStart').val(), toDateAdd($('#heatingStart').val(), 8, 'H'));
graphicinfo(RecipeId, $('#heatingStart').val(), toDateAdd($('#heatingStart').val(), 1, 'D'));
{
text: 'All',
events: {
click: function() {
graphicinfo(RecipeId, $('#ReportStartDate').val(), $('#ReportEndDate').val());
}
}
}
]
},
legend: {
enabled: true
},
xAxis: {
title: {
text: 'Time (Hrs)'
},
categories: categoriesX
},
yAxis: {
tickWidth: 1,
title: {
text: 'Temperature (°F)'
},
labels: {
format: '{value:.0f} °F'
},
lineWidth: 1,
opposite: true
},
title: {
text: 'Thermocouples Temperature Data'
},
series: termocouplesdata
});
I am trying to bring highcharts to show only hours and minues in xAxis, presently it's showing the full timestamp including the date. I am using the following code:
var chartT = new Highcharts.Chart({
chart:{ renderTo : 'chart-temperature' },
title: { text: 'Temperatur' },
series: [{
showInLegend: false,
data: IstTemp
}],
plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
},
series: { color: '#059e8a' }
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { minute: '%H:%M' },
categories: reading_time
},
yAxis: {
title: { text: 'Temperatur (Celsius)' }
},
credits: { enabled: false }
});
Where is my mistake?
You can't use datetime and category axis type at the same time. As a solution you can:
Use datetime axis and preprocess your data to the format: [timestamp, y]
var IstTemp = [11.6, 12.5];
var reading_time = ["2021-02-12 14:35:52", "2021-02-12 14:38:52"];
var seriesData = IstTemp.map(function(dataEl, index){
return [new Date(reading_time[index]).getTime(), dataEl];
});
Live demo: http://jsfiddle.net/BlackLabel/7gdvzfo6/
Use categories with modified string
var IstTemp = [11.6, 12.5];
var reading_time = ["2021-02-12 14:35:52", "2021-02-12 14:38:52"];
var processedCategories = reading_time.map(function(dateStr){
return dateStr.split(' ')[1].split(':').slice(0, 2).join(':');
});
Live demo: http://jsfiddle.net/BlackLabel/2udw738c/
I have a chart that shows people, a monetary value and a percentage.
I would like to display the percentage as the datalabel instead of the monetary
value.
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false
}
},
bar: {
dataLabels:
{
allowOverlap:true,
enabled: true,
align: 'right',
overflow:"none",
formatter: function() { return this.y;},
}
}
},
xAxis: {
categories: ["Mary<br/>$ 4,623,450","John<br>$ 1,848,380","Jane<br/>$ 640,170"]
},
series: [{
"data": [
["65%",4623450],
["26%", 1848380],
["9%", 640170]
],
"name": "Session1"
}]
});
});
So:
Mary would have a datalabel of 65% instead of 4623450,
John would have a datalabel of 26% instead of 1848380,
Jane would have a datalabel of 9% instead of 640170
Is there a way to do that?
See jsfiddle here
SOLVED!
As simple as:
formatter: function() { return this.key;},
Full code:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false
}
},
bar: {
dataLabels:
{
allowOverlap:true,
enabled: true,
align: 'right',
overflow:"none",
formatter: function() { return this.y;},
}
}
},
xAxis: {
categories: ["Mary<br/>$ 4,623,450","John<br>$ 1,848,380","Jane<br/>$ 640,170"]
},
series: [{
"data": [
["65%",4623450],
["26%", 1848380],
["9%", 640170]
],
"name": "Session1"
}]
});
});
Updated jsfiddle here
i create an empty highchart and add a series to the chart.
This is my code:
chart = new Highcharts.Chart({
chart: {
renderTo: 'hccontainer',
zoomType: 'x'
},
title: {
text: 'Telegramme'
},
subtitle: {
text: 'Offline'
},
exporting: {
enabled: false
},
legend: {
enabled: true
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
}
});
And here for example i add a series:
$.ajax({
'url' : 'ajax.php',
'type': 'GET',
'data': {
'action' : 'eibmon_hctel',
'hsid': hsid,
'grp': grp,
'df': datefrom,
'dt': dateto
},
success: function(items) {
chart.addSeries({
name: series_name,
data: items
}, true);
},
cache: false
});
The ajax.php send this result:
{"1441614256000":"1","1441586308000":"0","1441523112000":"1","1441515496000":"0","1441360423000":"1"
,"1441344522000":"1","1441341118000":"0","1441254853000":"1","1441238297000":"0","1441094577000":"1"
,"1441086395000":"0","1441086143000":"1","1441085875000":"0","1441085622000":"1"}
The chart will be redrawn but the line is missing. In the legend the new series get displayed. Is it not possible to start with an empty chart?
Thanks
Looks like your JSON structure is icorrect. You should have a x/y fields and number values.
Example:
{
x:"1441614256000",
y:"1"
}
After loading data, you can convert your json into correct form, parsing data in preprocessing.
HI all i am some data in a pie chart...on hover of slice i get the hover like this
[Hr Resources:x=Hr Resources,y=12]
i want my tooltip to show like this
[ProjectName=Hr,Logged Bugs=12]
how do i do this..here is how i am binding my data to the pie chart
<script type="text/javascript">
$(function () {
$.getJSON('<%= Url.Action("GetData","JqueryCharts") %>', {}, function (data) {
var json = data;
alert(json);
var jsondata = [];
for (var i in json) {
// var serie = new Array(json[i].Projects, json[i].Bugs);
jsondata.push([json[i].Projects, json[i].Bugs]);
}
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Resource Reports of BugTracker'
},
plotOptions: {
pie: {
showInLegend: true,
animation: false,
allowPointSelect: true,
cursor: 'pointer'
}
},
legend: {
enabled: true
},
series: [{
type: 'pie',
name: 'Resource Reports',
data: jsondata
}]
});
});
});
</script>
can any one help where i have to change this
By default, Highchart tooltip picks up, series name in the tooltip.
You can customize tooltip using:
tooltip: {
formatter: function() {
return '<b>ProjectName = '+ this.point.name +', Logged Bugs= '+ this.y + '</b>';
}
}
Here is the example
Highchart has a very good documentation at :http://api.highcharts.com/highcharts#tooltip