SemanticMediaWiki / SemanticResultFormats

Provides additional visualizations (result formats) for Semantic MediaWiki
https://www.semantic-mediawiki.org/wiki/Extension:Semantic_Result_Formats
Other
45 stars 76 forks source link

Jqplotseries/-chart format / More than 9 data-series: shown black in some chart-types #167

Open hermannschwaerzlerUIBK opened 8 years ago

hermannschwaerzlerUIBK commented 8 years ago

When one has more than nine data series in some chart-types (e.g. donut, pie or funnel) the 10th and higher series are coloured black. The expected behaviour would be a "warp-around" of the colours.

We achieved this "wrap-around" by the following code changes. But maybe the correct fix would be to use jqplot.ColorGenerator and its next(), previous() and get() methods as in other chart-types?

Here our code-changes:

--- resources/jquery/jqplot/jqplot.funnelRenderer.js.orig      2016-06-27 15:01:43.183005581 +0200
+++ resources/jquery/jqplot/jqplot.funnelRenderer.js   2016-06-27 15:03:22.941592005 +0200
@@ -454,7 +454,7 @@
         }
         for (var i=0; i<gd.length; i++) {
             var v = this._vertices[i];
-            this.renderer.drawSection.call (this, ctx, v, this.seriesColors[i]);
+            this.renderer.drawSection.call (this, ctx, v, this.seriesColors[i % this.seriesColors.length]);

             if (this.showDataLabels && gd[i][1]*100 >= this.dataLabelThreshold) {
                 var fstr, label;
--- resources/jquery/jqplot/jqplot.donutRenderer.js.orig       2016-06-27 13:06:23.916945479 +0200
+++ resources/jquery/jqplot/jqplot.donutRenderer.js    2016-06-27 13:17:43.041063904 +0200
@@ -415,7 +415,7 @@
             ang1 += this.sliceMargin/180*Math.PI;
             var ang2 = gd[i][1] + sa;
             this._sliceAngles.push([ang1, ang2]);
-            this.renderer.drawSlice.call (this, ctx, ang1, ang2, this.seriesColors[i], false);
+            this.renderer.drawSlice.call (this, ctx, ang1, ang2, this.seriesColors[i % this.seriesColors.length], false);

             if (this.showDataLabels && gd[i][2]*100 >= this.dataLabelThreshold) {
                 var fstr, avgang = (ang1+ang2)/2, label;
@@ -681,7 +681,7 @@
         canvas._ctx.clearRect(0,0,canvas._ctx.canvas.width, canvas._ctx.canvas.height);
         s._highlightedPoint = pidx;
         plot.plugins.donutRenderer.highlightedSeriesIndex = sidx;
-        s.renderer.drawSlice.call(s, canvas._ctx, s._sliceAngles[pidx][0], s._sliceAngles[pidx][1], s.highlightColors[pidx], false);
+        s.renderer.drawSlice.call(s, canvas._ctx, s._sliceAngles[pidx][0], s._sliceAngles[pidx][1], s.highlightColors[pidx % s.highlightColors.length], false);
     }

     function unhighlight (plot) {
kghbln commented 8 years ago

@hermannschwaerzlerUIBK Thank you for reporting and providing a possible fix!