Win/Loss Spark Charting

[ww1711]

Hello fellow dev-people,

I'm curious if anyone has seen/implemented a win/loss spark chart with Telerik for ASP.Net...

 

I've seen that its available for Silverlight, but can't seem to find it for ASP.Net. Thoughts?

 

 

Thanks!

[Danail Vasilev]

Hi,

I can suggest that you use two stacked column/bar series for the purpose - the first with positive values to display wins and the second with negative values to display losses. You can also use templates in order to display the absolute of the negative values:

<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
    <PlotArea>
        <Series>
            <telerik:ColumnSeries Name="Win" Stacked="true">
                <Appearance FillStyle-BackgroundColor="Green"></Appearance>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="10" />
                    <telerik:CategorySeriesItem Y="30" />
                    <telerik:CategorySeriesItem Y="20" />
                </SeriesItems>
            </telerik:ColumnSeries>
            <telerik:ColumnSeries Name="Loss">
                <Appearance FillStyle-BackgroundColor="Red">
                </Appearance>
                <LabelsAppearance>
                    <ClientTemplate>#=-value#</ClientTemplate>
                </LabelsAppearance>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="-5" />
                    <telerik:CategorySeriesItem Y="-20" />
                    <telerik:CategorySeriesItem Y="-15" />
                </SeriesItems>
            </telerik:ColumnSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

Regards,
Danail Vasilev
Telerik

 

 

[ww1711]

Thanks for the feedback; my issue is that I need spark line type charting, i.e. very compact charts that fit into the cell of a grid. Is this example scale-able to ~25px in height?

[Danail Vasilev]

Hello,

Yes, sparklines are supported by the RadHtmlChart. You can examine our online demos here - http://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/sparklinechart/defaultcs.aspx

Regards,
Danail Vasilev
Telerik

 

 

[ww1711]

Not sure where the confusion lies, but I'm looking to implement a win/loss chart in a "spark line type" format. Meaning a compact win/loss chart. Is this possible? Your link does not show an implementation of this.

[Danail Vasilev]

Hello,
 
The markup of the below sparkline chart type with win/loss data looks like this - http://screencast.com/t/LfcV9Z0h6RW

ASPX:

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
    Sparkline chart win/loose:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="50px" Height="25px" Layout="Sparkline">
        <PlotArea>
            <Series>
                <telerik:ColumnSeries Name="Win" Stacked="true">
                    <Appearance FillStyle-BackgroundColor="Green"></Appearance>
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="10" />
                        <telerik:CategorySeriesItem Y="30" />
                        <telerik:CategorySeriesItem Y="20" />
                    </SeriesItems>
                </telerik:ColumnSeries>
                <telerik:ColumnSeries Name="Loss">
                    <Appearance FillStyle-BackgroundColor="Red">
                    </Appearance>
                    <LabelsAppearance>
                        <ClientTemplate>#=-value#</ClientTemplate>
                    </LabelsAppearance>
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="-5" />
                        <telerik:CategorySeriesItem Y="-20" />
                        <telerik:CategorySeriesItem Y="-15" />
                    </SeriesItems>
                </telerik:ColumnSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>
    more text
</form>

If this is not the expected behavior please provide more details on this chart type. You can also include a snapshot of the expected rendering.

Regards,
Danail Vasilev
Telerik