CODEWITHSUNDEEP
graphael
Mythili
Mythili

Reputation: 51

gRaphael barchart: limit on number of bars and sorting values

Can i have a barchart with limit on number of bars like gRaphael pie chart accepts only 10 sectors and made the remaining to "OTHER" which are less than 10% of the total.same way, gRaphael barchart with only 10 bars and making the remaining to "OTHER"?

Thanks, Mythyili

Upvotes: 1

Views: 244

Answers (1)

sacohe
sacohe

Reputation: 788

This is not currently an option in the g.bar class, so you would probably have to update the source code to achieve this.

After looking at what they did with the "other" segment in g.pie.js, here's what I would recommend:

  • Add an option to the attributes array called something like "maxbars". When you pass this option in, this would be the maximum number of bars that will be displayed on the graph. If maxbars = 10 and there are more than 10 segments, 1 through 9 will be unique and 10 will be a combination of the 10th to the end.

  • Because of how they handle the values array, I think the best solution would be to overwrite that values array before the first time it's accessed. In both the vbarchart and hbarchart, right after the chart elements are initialized, you should add a for loop that would look something like this:

    if (values.length > opts.maxbars) {
    for (var i = maxbars; i < values.length; i++) {
        values[maxbars-1] += values[i];
        values[i] = null;
    }
}

    This is adding all of the values after the 10th (for example) element to the 10th element and clearing the remaining slots in the array. Now what you have is an array of 10 elements, with the 10th being a summation of the 10th+ elements. Note that in this simple loop, I only accounted for the case where each value is NOT an array. You would need to check for values[i][j] and add those elements instead of values[i], which would probably require a nested for loop or a ternary operator. Check out the rest of g.bar to see how this is handled elsewhere.

  • In the portion of the code where they draw labels, you would want to add a check in the loop like if (opts.maxbars && (i == opts.maxbars - 1)) { // Label the bar with "OTHER" }

Sorry I don't have any actual working code to implement this, but it will be a bit more involved and take some trial and error. Hope this points you in the right direction.

Upvotes: 1

Related Questions