How to flip my jqPlot chart

Question

I'm drawing a chart with jqPlot, and in my template I've designed the chart so that it grows downwards, kind of flip the bars so that they start from the top and go down, depending on some input from the db. I was thinking of multiplying by -1, but it doesn't seem to work.

Any suggestions? Here is my code.

$(document).ready(function(){ $.jqplot.config.enablePlugins = true; var c0 = ""; var c1 = ""; var c2 = ""; var c3 = ""; var c4 = ""; var c5 = ""; var c6 = ""; var c7 = ""; var c8 = ""; var c9 = "";

                var a0 = "<?php echo $numArticles[0]?>";
                var a1 = "<?php echo $numArticles[1]?>";
                var a2 = "<?php echo $numArticles[2]?>";
                var a3 = "<?php echo $numArticles[3]?>";
                var a4 = "<?php echo $numArticles[4]?>";
                var a5 = "<?php echo $numArticles[5]?>";
                var a6 = "<?php echo $numArticles[6]?>";
                var a7 = "<?php echo $numArticles[7]?>";
                var a8 = "<?php echo $numArticles[8]?>";
                var a9 = "<?php echo $numArticles[9]?>";

                var s1 = [a0, a1, a2, a3, a4, a5,a6,a7,a8,a9];
                var ticks = [c0, c1,c2,c3,c4,c5,c6,c7,c8,c9];
                plot1 = $.jqplot('chart1', [s1], {
                    // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
                    animate: !$.jqplot.use_excanvas,
                    seriesDefaults:{
                        shadow: false,
                        renderer:$.jqplot.BarRenderer,
                        pointLabels: { show: true }
                    },
                    axes: {
                        xaxis: {
                            renderer: $.jqplot.CategoryAxisRenderer,
                            ticks: ticks,
                            showTickMarks:false
                        },
                        yaxis: {
                            renderer: $.jqplot.CategoryAxisRenderer,
                            ticks: ticks,
                            showTicks: false        // same options as axesDefaults
                        }
                    },

                grid: {
                drawGridLines: false,       // wether to draw lines across the grid or not.
                gridLineColor: '#0d1c26',   // *Color of the grid lines.
                background: 'transparent',  // CSS color spec for background color of grid.
                borderColor: '#122934',     // CSS color spec for border around grid.
                borderWidth: 0,             // pixel width of border around grid.
                shadow: false               // draw a shadow for grid.
                                            // CanvasGridRenderer takes no additional options.
            },
                    seriesColors: [ "#0a3b4c"],     
                    highlighter: { show: false }
                });

                $('#chart1').bind('jqplotDataClick', 
                    function (ev, seriesIndex, pointIndex, data) {
                        $('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
                    }
                );
            });
            </script>

frnhr · Answer 1 · 2012-10-27T15:50:48.250

0

EDIT:
This answer is only relevant for PieRenderer, not for BarRenderer that is used in question.

Not sure about flipping, but maybe setting "startAngle" to 180 might do the trick?

            plot1 = jQuery.jqplot ('chart1', [data],
            {
                seriesDefaults: {
                    renderer: jQuery.jqplot.PieRenderer,
                    rendererOptions: {
                        startAngle : 180
                    }
                },
                ... other stuff ...
            }

For reference, other renderer options: http://www.jqplot.com/docs/files/plugins/jqplot-pieRenderer-js.html

edited Oct 27 '12 at 15:50

answered Oct 23 '12 at 23:23

frnhr

12,354
9
63
90

I'm not sure if this is relevant to the barCharts, I know that it works with the pieRenderer. Have you used it because I'm unable to implement your suggestion with barCharts. – Ando Oct 27 '12 at 14:42
@Ando omg sorry, I completely missed the Renderer! For some reason I was sure that was a Pie Chart. – frnhr Oct 27 '12 at 15:49
No worries, at least you tried. If you come up with something else, let me know. – Ando Oct 27 '12 at 16:33

How to flip my jqPlot chart

1 Answers1