CODEWITHSUNDEEP
shieldui
Michael Thornberry
Michael Thornberry

Reputation: 31

ShieldUI Stacked Bar Graph with Totals

I've got a stacked bar graph that shows two categories of information. Now I have a requirement to show the total of the bars at the end of the bar. I've attached a mock-up showing what I'm trying to do -- the numbers in red are what I'm trying to add.


(source: michaelandlisa.us)

I couldn't find anything in the documentation on how to add totals, or on how to add annotations (which would also work).

Upvotes: 0

Views: 85

Answers (2)

Michael Thornberry
Michael Thornberry

Reputation: 31

I managed to get this to work by adding a Scatter chart of total values on top of the existing bar chart.

http://michaelandlisa.us/Images/Forums/stacked_with_totals_scatter.png

I also set the color on the series to "transparent" so the point wouldn't show up, and then I bumped the X and Y by 15 and 12 respectively. I also set the style to Bold, and set the format to "{point.y:n0}". Here's the relevant MVC code (where totals is a List of object):

.DataSeries(series => series.Scatter()
    .Data(totals)
    .CollectionAlias("Total")
    .Color("transparent")
    .AddToLegend(false).DataPointText(dtp =>
{
    dtp.Enabled(true);
    dtp.Format("{point.y:n0}");
    dtp.Style(s => s.FontWeight(FontWeight.Bold));
    dtp.Color("red");
    dtp.X(15);
    dtp.Y(12);
}))

Upvotes: 0

David Johnson
David Johnson

Reputation: 154

Basically, ShieldUI jQuery chart plugin renders the series without text, as shown here. To alter this behavior, you need to first enable the text. Then, you can use a format function to either show some cumulative text, or return an empty string. More information on this approach is available here. This can be coupled with a global counter to determine each Xth iteration.

Upvotes: 1

Related Questions