jquery - jqPlot Pie Chart highlighter -


i try use jqplot in jsp project. need draw pie chart. pie chart ok, works fine.

then want show tooltip data when cursor on slice. these, can use highlighter provide jqplot, don't know how this.

in .jsp file include <script language="javascript"src="../../common/jsc/plugins/jqplot.highlighter.min.js"></script>

my javascript code:

$(document).ready(function(){    var url = 'supplycalendardaydetailscharts.jsp?date=' + getel('date').value + '&action=cog';    $.ajax({      url: url,      type: "get",      datatype: "json",      success: function(data) {        var datatmp = [];        (var in data) {          var datapush = [data[i].cp_code, parseint(data[i].value)];          datatmp.push(datapush);        }          var plot1 = jquery.jqplot('chartdiv', [datatmp],             {               seriesdefaults: {                // make pie chart.                renderer: jquery.jqplot.pierenderer,                 rendereroptions: {                  // put data labels on pie slices.                  // default, labels show percentage of slice.                  datalabels: 'value',                  showdatalabels: true                }              }             }          );      }    });  }); 

with ajax json this: [{"code":"code01","value":"1"},{"code":"code02","value":"3"}]

in pie chart want show value , when mouse on slice want show code in tooltip.

where shoud use highlighter event? tried in seriesdefaults body - after rendereroptions maybe use wrong options...

please me, , sorry english. regards Ɓukasz

you need add plug-ins:

<script type="text/javascript" src="plugins/jqplot.cursor.min.js"></script> <script type="text/javascript" src="plugins/jqplot.highlighter.min.js"></script> 

you need add settings:

cursor: {     style: 'pointer',     // css spec cursor type change                             // cursor when on plot.     show: true,     showtooltip: false,      // show tooltip showing cursor position. },   highlighter: {   show: true,   useaxesformatters: false,   tooltiplocation:'n',   tooltipseparator:', ',   tooltipformatstring: '%s%d',   fadetooltip:'fast', } 

Comments

Popular posts from this blog

java - Oracle EBS .ClassNotFoundException: oracle.apps.fnd.formsClient.FormsLauncher.class ERROR -

c# - how to use buttonedit in devexpress gridcontrol -

nvd3.js - angularjs-nvd3-directives setting color in legend as well as in chart elements -