I am using Highcharts to show temperatures from DHT22. Measurement occures every 5 min, but on the chart I can see tooltip only for first point.
Script weather.php returns JSON-array
What is wrong?
Code:
<html>
<head>
<title>Weather</title>
<script src="/js/jquery-2.1.1.min.js"></script>
<script src="/js/highcharts.js"></script>
<script>
var chart;
function requestData()
{
$.ajax({
url: 'weather.php',
datatype: "json",
success: function(data)
{
chart.series[0].setData(data.temperature);
chart.series[1].setData(data.humidity);
},
});
}
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: true
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph',
type: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Monitoring'
},
tooltip: {
shared: true
},
xAxis: {
type: 'datetime',
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Temperature/Humidity',
margin: 80
}
},
series: [{
name: 'Temperature',
data: []
},
{
name: 'Humidity',
data: []
}]
});
});
</script>
</head>
<body>
<div id="graph" style="width:100%; height:400px;"></div>
</body>
Related
I want to set navigator's position and range programmably in Highstock candlestick chart. By default, navigator's end(left) side indicate end of data series. And also width of navigator is seems like fixed some number of data.
In this picture, I want to set navigator to yellow position. How can I do this?
You need to set the xAxis min and max, to show a specific area on chart load. Can be done like this:
xAxis: {
min: 1330764400000,
max: 1330774400000
},
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/large-dataset.json', function (data) {
// Create a timer
var start = +new Date();
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function () {
if (!window.TestController) {
this.setTitle(null, {
text: 'Built chart in ' + (new Date() - start) + 'ms'
});
}
}
},
zoomType: 'x'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 3,
text: '3d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 3
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
xAxis: {
min: 1330764400000,
max: 1330774400000
},
title: {
text: 'Hourly temperatures in Vik i Sogn, Norway, 2009-2017'
},
subtitle: {
text: 'Built chart in ...' // dummy text to reserve space for dynamic subtitle
},
series: [{
name: 'Temperature',
data: data.data,
pointStart: data.pointStart,
pointInterval: data.pointInterval,
tooltip: {
valueDecimals: 1,
valueSuffix: '°C'
}
}]
});
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
Working JSFiddle example: https://jsfiddle.net/ewolden/axrce6j3/2/
If you want to show a specific area after the chart has been drawn, you can use the setExtremes function like this:
chart.xAxis[0].setExtremes(1330764400000, 1330774400000, true);
API Reference: Axis.setExtremes()
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/large-dataset.json', function (data) {
// Create a timer
var start = +new Date();
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function () {
if (!window.TestController) {
this.setTitle(null, {
text: 'Built chart in ' + (new Date() - start) + 'ms'
});
}
}
},
zoomType: 'x'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 3,
text: '3d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 3
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
xAxis: {
min: 1330764400000,
max: 1330774400000
},
title: {
text: 'Hourly temperatures in Vik i Sogn, Norway, 2009-2017'
},
subtitle: {
text: 'Built chart in ...' // dummy text to reserve space for dynamic subtitle
},
series: [{
name: 'Temperature',
data: data.data,
pointStart: data.pointStart,
pointInterval: data.pointInterval,
tooltip: {
valueDecimals: 1,
valueSuffix: '°C'
}
}]
});
});
$('#setExtremeButton').click(function() {
$('#container').highcharts().xAxis[0].setExtremes(1330774400000,1350974400000, true)
})
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
<button id="setExtremeButton">
Set new min/max
</button>
Working example: https://jsfiddle.net/ewolden/axrce6j3/12/
I am creating a pie chart in Highcharts with a legend. When I specify the series as an array of values (my preferred method), the legend displays the string "Slice" for each value. If I instead specify the series as a list of objects with named values, I correctly see the data names. Can I see the data names if I specify the series as an array of values?
Here is the code that doesn't work but that I would like to use:
<html>
<head>
<title>HighCharts pie</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
height: '500',
width: '750',
borderColor: '#EBBA95',
borderWidth: 2
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
format: '{point.y:,.0f}'
}
}
},
title: {
text: 'Rental Amounts for Paramount Directors'
},
legend: {
enabled: true
},
xAxis: {
categories: ["BADHAM, J", "COPPOLA, F", "GUILERMAN, J", "HILLER, A",
"SPIELBERG, S"],
},
series: [{
name: 'Directors',
data: [74100000, 30673000, 36915000, 50000000, 90434000],
}]
});
});
</script>
</head>
<body>
<div id="container" style="width:600px; height:400px;"></div>
</body>
</html>
Here is the code that does work when I specify the series as a list of objects with named values:
<html>
<head>
<title>HighCharts pie</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
height: '500',
width: '750',
borderColor: '#EBBA95',
borderWidth: 2
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
format: '{point.y:,.0f}'
}
}
},
title: {
text: 'Rental Amounts for Paramount Directors'
},
legend: {
enabled: true
},
series: [{
name: "Directors",
slicedOffset: 20,
data: [{
name: "BADHAM, J",
y: 74100000
}, {
name: "COPPOLA, F",
y: 30673000
}, {
name: "GUILERMAN, J",
y: 36915000
}, {
name: "HILLER, A",
y: 50000000
}, {
name: "SPIELBERG, S",
y: 90434000
}]
}]
});
});
</script>
</head>
<body>
<div id="container" style="width:600px; height:400px;"></div>
</body>
</html>
You can do this with tooltip.formatter and legend.labelFormatter and accessing the highchart options.
For the tooltip text:
tooltip: {
formatter: function() {
var sliceIndex = this.point.index;
var sliceName = this.series.chart.axes[0].categories[sliceIndex];
return 'The value for <b>' + sliceName +
'</b> is <b>' + this.y + '</b>';
}
},
And for the legend:
legend: {
enabled: true,
labelFormatter: function() {
var legendIndex = this.index;
var legendName = this.series.chart.axes[0].categories[legendIndex];
return legendName;
}
},
Live demo.
as of 5 years later, do this:
legend: {
enabled: true,
labelFormatter: function() {
let legendName = this.series.chart.axes[0].categories[this.x];
return legendName;}}
I had made one highchart in that tooltip is shows date and time in format but it is showing wrong date and time.
Please go through the code below.
HTML Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Javascript Code
var maxval="94";
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
credits: {
enabled: false
},
chart: {
type: 'column',
renderTo: 'container',
},
title: {
text: 'Weekly Traffic'
},
xAxis: {
type: 'datetime',
labels: {
format: '{value:%d-%b-%Y}',
rotation:-45,
},
},
yAxis: {
labels:{enabled: false},
title: {
text: ''
},
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+': '+Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x) +'<br>'+ Highcharts.numberFormat((this.y /maxval ) * 100) + '%';
}
},
plotOptions: {
line: {
enableMouseTracking: false
},
series:{
pointStart: 1444242600000,
pointInterval: 86400000,
shadow:false,
dataLabels:{
enabled:true,
formatter:function()
{
var pcnt = (this.y /maxval ) * 100;
return Highcharts.numberFormat(pcnt) + '%';
}
}
}
},
series: [{
name: 'Firefox',
data: [10,56,32,12,64,13,38],
},{
name: 'Chrome',
data: [52,59,10,60,94,3,8],
},{
name: 'Edge',
data: [22,56,20,35,14,73,38],
},{
name: 'Opera',
data: [30,36,80,65,44,53,81],
},{
name: 'Safari',
data: [40,16,50,77,34,33,36],
}],
});
});
});
The working fiddle is given
here.
you need to set utc false in global option of highcharts.
Highcharts.setOptions({
global: {
useUTC: false
}
});
see Updated fiddle here
How do I get Highcharts Pie charts get the selected pie id ?
I have a data array
var data= { name: series[i], y: Data[i],id:categorydata[i] };
Render the chart
new Highcharts.Chart({ ....
....
series: [{
type: 'pie',
name: 'Category',
data: data
}]
});
How do I get the id of the selected pie.
I am doing this in
plotOptions: {
series: {
animation: false,
events:{
click: function (event) {
var point = this;
//How do I Access the id???????
alert('value: ' + this.series);
}
}
},
You want the event handling on the point config, not the series. Each wedge is a point in a single series:
var data = [{ name: 'One', y: 10, id: 0 },{ name: 'Two', y: 10, id: 1 }];
// some other code here...
series:[
{
"data": data,
type: 'pie',
animation: false,
point:{
events:{
click: function (event) {
alert(this.x + " " + this.y);
}
}
}
}
],
Fiddle here.
Full running code:
var chart;
point = null;
$(document).ready(function () {
var data = [{ name: 'One', y: 10, id: 0 },{ name: 'Two', y: 10, id: 1 }];
chart = new Highcharts.Chart(
{
series:[
{
"data": data,
type: 'pie',
animation: false,
point:{
events:{
click: function (event) {
alert(this.id);
}
}
}
}
],
"chart":{
"renderTo":"container"
},
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 320px; height: 200px"></div>
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