Win/Loss Spark Charting

6 posts, 0 answers
  1. ww1711
    ww1711 avatar
    17 posts
    Member since:
    May 2012

    Posted 20 Apr 2015 Link to this post

    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!

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 21 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ww1711
    ww1711 avatar
    17 posts
    Member since:
    May 2012

    Posted 21 Apr 2015 in reply to Danail Vasilev Link to this post

    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?
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 21 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  6. ww1711
    ww1711 avatar
    17 posts
    Member since:
    May 2012

    Posted 21 Apr 2015 in reply to Danail Vasilev Link to this post

    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.
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 22 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017