All geek questions in one place

How to flip jqPlot chart

I draw a chart using jqPlot, and in my template I designed the chart so that it grows down, like flipping the columns so that they start from the top and go down, depending on some input from db. I was thinking about multiplying by -1, but it does not 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>
+4
source share
1 answer

EDIT:
This answer only applies to the PieRenderer , not the BarRenderer used in the question.

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

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

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

0
source

Source: https://habr.com/ru/post/1438117/

More articles:


All Articles