chart enhancements +1: Replot axis on series toggle

UI Components for JSF
Post Reply
alien3131
Posts: 20
Joined: 01 Dec 2011, 18:37

13 Jun 2012, 11:56

I'm very interested in current enhancements on chart (http://blog.primefaces.org/?p=1994) visible on 3.4-SNAPSHOT

one more enhancement that I wish to be implemnted would be the ability to replot axis when a serie is show/hidden in the legend, in order to re-adjust axis max with remaining curves


JqPlot exemple is here by unchecking "Non food" series: http://www.jqplot.com/deploy/dist/examp ... engel.html

the associated code seem to be this option in lenend rendererOptions : seriesToggleReplot: {resetAxes: true}

Would be great for me to have this option in primefaces !
Is it the right place to submit this request ?

Thanks

Code: Select all

legend: {
            show: true,
            renderer: $.jqplot.EnhancedLegendRenderer,
            placement: "outsideGrid",
            labels: labels,
            location: "ne",
            rowSpacing: "0px",
            rendererOptions: {
                // set to true to replot when toggling series on/off
               // set to an options object to pass in replot options.
                seriesToggle: 'normal',
               seriesToggleReplot: {resetAxes: true}
            }
        }
PF 8.0/Mojarra 2.2.20/Tomcat 7

ashdam
Posts: 23
Joined: 16 Oct 2010, 21:21

14 Dec 2012, 20:04

I'm trying to do this and extender works fine except the "seriesToggleReplot : {resetAxes: true}"
I've been trying to solve it myself so I dont bother you with newbie questions. Do you know what can be wrong?

Here is my code on "MainContent" in a layout.

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html">
    <ui:composition>
        <h:form>
            <h:outputScript library="js" name="jqplot.canvasAxisLabelRenderer.min.js"/>
            <h:outputScript library="js" name="jqplot.logAxisRenderer.min.js"/>
            <h:outputScript library="js" name="jqplot.dateAxisRenderer.min.js"/>
            <h:outputScript library="js" name="jqplot.enhancedLegendRenderer.min.js"/>
            <script type="text/javascript">
                function ext2() {
                    this.cfg.axes = {
                        xaxis: {
                            renderer: $.jqplot.DateAxisRenderer                            
                        }
                    };
                    this.cfg.axesDefaults = {
                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                    }
                    this.cfg.seriesDefaults = {
                        showMarker: false,
                        smooth: true,
                        shadowAlpha: 0.1,
                        shadowDepth: 2
                    };
                    this.cfg.grid = {
                        drawBorder: false,
                        shadow: false,
                        gridLineColor: '#666666',
                        gridLineWidth: 2,
                        background: "white"

                    };
                    this.cfg.legend = {
                        renderer: $.jqplot.EnhancedLegendRenderer,
                        show: true,
                        placement: "outsideGrid",
                        location: "ne",
                        rowSpacing: "0px",
                        rendererOptions: {
                            // set to true to replot when toggling series on/off
                            // set to an options object to pass in replot options.
                            seriesToggle: 'true',
                            seriesToggleReplot : {resetAxes: true}
                        }
                    };
                    
                }
            </script>
            <p:lineChart value="#{dashboardController.profilesLikes}" extender="ext2"  seriesColors="FFD100,E47F00,B10043,42B4E6"/>
        </h:form>
    </ui:composition>
</html>

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

14 Dec 2012, 21:27

you seem to pass 'true'. maybe IT should be just true,without the quotes

ashdam
Posts: 23
Joined: 16 Oct 2010, 21:21

15 Dec 2012, 14:20

Thank you kukeltje,

You were right it should be "seriesToggle: true" but the problem stays on " seriesToggleReplot : {resetAxes: true}". That instruction doesn't work :( , I can toggle on/off the legends but axis are not redrawn.

I got the code from this example: http://www.jqplot.com/deploy/dist/examp ... engel.html

I've tested many versions of jqplot's extensions without success.

Code: Select all

this.cfg.legend = {
                        renderer: $.jqplot.EnhancedLegendRenderer,
                        show: true,
                        placement: "outsideGrid",
                        location: "ne",
                        rowSpacing: "0px",
                        rendererOptions: {
                            // set to true to replot when toggling series on/off
                            // set to an options object to pass in replot options.
                            seriesToggle: true,
                            seriesToggleReplot : {resetAxes: true}
                        }
                    };

ashdam
Posts: 23
Joined: 16 Oct 2010, 21:21

15 Dec 2012, 21:13

edited previous post. Sorry wanted to mention that axis ARENT redrawn not the other way round

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

16 Dec 2012, 00:18

I think you have to debug the jqplot.js to see why this is not working... Seems to be outside the PF scope...

alien3131
Posts: 20
Joined: 01 Dec 2011, 18:37

21 Mar 2013, 19:07

The problem is that jqplot version embedded in primefaces is v1.0.0b2_r1012 from Nov 2011 and this version does not manage the seriesToggleReplot :(
I tested with last version of jqplot (1.0.7r1224 from Feb 2013) in charts.js in the primefaces jar and now it's working, the chart is replot...

I checked in primefaces 3.6-SNAPSHOT (http://repository.primefaces.org/org/pr ... -SNAPSHOT/) but it's the same jqplot version from 2011
Is there plan/road map to update jqplot version in primefaces ?

Thanks.
PF 8.0/Mojarra 2.2.20/Tomcat 7

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

21 Mar 2013, 21:17

Thanks for looking into this. Not sure if an upgrade is shceduled. Please file an issue if one does not already exist.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 29 guests