i tried add some url on my chart bar so when it click it goes to another page
but i have no idea where i should put the option key. Please give some advice, here's my code
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = 'https://xxxxxxxx.com/ratnik2/chart_month.php?m=' +
this.options.key;
}
}
}
},
column: {
stacking: 'normal',
pointPadding: 0.2,
borderWidth: 0,
dataLabels:
{
enabled:true
}
}
},
series: [ {
name: 'Surat Terbit',
data: [";
$query->execute("select month(tanggal), count(*) as jumlah
from surat where year(tanggal)=year(now())
and tgl_ttd is not null
group by month(tanggal)
order by month(tanggal) asc
");
while ($row = $query->fetch()){
$isi .= $row["jumlah"].",";
}
$isi .="]
name: '',
key: ''
}]
});
Take a look at this demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-url/
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = 'https://en.wikipedia.org/wiki/' +
this.options.key;
}
}
}
}
},
Related
I am using HighChart library to show Pie Chart on my page, I am keeping showTable always true to show every time.
The problem is whenever data binds to charts using JQuery Ajax post dynamically, i see proper data in chart but also it keeps adding new data table everytime at the bottom. E.g. First time there will be only one table, after another call there will be two tables added and so on. Why Hightcharts not updating the same table again or is there a way to kill any existing table.?
hc = Highcharts.chart(chartName, {
chart: {
type: 'pie',
options3d: {
enabled: false,
alpha: 45
},
style: {
color: '#575962'
}
},
title: {
text: title,
style: {
color: '#575962',
fontweight: '400'
}
},
subtitle: {
text: 'Current Month(Top 10)'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
credits: {
enabled: false
},
exporting: {
showTable: true
},
series: [{
name: 'Price',
data: [],
dataLabels: {
formatter: function () {
//const point = this.point;
//return '<span style="color: #575962;font-size:11px;font-weight: 400">' +
// point.name + ': $' + point.y + '</span>';
}
}
}]
});
Why Hightcharts not updating the same table again or is there a way to kill any existing table.?
I have achieved this by removing the series on each call and adding them again with new data. Hope this helps if anyone else looking and couldn't find any other answer.
//Removing Series
while (hc.series.length > 0) {
hc.series[0].remove(false);
}
//Adding new Series
hc.addSeries({
name: 'Price',
data: [],
dataLabels: {
formatter: function () {
const point = this.point;
return '<span style="color: #575962;font-size:11px;font-weight: 400">' +
point.name + ': $' + point.y + '</span>';
}
}
});
//Binding Series data
var res = result.Data.slice(0, 10);
res.forEach(function (element, index) {
hc.series[0].addPoint({
name: element.ResourceGroupName,
y: element.TotalMonthlyPrice,
});
});
I'm using the small U.S. map in HighMaps and I want each state and it's datalabel to open up a new URL when clicked. I have the state working, but the label does not work.
this is what I tried:
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
click: function(e) {
const url = e.target.point.value;
window.open(url);
}
}
},
datalabels: {
events: {
click: function(e) {
const url = e.target.point.value;
window.open(url);
}
}
}
}
},
Please see https://jsfiddle.net/sfjeld/zcsxobfa/12/ for the code.
Use the this.value instead of e.target.point.value:
plotOptions: {
series: {
point: {
events: {
click: function() {
const url = this.value;
window.open(url);
}
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/6gpL57nf/
In your example, you could use:
e.point.properties.hasc
For get the value from the clicked point.
Code:
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
click: function(e) {
const url = "https://www.google.com/search?q=" + e.point.properties.hasc;
window.open(url);
}
}
},
}
},
You can check other values using this path:
console.log(e.point.properties);
The full code is in this forked jsfiddle
I form charts and a have such series format:
series: {
id : '001',
name: 'name,
data: [],
color: '#fff'
}
In plotOptions I created onClick event:
plotOptions: {
series: {
stacking: 'normal',
cursor: 'pointer',
allowPointSelect: true,
marker: {
states: {
select: {
enabled: true
}
}
},
point: {
events: {
click: function () {
console.log('!!!!!', this);
}
}
}
}
}
After clock i get object in log. There is all information except id: '001'. How can I get it?
You attached the click event to the point, so this inside the callback refer to the point object. Id is defined in series' options.
You can access it from series.options object:
point: {
events: {
click: function() {
console.log('!!!!!', this.series.options.id);
}
}
}
live example: http://jsfiddle.net/4s3ayhfy/
I am using Highcharts it is working fine but i want to change in pie slice when i click on single pie slice then that slice overlap two slice(right or left slice).
Below is the image attached tha i have done in pie chart.
Below is the image attached of the expexted pie chart result
You can add your own method, which will resize shape on click, for example: http://jsfiddle.net/BlackLabel/8vd6cod1/
function resizeSlice(point, change) {
// Original shape params are stored in shapeArgs:
var shape = point.shapeArgs;
if (point.graphic) {
point.graphic.attr({
// "r" is outer radius:
r: shape.r + change,
// "innerR" is inner radius:
innerR: shape.innerR - change
});
}
}
// Build the chart
Highcharts.chart('container', {
chart: {
type: 'pie',
events: {
// On window resize, apply change:
redraw: function() {
Highcharts.each(this.series[0].points, function(point) {
resizeSlice(point, point.customResized ? 5 : 0)
});
}
}
},
plotOptions: {
pie: {
innerSize: '90%',
cursor: 'pointer',
dataLabels: {
enabled: false
},
point: {
events: {
click: function() {
var change = 0;
// Custom param, can be called whatever we want:
this.customResized = !this.customResized;
if (this.customResized) {
// Let's resize!
change = 5;
}
resizeSlice(this, change);
}
}
}
}
},
series: [{
data: [3, 4, 5, 6]
}]
});
I have make some change to this code for re size all other pie.
: http://jsfiddle.net/8vd6cod1/2/
function resizeSlice(point, change) {
// Original shape params are stored in shapeArgs:
var shape = point.shapeArgs;
if (point.graphic) {
point.graphic.attr({
// "r" is outer radius:
r: shape.r + change,
// "innerR" is inner radius:
innerR: shape.innerR - change
});
}
}
// Build the chart
Highcharts.chart('container', {
chart: {
type: 'pie',
events: {
// On window resize, apply change:
redraw: function() {
Highcharts.each(this.series[0].points, function(point) {
resizeSlice(point, point.customResized ? 5 : 0)
});
}
}
},
plotOptions: {
pie: {
innerSize: '90%',
cursor: 'pointer',
dataLabels: {
enabled: false
},
point: {
events: {
click: function() {
Highcharts.each(this.series.points, function(point) {
resizeSlice(point, 0)
});
var change = 0;
// Custom param, can be called whatever we want:
this.customResized = !this.customResized;
if (this.customResized) {
// Let's resize!
change = 5;
}
resizeSlice(this, change);
}
}
}
}
},
series: [{
data: [3, 4, 5, 6]
}]
});
I have a graph that opens up a colorbox when a piece of the pie is selected. However, I am trying to put permissions on this so that if a particular person is apart of an array of allowed pieces of the pie, then allow the click, otherwise ignore it.
Is there some advice you can give me that would point me in the right direction?
My array is called $allowedRegs, which would return NE, NW, SW, and the $person variable contains an employee Id number. The getRegMgr() function should be returning the ID number of the allowed employee. Is that allowed?
<script type="text/javascript">
$(document).ready(function() {
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
backgroundColor: null
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>${point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
events: {
click: function(e) {
//window.console.log(this);
var point = e.point.name;
var explode = point.split("~");
var loc = explode[0];
var person = <?php echo $respid;?>
<?php
if(in_array($person, getRegMgr($allowedRegs))) {
?>
$.colorbox({ iframe:true, width:"90%", height:"90%", href: "reportDetails.php?dept=<?php echo $dept;?>&fy=<?php echo $selectedFy;?>&location="+loc+"&person="+person});
<?php } ?>
}
},
name: 'Total Revenue Earned:',
data: [
<?php
foreach($regionId as $region) {
//Get Data
$getData = mysql_query("SELECT SUM(hire_net) as rentalRev FROM dw_invoice LEFT JOIN dw_rep_zips ON dw_invoice.zip = dw_rep_zips.zip WHERE contract_type='H' and region = '".$region."' and invoice_date >= '".$fyStart."' AND invoice_date < '".$fyEnd."' GROUP BY region") or die("Cannot get data: " . mysql_error());
if(mysql_num_rows($getData) > 0) {
while($row = mysql_fetch_assoc($getData))
{
echo "['".getRegName($region)."', " . $row["rentalRev"]."], ";
}
}
}
?>
]
}]
});
});
</script>
Better is setting global variable in javascript, which value is getting form PHP. Then only what you need is add if in click event.
if(globalVariablePermission)
//do this
else
return false;