I am using the Highcharts JavaScript library to visualize some float values, which i feed into the js code via php. As you can see in the following picture, on each point's mouseover are now displayed the two values that correspond to the axes values and the text "text: undefined".
My question is : Is there a way to display a different text for each point of the scatter plot? I have a text that corresponds to each point, but I haven't found a way to display it.
My JavaScript/php code is:
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'},
title: {
text: 'Average 24hrs Sentiment for <?php echo $channel?> by Gender '
},
subtitle: {
text: 'Source: '
},
xAxis: {
title: {
enabled: true,
text: 'Hours ([0-24h].[0-60mins])'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Sentiment (N. Bayes) %'
}
},
tooltip: {
formatter: function() {
return ''+
this.x +' hrs, '+ this.y +' sentiment, text: ';
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 24,
y: 1,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: [
<?php
for($j=0;$j<$i1;$j++)
{
if($females[$j]['Hour'][0] == "0")
{
echo '['.$females[$j]['Hour'][1].'.'.$females[$j]['Min'].','.$females[$j]['Sent'].'"]';
}
else
echo '['.$females[$j]['Hour'].'.'.$females[$j]['Min'].','.$females[$j]['Sent'].'"]';
if(($j+1)!=$i1)
{
echo ",";
}
}
?>
]},
{
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [
<?php
for($j=0;$j<$i2;$j++)
{
if($males[$j]['Hour'][0] == "0")
{
echo '['.$males[$j]['Hour'][1].'.'.$males[$j]['Min'].','.$males[$j]['Sent'].',"'.$males[$j]['Text'].'"]';
}
else
echo '['.$males[$j]['Hour'].'.'.$males[$j]['Min'].','.$males[$j]['Sent'].',"'.$males[$j]['Text'].'"]';
if(($j+1)!=$i2)
{
echo ",";
}
}
?>
]}]
});
});
});
Thank you.
If the text is unique to each point, you can pass more than the x and y as values. In the following example I pass three other values: locked, unlocked, and potential. Then to access them in the tooltip formatter, do so by using the this.point.locked
this.x +' hrs, '+ this.y +' sentiment, text: ';
Try to set the text in this code line, just in order to check whether my suggestion will solve your problem, try :
this.x +' hrs, '+ this.y +' sentiment, text: '+this.x;
And then check whether (this.x) value appears insted of "undefined" .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.