CODEWITHSUNDEEP
jqueryjspjqplot
llepec
llepec

Reputation: 51

jqPlot Pie Chart highlighter

I try to use jqPlot in my jsp project. I need to draw pie chart. With pie chart everything is ok, it works fine.

Then I want to show tooltip with some data when cursor is over the slice. For these, I can use highlighter which is provide by jqPlot, but I don't know how to do this.

In .jsp file I 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 = [];
      for (var i in data) {
        var dataPush = [data[i].cp_code, parseInt(data[i].value)];
        dataTmp.push(dataPush);
      }
        var plot1 = jQuery.jqplot('chartdiv', [dataTmp], 
          { 
            seriesDefaults: {
              // Make this a pie chart.
              renderer: jQuery.jqplot.PieRenderer, 
              rendererOptions: {
                // Put data labels on the pie slices.
                // By default, labels show the percentage of the slice.
                dataLabels: 'value',
                showDataLabels: true
              }
            } 
          }
        );
    }
  });
});

With AJAX I get json like this: [{"code":"CODE01","value":"1"},{"code":"CODE02","value":"3"}]

In pie chart I want to show value and when mouse is over slice I want to show code in tooltip.

Where shoud I use highlighter event? I tried in seriesDefaults body - after rendererOptions but maybe I use wrong options...

Please help me, and sorry for my english. Regards Łukasz

Upvotes: 0

Views: 1088

Answers (1)

iron-viper
iron-viper

Reputation: 98

You need to 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 to add settings:

cursor: {
    style: 'pointer',     // A CSS spec for the cursor type to change the
                            // cursor to when over plot.
    show: true,
    showTooltip: false,      // show a tooltip showing cursor position.
},


highlighter: {
  show: true,
  useAxesFormatters: false,
  tooltipLocation:'n',
  tooltipSeparator:', ',
  tooltipFormatString: '%s%d',
  fadeTooltip:'fast',
}

Upvotes: 2

Related Questions