JQPlot stacked bar each stacked label count instead of accumulation (incremental) count

Question

I want to display label text in stead of segment total for each label.

Like, 2, 7, 14 should be in stacked bar with 2, 7, 14 and then 23 is total. But currently in exmaple it is showing segment total - first bar is empty and then 2, 2+7=9, and total = 23 (9+14).

JQ Plot shows (stacked bar column graph - 3rd graph): http://www.jqplot.com/tests/bar-charts.php

I want like this url like highchart for label count see example: http://www.highcharts.com/demo/column-stacked

Please let me know if I can go with solution then it would be great help...

score 6 · Accepted Answer · edited May 23 '17 at 10:29

I have a solution for it as it seems that independent of the value of the stackedValue parameter the values of the stacked bars are always summed up.

My solution to this problem involved:

adding of one more series which serves as the sum, the values you fill it with are all the same (i.e. 3) as their only role is to position the labels,
making the last series (5th) invisible and its shadow nearly transparent,
and using the labels on each series directly rather than letting the script decide what to put there, otherwise it would obviously sum up the values.

My solution could be found here.

EDIT

I have recently spotted that there already was a solution for this problem available here.

Poultry in Motion · Answer 2 · 2012-04-13T21:51:29.807

On the summation issue: You've stumbled across a jqplot bug.

If you'll open jqplot.pointLabels.js, take a look at the code starting around line 172/173:

var d = this._plotData;

If you'll update it to read

var d = this._plotData; 
if (p.stackSeries) {
    var d = this.data;
}

When you call the chart, use something similar to this in your series options:

pointLabels: { show: true, stackedValue: false, stackSeries: true }

You'll be able to use the PointLabels stackedValue attribute to turn off the stacked summing.

The fix for the stackedValue bug is detailed here.

jmva answered your question regarding label placement.

score 0 · Answer 3 · answered May 16 '14 at 13:26

0

Boro's solution works for me, however, if you need the legend, you will have one more item in the legend which may not be what you expect. I have used Boro's solution and have the legend independent of the jqplot object.

answered May 16 '14 at 13:26

Ehsan

141
1
8

score 0 · Answer 4 · edited May 23 '17 at 12:26

To display the values inside the bar just modify css .jqplot-point-label property on local page, this works in the JQPlot demo page:

.jqplot-point-label {
      font-size:.75em;
      z-index: 2;
      /* Add some margin to get values into the bar */
      margin-top: 24px;
}

You can also try PointLabel properties like ypadding for a more polite approach. For sum features refer to this solved thread.

JQPlot stacked bar each stacked label count instead of accumulation (incremental) count

4 Answers4

Linked