Highcharts pie charts can have url links

2024/2/27 7:19:39

I am using Highcharts pie charts in my application, where the data for pie chart is populating from database. My question is after populating pie chart, if i click certain area it should render to particular php page. Is it possible?

here is my code :

    function open_risk_level_pie(){$chart = new Highchart();$chart->chart->renderTo = "open_risk_level_pie";$chart->chart->plotBackgroundColor = null;$chart->chart->plotBorderWidth = null;$chart->chart->plotShadow = false;$chart->title->text = "Risk Level";$chart->tooltip->formatter = new HighchartJsExpr("function() {return '<b>'+ this.point.name +'</b>: '+ this.point.y; }");$chart->plotOptions->pie->allowPointSelect = 1;$chart->plotOptions->pie->cursor = "pointer";$chart->plotOptions->pie->dataLabels->enabled = false;$chart->plotOptions->pie->showInLegend = 1;$chart->plotOptions->pie->colors = array('red', 'orange', 'yellow', 'black');$chart->credits->enabled = false;// Open the database connection$db = db_open();// Get the risk levels
$stmt = $db->prepare("SELECT * from `risk_levels`");
$stmt->execute();
$array = $stmt->fetchAll();
$high = $array[0][0];
$medium = $array[1][0];
$low = $array[2][0];// Query the database$stmt = $db->prepare("select a.calculated_risk, COUNT(*) AS num, CASE WHEN a.calculated_risk >= " . $high . " THEN 'High' WHEN a.calculated_risk < " . $high . " AND a.calculated_risk >= " . $medium . " THEN 'Medium' WHEN a.calculated_risk < " . $medium . " AND a.calculated_risk >= " . $low . " THEN 'Low' WHEN a.calculated_risk < " . $low . " AND a.calculated_risk >= 0 THEN 'Insignificant' END AS level from `risk_scoring` a JOIN `risks` b ON a.id = b.id WHERE b.status != \"Closed\" GROUP BY level ORDER BY a.calculated_risk DESC");$stmt->execute();// Store the list in the array$array = $stmt->fetchAll();// Close the database connectiondb_close($db);// If the array is emptyif (empty($array)){$data[] = array("No Data Available", 0);}// Otherwiseelse{// Create the data arrayforeach ($array as $row){$data[] = array($row['level'], (int)$row['num']);}$chart->series[] = array('type' => "pie",'name' => "Level",'data' => $data);}echo "<div id=\"open_risk_level_pie\"></div>\n";
echo "<script type=\"text/javascript\">";
echo $chart->render("open_risk_level_pie");
echo "</script>\n";

}

Answer

There is an exmaple on the highcharts website showing something similar. You can use the point/events/click function to trigger a new page load:

 plotOptions: {series: {cursor: 'pointer',point: {events: {click: function() {location.href = this.options.url;}}}}},

http://jsfiddle.net/w5Lx4/

Note, in this example, the URL is added to the series data:

 data: [{y: 29.9,url: 'http://bing.com/search?q=foo'}, {

You could replace this with generating a URL based on the point y value.

http://en.ppmy.cn/q/42193.html

Related Q&A

str_shuffle() equivalent in javascript?

Like the str_shuffle() function in PHP, is there a function similar in shuffling the string in javascript ?Please help !

Slice each string-valued element of an array in Javascript

I have the following array:var arr = ["Toyota", "Hyundai", "Honda", "Mazda"];I want to slice each element backwards, like:var arr = ["Toyota", "Hy…

Using Javascript to hide and show drop down menu and text field

In the following drop-down menu, when a user selects operation No, I want the next drop-down menu displayed <select id="OperationType" onChange="check(this);"><option value…

How to add two arrays in pairwise fashion

I would like to add the values of two JavaScript arrays that have the same length to get a third array so that the the first value of the third array is the sum of the first values of the two first arr…

Why new Boolean(false) is true? [duplicate]

This question already has answers here:Why does !new Boolean(false) equals false in JavaScript?(2 answers)Closed 8 years ago.I do not understand whats going on var x=new Boolean(false) if(x){console.l…

Does Phonegap support WebRTC?

I want to build an augmented reality app. I was thinking of using something like the Wikitude SDK here http://www.wikitude.com/developer or using this javascript library https://github.com/mtschirs/js-…

Improve Typescript speed when a type is any member of a map?

E.g., I have these types: class User extends Entity {}class Post extends Entity {}type Entities = {user: User,post: Post,// potentially hundreds more };type EntityType = user | post | ...;When I use En…

Open Highcharts in modal window

Im working on a site where I use Highcharts quite heavily for presenting data in charts. I want to user to be able to "zoom" each chart into a modal window for better readability.I know how t…

TypeError Base64 is not a function when using Buffer.from in Node 4.3

I am debugging a lambda function locally on Node 4.3 using the standard Amazon Machine Image (linux x64)When I run the program, I get an error in a function that is meant to decode a base64 string to u…

jquery position() not working correctly in safari and chrome

Ive seen this question posed once or twice before, but never with an answer that applies to my problem (as far as I know). I have a tooltip that appears when a link is clicked. I set the position of t…