Tooltip in Scatter - highcharts

I having problem adding unix timestamp as extra point in tooltip.
My code is showing no graph. Help!
Here is part of my code:
My data array: $data[] = "[x:$valDE,y:$valDN,z:$datetime]";
And my javascript:
var <?php echo $chart ?> = new Highcharts.Chart({
chart: {
type: 'scatter',
renderTo: '<?php echo $container ?>',
zoomType: '',
marginLeft: 50,
borderWidth: 1
},
title: {
text: '<?php echo "$gps $location"; ?>',
style: {
fontSize: '<?php echo $sizeTitle ?>'
}
},
subtitle: {
text: 'Data is average pr. day - viewing <?php if($range == "All"){echo "ALL DATA";}else if($range == "1 YEAR"){echo "LAST YEAR";}else{ echo "last ".$range;} ?>',
style: {
fontSize: '<?php echo $sizeSubTitle ?>'
}
},
xAxis: {
title: {
enabled: true,
text: 'EW',
align: 'high'
},
min:-<?php echo $maxAxis ?>,
max:<?php echo $maxAxis ?>,
offset: <?php echo $offSetX ?>,
tickInterval: <?php echo $tickInterval ?>
},
yAxis: {
title: {
text: 'NS',
align: 'high'
},
min:-<?php echo $maxAxis ?>,
max:<?php echo $maxAxis ?>,
offset:<?php echo $offSetY ?>,
lineWidth:1,
tickInterval: <?php echo $tickInterval ?>
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: <?php echo $legendX ?>,
y: <?php echo $legendY ?>,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1,
itemStyle: {
fontSize: '<?php echo $legendSize ?>'
}
},
plotOptions: {
scatter: {
marker: {
radius: <?php echo $lineWidth ?>,
states: {
hover: {
enabled: false,
lineColor: 'rgb(100,100,100)'
}
},
symbol: "circle"
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'EW: {this.x} mm<br>NS: {this.y} mm<br>Date: {this.point.z}'
}
}
},
series: [{
color: '#990000',
name: '<?php echo $legFive ?>',
data:[<?php echo join(${$da}, ',') ?>]
},{
color: '#ff0000',
name: '<?php echo $legFour ?>',
data:[<?php echo join(${$da4}, ',') ?>]
},{
color: '#ffcc33',
name: '<?php echo $legThree ?>',
data:[<?php echo join(${$da3}, ',') ?>]
},{
color: '#66ff66',
name: '<?php echo $legTwo ?>',
data:[<?php echo join(${$da2}, ',') ?>]
},{
color: '#3300ff',
name: 'Last',
data:[<?php echo join(${$da1}, ',') ?>]
}]
});
<?php }//for ?>
});

See this example for how to go about it:
http://jsfiddle.net/jlbriggs/fbMQf/
You need to supply the data as an object with key->value pairs, and call accordingly in your formatter.
see fiddle for code

UNIX timestamps should be multiply by 1000, and be sorted by x ascending. Could you attach your example series data: "echo join(${$da1}, ',')" ?

Related

How to create Highcharts pareto with drilldown

I want to create a pareto with drilldown. I'm able to create the drilldown, but the pareto line doesn't appear on the graph. Is there a demo of how to do this so that I can use that as an example?
This in an example of the code that I wrote, the drilldown works, but the pareto line doesn't appear.
series: [
{
type: 'pareto',
name: 'Pareto',
yAxis: 1,
zIndex: 10,
color: 'orange',
baseSeries: 1,
tooltip: {
valueDecimals: 2,
valueSuffix: '%'
},
{
name: 'Example',
type: 'column',
data: [{}
<?php foreach($Example1 as $m => $a): ?>
,{
name: '<?php echo $m ?>',
y: <?php echo $a['Qty'] ?>,
drilldown: '<?php echo $m ?>'
}
<?php endforeach ?>
],
dataLabels: {
enabled: true,
color: '#FFFFFF',
align: 'center',
format: '{point.y}',
style: {
color: 'white',
fontSize: '15px',
}
}
}],
drilldown: {
series: [{}
<?php foreach ($Example1 as $m => $a): ?>
,{
name: '<?php echo $m ?>',
id: '<?php echo $m ?>',
data: [
<?php foreach ($Example2 as $r): ?>
<?php if ($r['Example'] == $m): ?>
['<?php echo $r['ExampleExample'] ?>', <?php echo $r['Qty'] ?>],
<?php endif ?>
<?php endforeach ?>
]
}
<?php endforeach ?>
]

How to set Y axis with equal interval in Highcharts?

I know this question has been asked before on StackOverflow. However, I have slightly different ask so please read it before you mark it as Duplicate.
I am trying to set y-axis to 0,1,2,4,8,16,32,64,128.... also, the spacing between those tickPoints should be equal. I have tried setting various interval but it didn't help below is my code.
$("#ClickSmu_man").click(function () {
var theModal = $("#ModalSmu_man").modal({
show: false
});
Highcharts.chart('container_man', {
chart: {
type: 'column'
},
title: {
text: 'In Progress weekly pending Avg. Age per DE Manager Count'
},
xAxis: {
categories: [
<?php foreach($smu_top_manager as $topma){ ?>
'<?php echo $topma['name']; ?>',
<?php } ?>
]
},
yAxis: {
min: 0,
tickInterval: 1,
title: {
text: 'Platform'
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [
{
name: 'Age',
data: [<?php echo implode(',', $age_manager); ?>],
},
{
name: 'asr9k_px',
data: [<?php echo implode(',', $asr9k_px_manager); ?>],
},
{
name: 'asr9k_x64',
data: [<?php echo implode(',', $asr9k_x64_manager); ?>],
},
{
name: 'crs_px',
data: [<?php echo implode(',', $crs_px_manager); ?>],
},
{
name: 'ncs5500',
data: [<?php echo implode(',', $ncs5500_manager); ?>],
},
{
name: 'ncs5500_sysadmin',
data: [<?php echo implode(',', $s5500_sysadmin_manager); ?>],
},
{
name: 'ncs5k',
data: [<?php echo implode(',', $ncs5k_manager); ?>],
},
{
name: 'ncs6k',
data: [<?php echo implode(',', $ncs6k_manager); ?>],
},
{
name: 'xr12000',
data: [<?php echo implode(',', $xr12000_manager); ?>],
},
{
name: 'xrv9k',
data: [<?php echo implode(',', $xrv9k_manager); ?>],
},
{
name: 'xrv9k_sysadmin',
data: [<?php echo implode(',', $xrv9k_sysadmin_manager); ?>],
}
]
});
});
Use yAxis.tickPositions to define ticks in your chart.
xAxis: {
tickPositions: [0,2,4,8,16,32,64],
},
example: http://jsfiddle.net/f94hdLqt/
If you want to set ticks dynamically, you can use tickPositioner.

Highcharts - How to deploy data labels & tooltips for 2nd data series

I've created a Highcharts that is a bit unusual. It's placing two series in the same plotarea, but instead of them "lining up" and sharing the entire plot area, series0 is using the left side of the area and series1 is using the right side. Everything is working great except for two (related) things: I cannot get tooltips or datalabels to display for the series1 data on the right-hand side of the page. Completely guessing here, but I'm guessing the series are not being shared because they are not lining up together.
I've spent the past day trying various things and have completely ran out of ideas. Hoping a fresh set of eyes might spot something that will work. Attached is a fiddle for your viewing pleasure...
https://jsfiddle.net/wk0uh72o/
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="adaRate"></div>
$(function() {
var options = {
chart: {
renderTo: 'adaRate',
type: 'bar',
width: 600,
height: 400
},
title: {
text: 'Average Daily Attendance Rate',
align: 'center',
style: {
fontWeight: 'bold',
color: 'rgba(0,0,0,.9)'
}
},
legend: {
enabled: true
},
tooltip: {
shared: true,
crosshairs: true,
formatter: function() {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function() {
s += '<br/>' + this.series.name + ': ' +
this.y + '%';
});
return s;
},
},
xAxis: {
labels: {
style: {
fontWeight: 'bold'
}
}
},
yAxis: [{
min: 0,
max: 100,
opposite: true,
width: 270,
title: {
text: 'Average Daily Attendance %'
}
}, {
min: -10,
max: 10,
offset: 0,
opposite: true,
plotLines: [{
color: 'red',
value: 0,
width: 2
}],
left: 400,
width: 170,
title: {
text: 'Variance from Prior Year'
}
}],
series: [{
name: 'ADA',
dataLabels: {
enabled: true,
align: 'right',
color: '#FFFFFF',
x: -10
},
yAxis: 0,
}, {
type: 'scatter',
name: 'PY Variance',
dataLabels: {
enabled: true,
align: 'center',
color: '#000000',
x: -10
},
yAxis: 1,
}],
credits: {
enabled: false
}
};
var categories = ["School 1", "School 2", "School 3", "School 4", "School 5", "School 6", "School 7"];
var adaRate = [96.4, 95.9, 93.3, 92.3, 89.8, 85.4, 83.9];
var adaVar = [{
"color": "yellow",
"y": -.8
}, {
"color": "red",
"y": -3.5
}, {
"color": "lightgreen",
"y": 1.5
}, {
"color": "lightgreen",
"y": 2.3
}, {
"color": "red",
"y": -4.3
}, {
"color": "green",
"y": 5.3
}, {
"color": "darkgreen",
"y": 7.8
}
];
options.xAxis.categories = categories;
options.series[0].data = adaRate;
options.series[1].data = adaVar;
var chart = new Highcharts.Chart(options);
});
I don't have time to write a longer answer. But, shared tooltips don't work for unordered data (pie, scatter, flag). See http://api.highcharts.com/highcharts#tooltip.shared
You can simulate a scatter series using a line series with lineWidth of 0. You also have to modify the mouseOver event to not increase the lineWidth on hover.
Just need to remove tooltip on the top level. But set it in each series separately.
series: [{
name: 'ADA',
dataLabels: {
enabled: true,
align: 'right',
color: '#FFFFFF',
x: -10
},
yAxis: 0,
tooltip: {
pointFormat: 'First {point.y}'
}
}, {
type: 'scatter',
name: 'PY Variance',
dataLabels: {
enabled: true,
align: 'center',
color: '#000000',
x: -10
},
yAxis: 1,
tooltip: {
pointFormat: 'Second {point.y}'
}
}],
refer to fiddle I updated from yours.

Highcharts add points but not to all categories

I would like to add points to my highcharts without expecting to fulfill all the categories.
is it possible? any work around?
I've done the same when X data is based on time, but could it be done with other kind of data?
For example one serie could be just Apples and Oranges, but not the other categories. See code:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [[Apples,5], [Oranges, 6]]
}, {
name: 'Jane',
data: [[Grapes,2]]
}, {
name: 'Joe',
data: [[Grapes,2], [Bananas, 4]]
}]
});
});
You can use the indexes into your categories: http://jsfiddle.net/BwyAj/
var categories = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
...
series: [{
name: 'John',
data: [[categories.indexOf('Apples'),5], [categories.indexOf('Oranges'), 6]]
}, {
name: 'Jane',
data: [[categories.indexOf('Grapes'),2]]
}, {
name: 'Joe',
data: [[categories.indexOf('Grapes'),2], [categories.indexOf('Bananas'), 4]]
}]

How draw a stacked column chart with type datetime

Whats the reason for the following chart don't render dates on the xAxis:
http://jsfiddle.net/NwkAr/
This are the settings:
{
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: [10000, 20000, 30000, 40000],
type: 'datetime'
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' + 'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
}
Remove categories, you can't use categories and datetime axis in the same time.

Resources