13455

jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts

I use EnhancedLegendRenderer plugin for my jqPlot charts, however I am unable to get it working for Pie charts.

If I click on the legend labels, they don't show or hide series. Here is jsFiddle example.

legend: { renderer: $.jqplot.EnhancedLegendRenderer, rendererOptions: { numberColumns: 3, seriesToggle: true }, show: true }

Has anybody came across and found a solution?

Answer1:

The answer of Merrily somehow correct, ZingChart looks good and have such functionality out of the box, but jqPlot is free and open source.

I rewrote jqPlot Pie Chart plugins and now the Pie chart from your example will work. Here is my blog post with explanation what I changed.

Download these 2 files:

<ol> <li>

extendedPieRenderer.js (it replaces jqplot.pieRenderer.js)

</li> <li>

enhancedPieLegendRenderer.js (it replaces jqplot.enhancedLegendRenderer.js)

</li> </ol>

And use them like this code:

<script type="text/javascript" src="jquery.jqplot.js"></script> <script type="text/javascript" src="extendedPieRenderer.js"></script> <script type="text/javascript" src="enhancedPieLegendRenderer.js"></script> <script type="text/javascript"> ... var plot = $.jqplot('chart', data, { seriesDefaults: { renderer: $.jqplot.PieRenderer }, legend: { renderer: $.jqplot.EnhancedPieLegendRenderer } }); ... </script>

<img src="https://vortexwolf.files.wordpress.com/2015/04/jqplot_pie_chart_enhanced_legend.png" alt="Pie chart image">

I also created this jsFiddle which you can open and verify that showing and hiding works: http://jsfiddle.net/19vzL5h2/1/

Answer2:

I'm not sure how tied to jqPlot you are, but many libraries have this sort of option baked in. Highcharts has it (and is free in most cases if that is your concern) and I saw it in AmCharts recently too.

It is also available through the ZingChart JavaScript charting library. I've made a demo with the toggle legend for you to try.

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

<html>
	<head>
		<script src="https://blog.pint.com/include_files/zingchart-html5-min.js"></script>
	    <script src="http://cdn.zingchart.com/zingchart-core.min.js"></script>
<script>zingchart.MODULESDIR="http://cdn.zingchart.com/modules/";</script>
		<meta charset="utf-8">
		<title>Pie chart with legend</title>
	</head>
<div id="zc"></div>
	       
	<script> 
      var piedemo ={

        "type":"pie",
        "plot":{
            "value-box":{
                "text":"%v"
            }
        },
        "series":[
            {
                "text":"Apples",
                "values":[5]
            },
            {
                "text":"Oranges",
                "values":[8]
            },
            {
                "text":"Bananas",
                "values":[22]
            },
            {
                "text":"Grapes",
                "values":[16]
            }
        ],
"legend":{
    "header":{
        "text":"Click an item to toggle"
    },
    "layout":"x4",
      "marker":{
          "type":"circle",
          "size":4,
          "border-color":"#333"
      }
  }
};

zingchart.render({
    id: 'zc',
    data: piedemo,
    height: 400,
    width: 400
});



		</script>

	</body>	
</html>


I'm on the ZingChart team so if you have any questions on this demo, please feel free to reach out.

Recommend

  • MemoryCache.Set return removed cache item
  • How to append a div via PHP and AJAX Post
  • Using sed to extract string values
  • looking for cleaner code when embedding razor calls in text
  • Add a div to replace Video after Video Plays Through
  • Why is django manage.py syncdb failing to create new columns on my development server?
  • Hiding Directories Programatically in C#
  • Why are “sc.addFile” and “spark-submit --files” not distributing a local file to all workers?
  • Command line installation of Code Signing certificates, .p12 files, and mobileprovisions
  • Delphi: Where is the shortcut that started the application? [duplicate]
  • Flask not finding files in my package's 'static' directory
  • Getting short path in python
  • get path to groovy source file at runtime
  • Does Apportable support to build library binary (.a/.so)?
  • Yii2: Finding file and getting path in a directory tree
  • How to create CGPath from a SKSpriteNode in SWIFT
  • List images(01.png) and descriptions(01.txt) from directory
  • How integrated is Collada to OpenGL ES
  • Visual Studio 2010 debugger build correctly - compiler pdb and linker pdb not in synch?
  • How to render a blob on a canvas element?
  • Abort upload large uploads after reading headers
  • JSON response opens as a file, but I can't access it with JavaScript
  • dc-js disable selecting slices on click for pie chart
  • How to delay loading a property with linq to sql external mapping?
  • Ajax Loaded meta Tags
  • Nant, Vault & Windows Integrated Authentication
  • Uncaught Error: Could not find module `ember-load-initializers`
  • req.body is undefined - nodejs
  • HTML download movie download link
  • swift auto completion not working in Xcode6-Beta
  • Does CUDA 5 support STL or THRUST inside the device code?
  • Modifying destination and filename of gulp-svg-sprite
  • htaccess rewriting URLs with multiple forward slashes
  • Importing jscolor library in angular 2
  • SVN: Merging two branches together
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • How do I rollback to a specific git commit
  • Is there a mandatory requirement to switch app.yaml?
  • A cron job substitute?
  • Busy indicator not showing up in wpf window [duplicate]