How to create Highcharts pareto with drilldown - highcharts

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 ?>
]

Related

Highcharts:Grouped and stacked legend

I currently have a legend like Joe and John. I am needing to have a legend on Male and Female as well. How to add male and female legend as well to this. kindly help me out.
This is the JSFiddle of the code which I have tried so far.
Have also created a runnable snippet below if it would be of any help.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male',
color: "#1f77ac",
id: 'John'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male',
color: "#098ebb",
id: 'Joe'
}, {
name: 'John',
data: [2, 5, 6, 2, 1],
stack: 'female',
linkedTo: 'John',
color: "#1f77ac"
}, {
name: 'Joe',
data: [3, 2, 4, 4, 3],
stack: 'female',
linkedTo: 'Joe',
color: "#098ebb",
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
You can add empty series with names: male and female. To handle the click event use legendItemClick function:
series: [..., {
name: 'male',
events: {
legendItemClick: function() {
// hide some series
}
}
}, {
name: 'female',
events: {
legendItemClick: function() {
// hide some series
}
}
}]
Live demo: https://jsfiddle.net/BlackLabel/6x52kzqd/
API Reference: https://api.highcharts.com/highcharts/series.line.events.legendItemClick

Highcharts tooltip pointFormat

Below is my code for a Yii 1 highcharts combination graph which includes a pie chart, bar graph and a line graph. For the line graph I want to display the point after doing a simple division by 10 (ie, if the point value is 60 it should display 6 when cursor placed above that point ). But with my below code it is showing as 60/10 instead of 6. Also, I want this division to be done only for the line graph and not for other two graphs. Please help me solve this issue.
<!---Start Combination Chart ----->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="combination"><div id="container1" style="min-width: 310px; height: 500px; margin: 0 auto"></div></div>
<script>
var x=<?php echo json_encode(array_values($subjectList));?>;
Highcharts.setOptions({
colors: ['blue', '#bd1111', '#1b670e', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Highcharts.chart('container1', {
title: {
text: '<b>Passed/Failed Students</b>',
margin: 110
},
xAxis: {
categories: x,
title: {
text: '<-------- Name Of Subjects ------->'
}
},
yAxis: {
title: {
text: 'Number Of Students'
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
credits: {
enabled: false
},
exporting: { enabled: false },
series: [{
type: 'column',
name: 'Passed',
data: <?php echo json_encode($passedMarkList);?>//[60, 60, 41, 23, 49, 34, 23, 44]
}, {
type: 'column',
name: 'Failed',
data: <?php echo json_encode($failedMarkList);?>
},
{
type: 'line',
tooltip: {
pointFormat: '<span>{point.name}</span>: <b>{point.y}/10</b><br/>'
},
name: 'Subject Average GPA',
data: [60, 80, 40, 80, 50, 90, 70, 0, 60, 50],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
},
{
type: 'pie',
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
},
name: 'Total Number Of Students',
data: [
{
name: 'PASSED',
y: <?php echo json_encode($semesterPassStudents);?>,
color: Highcharts.getOptions().colors[0] // Jane's color
},
{
name: 'FAILED',
y: <?php echo json_encode($semesterFailStudents);?>,
color: Highcharts.getOptions().colors[1] // John's color
},
{
name: 'Result Not Yet Published',
y: <?php echo json_encode($resultUnPublished);?>,
dataLabels: {
enabled: false,
},
color: Highcharts.getOptions().colors[5] // John's color
},
],
center: [80, -90],
size: 150,
showInLegend: false,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
distance: -30,
}
}]
});
</script>
<!---End Combination Chart----->
Below is my parsed view page source
<!---Start Combination Chart ----->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="combination"><div id="container1" style="min-width: 310px; height: 500px; margin: 0 auto"></div></div>
<script>
var x=["MA101 - CALCULUS","PH100 - ENGG. PHYSICS","BE100 - ENGG. MECHANICS","BE101-05 - INTRODUCTION TO COMPUTING & PROBLEM SOLVING","BE103 - INTRODUCTION TO SUSTAINABLE ENGG.","EC100 - BASICS OF ELECTRONICS ENGG.","PH110 - ENGG. PHYSICS LAB","EC110 - ELECTRONICS ENGG. WORKSHOP","CS110 - COMPUTER SCIENCE WORKSHOP","U100-2 - MICROPROJECT"];
Highcharts.setOptions({
colors: ['blue', '#bd1111', '#1b670e', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Highcharts.chart('container1', {
title: {
text: '<b>Passed/Failed Students</b>',
margin: 110
},
xAxis: {
categories: x,
title: {
text: '<-------- Name Of Subjects ------->'
}
},
yAxis: {
title: {
text: 'Number Of Students'
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
credits: {
enabled: false
},
exporting: { enabled: false },
series: [{
type: 'column',
name: 'Passed',
data: [60,59,61,62,61,62,62,53,59,62]//[60, 60, 41, 23, 49, 34, 23, 44]
}, {
type: 'column',
name: 'Failed',
data: [2,3,1,0,1,0,0,9,3,0] },{
type: 'line',
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}/10 %</b><br/>'
},
name: 'Subject Average GPA',
data: [60, 80, 40, 80, 50, 90, 70, 0, 60, 50],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'pie',
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
},
name: 'Total Number Of Students',
data: [
{
name: 'PASSED',
y: 46,
color: Highcharts.getOptions().colors[0] // Jane's color
},
{
name: 'FAILED',
y: 16,
color: Highcharts.getOptions().colors[1] // John's color
},
{
name: 'Result Not Yet Published',
y: 2,
dataLabels: {
enabled: false,
},
color: Highcharts.getOptions().colors[5] // John's color
},
],
center: [80, -90],
size: 150,
showInLegend: false,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
distance: -30,
}
}]
});
</script>
<!---End Combination Chart----->

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 bar chart with negative and positive data

I am working on a script that displays a bar chart. I have this working to a degree.
What I am trying to do is to display the results of an MySQL query in the chart with the negative values on the left and the positive values on the right. The result values in the table are "1" or "2".
The code so far is:
$(function () {
var data =[<?php
mysql_select_db($database_test, $con);
$query_result = sprintf("SELECT COUNT(Condition), ConditionValue AS RC1 FROM FeedBack WHERE ConditionValue = 1 AND FeedBackDate BETWEEN '" . date("Y-m-d", strtotime($_POST['FromDate'])) . "' AND '". date("Y-m-d", strtotime($_POST['ToDate'])) . "'");
$result = mysql_query($query_result, $con) or die(mysql_error());
$totalRows_result_rc = mysql_num_rows($result);
while ($row_result = mysql_fetch_assoc($result)){
?>
[<?php echo $row_result['RC1'];?>]
<?php
}
?>
]
$('#container1').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Condition'
},
subtitle: {
text: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -20,
y: 34,
floating: false,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
plotOptions: {
series: {
shadow:false,
borderWidth:0,
dataLabels:{
enabled:true,
formatter: function() {
return this.y +'%';
}
}
}
},
xAxis:{
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickLength:3,
title:{
text:'<?php print $totalRows_result_rc;?> records'
},
},
yAxis:{
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:3,
gridLineColor:'#ddd',
title:{
text:'Between <?php print $_POST['FromDate'];?> and <?php print $_POST['ToDate'];?>',
rotation:0,
margin:50,
},
labels: {
formatter: function() {
return (this.isLast ? this.value + '%' : this.value);
}
}
},
series: [{
color: '#CC0000',
name: 'Conditione',
data: data,
maxPointWidth: 10,
index:0,
legendIndex:1,
exporting: {
filename: 'Ccondition'
}
}]
});
});
I have written this in a number of differnet way but can not getthe required result.
Can anyone point out where I am gong wrong. Many thanks in advance for the time you may spend helping.
This can by done by using two series: one contains the negative and one contains the positive values. They should (but not required depending on your needs) share the same xAxis value. Take a look at this example on the highcharts site. Note the use of two series:
series: [{
name: 'Male',
data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
-3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
-2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
}, {
name: 'Female',
data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
1.8, 1.2, 0.6, 0.1, 0.0]
}]
And the are linked to the same categories:
var categories = ['0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '];
They do some formatting here such that the negative values are labeled as positive and some other yAxis label changes.

Tooltip in Scatter

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}, ',')" ?

Resources