javascript - Show datalabels for spiderweb only when hovered over the line or the legend? -


i creating spiderweb chart following highcharts guide. data label enabled. want hide data on load , show data when user hovers on line or hovers overs legend. how can accomplish this?

here link jsfiddle: http://jsfiddle.net/mmaharjan/fqrvq3m8/

$(function () {      $('#container').highcharts({          chart: {             polar: true,             type: 'line'         },          title: {             text: 'hello world',         },          pane: {             size: '80%'         },          xaxis: {             categories: ['sales', 'marketing', 'development', 'customer support',                 'information technology', 'administration'],             tickmarkplacement: 'on',             linewidth: 0         },          yaxis: {             gridlineinterpolation: 'polygon',             linewidth: 0,             min: 0,             max: 5,             labels: {                 enabled: false,             }         },         plotoptions: {             line: {                 datalabels: {                     enabled: true                 }             }         },         legend: {             align: 'center',             verticalalign: 'bottom',             layout: 'vertical'         },          series: [{              name: 'allocated budget',             data: [1, 2, 1, 3, 4],             pointplacement: 'on'         }, {              name: 'actual spending',             data: [3, 4, 5, 3, 2],             pointplacement: 'on'         }]      }); });

html:

<script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts-more.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

my suggestion use events mouseover , mouseout of series. these hide , show data labels. using callback method when constructing chart can hide data labels default , add additional events hovering legend items, utilizing functionality of mouseover , mouseout.

to illustrate, in chart options have:

plotoptions: {     series: {         datalabels: {             enabled: true         },         events: {             mouseover: function(event) {                 // show data labels current series                 $.each(this.data, function(i, point){                     point.datalabel.show();                 });             },             mouseout: function(event) {                 // hide data labels current series                 $.each(this.data, function(i, point){                     point.datalabel.hide();                 });             }         }     } }

and callback function be:

$('#container').highcharts({     // options... }, function(chart) {     // hide data labels default     $.each(chart.series, function(i, series) {         $.each(series.data, function(i, point){             point.datalabel.hide();         });     });      // add events hovering legend items     $('.highcharts-legend-item').hover(function(e) {         chart.series[$(this).index()].onmouseover();     },function() {         chart.series[$(this).index()].onmouseout();     }); });

see this jsfiddle complete example.


Comments

Post a Comment

Popular posts from this blog

shopping cart - Page redirect not working PHP -

im trying redirect user when click "empty cart". redirect working "add cart" not "empty cart". ideas great. in main .php file set current url seen $current_url = base64_encode("http://$_server[http_host]$_server[request_uri]"); then below cartaction.php file handles actions such "add cart" , "empty cart" <?php session_start(); include_once 'config.php'; //add item in shopping cart if(isset($_post["add"])) { $product_id = $_post["product_id"]; //product id $return_url = base64_decode($_post["return_url"]); //return url $qty = $_post["qty"]; $product = $mysqli->query("select product_name, unit_price, unit_quantity products product_id = '$product_id'"); $obj = $product->fetch_object(); if(!isset($_session['products'])) { $_session['products'] = array(); } if(array_key_exists($product_id...
Read more

php - How to modify a menu to show sub-menus -

i have custom php menu made person, displays categories menu. however, need display subcategories well. tried adding hierarchical parameter didn't work. hoping assistance! here code: <ul> <?php /* categories wp e-commerce products */ $wpec_product_categories = get_terms( 'wpsc_product_category', 'hide_empty=0&parent=0&exclude=298'); $myarray = array(); foreach($wpec_product_categories $wpec_categories){ $myarray[$wpec_categories->term_id]['name'] = $wpec_categories->name; $myarray[$wpec_categories->term_id]['slug'] = $wpec_categories->slug; $myarray[$wpec_categories->term_id]['term_id'] = $wpec_categories->term_id; } foreach($myarray $wpec_categories1){ $wpec_term_name = $wpec_categories1['name']; $wpec_term_slug = $wpec_categories1['slug']; $wpec_term_id = $wpec_categories1['term_id']; echo '<li> <a href="'.get_page_link(19)....
Read more

python - Installing PyDev in eclipse is failed -

unable read repository @ http://pydev.sf.net/updates/content.xml. sun.security.validator.validatorexception: pkix path building failed: sun.security.provider.certpath.suncertpathbuilderexception: unable find valid certification path requested target i installing pydev in eclipse using python, doesn't install successfully. gives above error. happened? how solve error? i had error when trying install on laptop behind corporate firewall. couldn't tell setup of firewall, not sure of root cause. i got passed error installing pydev eclipse when out behind firewall. another way got around have eclipse on non-firewalled machine, install pydev eclipse, , copy whole eclipse directory non-firewalled machine firewalled machine. there better way, , way fix properly, didn't have time work out firewall doing. this on windows 7 machine (yeah know) not work *nix versions installed through package manager yum or apt.
Read more