I have a script that calls data from a MySQl data table and uses it in a HighCharts chart. I have this working fine but I want to add another variable (field) from the data table named "uniqueid".
Script No 1;
$categories = array();
$categories['name'] = 'Room';
$rows1 = array();
$rows1['name'] = 'Temp C';
$uniqueid = array();
$uniqueid['name'] = 'UniqueID';
while($row_AvgWaterTemp = mysql_fetch_assoc($AvgWaterTemp)) {
$categories['data'][] = $row_AvgWaterTemp['Room'];
$rows1['data'][] = $row_AvgWaterTemp['SeqID1306'];
$uniqueid['data'][] = $row_AvgWaterTemp['UniqueID']; // NEW FIELD
}
$result = array();
array_push($result,$categories);
array_push($result,$rows1);
array_push($result,$uniqueid); // NEW FIELD
I also have a script that calls Script No 1 and produces the chart:
Script No 2
$(function () {
var categories=[];
var data =[];
var chart;
$(document).ready(function() {
$.getJSON("../charts/chart.php", function(json) {
$.each(json,function(i,el) {
if (el.name=="Room")
categories = el.data;
else data.push(el);
});
$('#container1').highcharts({
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'x',
marginTop: 40,
marginRight: 30,
marginBottom: 50,
plotBackgroundColor: '#FCFFC5'
},
title: {
text: 'Room hot water temperatures ',
x: -20, //center
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '10px'
}
},
subtitle: {
text: 'Zoom: hold cursor over chart, hold left mouse button and drag, release button',
x: -20
},
xAxis: {
categories: categories,
labels: {
enabled: false
}
},
yAxis: {
plotLines: [{
value: '<?php echo $row_Rooms['Hotmax'];?>',
color: '#FF0000',
width: 1,
zIndex: 10,
label: {
text: 'Maximum <?php echo $row_Rooms['Hotmax'];?> °C',
align: 'center',
x: -10,
y: -5,
style: {
color: '#FF0000'
}
}
}, {
value: '<?php echo $row_Rooms['HotMin'];?>',
color: '#0000CC',
width: 1,
zIndex: 10,
label: {
text: 'Minimum <?php echo $row_Rooms['HotMin'];?> °C',
align: 'center',
x: -10,
y: 20,
style: {
color: '#0000CC'
}
}
}],
showFirstLabel: false,
lineColor:'#999',
lineWidth:0.2,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 10,
gridLineColor:'#ddd',
title: {
text: 'Temperature °C',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '10px'
}
},
},
legend: {
enabled: false,
itemStyle: {
font: '11px Trebuchet MS, Verdana, sans-serif',
color: '#000000'
},
itemHoverStyle: {
color: '#000000'
},
itemHiddenStyle: {
color: '#444'
}
},
colors: [
'#009900',
],
plotOptions: {
style: { textShadow: false },
column: {
color:'#ff00ff'
},
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
window.top.location.href = "../chart_click_hot_water.php?room=" + this.category;
}
}
},
lineWidth: 1,
dataLabels: {
enabled: false,
rotation: 0,
color: '#000000',
align: 'center',
//format: '{point.y:.1f}', // one decimal
y: 0, // 10 pixels down from the top
style: {
textShadow: false,
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
tooltip: {
enabled: true,
crosshairs: [false, true],
positioner: function () {
return { x: 5, y: -5 };
},
shadow: false,
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.8)',
formatter: function () {
return 'Room: <b>' + this.x +
'</b> is <b>' + this.y + ' °C</b>';
}
},
credits: {
enabled: false
},
series: data
});
});
});
});
My questions is, how can I include the new field "uniqueid" and use in the click function:
click: function() {
window.top.location.href ="../chart_click_hot_water.php?uniqueid=" + this.category;
}
Currently I have the "ToolTips" displaying The Room No and the water temperature but when I include the additional field in Script No 1, ToolTips only displays the Room, and displays "undefinded" for the watrer temperature.
Is it possibale to call the additional field from the data table and use it in my click function, if so how do I do that.
Many thanks in advance for your help and time.
Cheers.
UPDATE:
I have the following
$.getJSON("../charts/imaint_water_avg_temp_chart.php", function(json) {
$.each(json,function(i,el) {
if (el.name=="Room")
categories = el.data;
else if (el.name=="UniqueID") {
uniqueid = el.data;
} else data.push(el);
});
then console.log(uniqueid, "UniqueID"); I see the UniqueID's in the log.
Then I have:
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
window.top.location.href = "../imaint_chart_click_hot_water.php?room=" + this.uniqueid;
}
}
},
but the ?room= is not getting populated.
Do you or anyone else have any idea where I am going wrong. Thanks
By using this.index you'll get the index number of your data, which you can use to get the UniqueID via uniqueid[this.index].
Tip: Having extra data-fields, I would recommend you to represent the data as a list of objects with named values. It could give more structure and readability.
Your data could look like this:
[{
uniqueid: 'GLAZH03431464336298',
room: '343',
y:'50'
},{
uniqueid: 'GLAZH04051465483111',
room: '405',
y:'50'
}]
And you could follow your intuition and use this.uniqueid or this.room etc.
Example with list of objects with named values
The PHP-script could look something like this (not tested):
$data = array();
while($row_AvgWaterTemp = mysql_fetch_row($AvWaterTemp)){
$temp = array(
"uniqueid" => $row_AvgWaterTemp['UniqueID'],
"room" => $row_AvgWaterTemp['Room'],
"y" => $row_AvgWaterTemp['SeqID1306']
);
array_push($data,$temp);
}
$result = array();
array_push($result,$data);
echo json_encode($result); // Printing it out as json
Your old initial JS code would be the same.
Good luck!