Sparklines: Chart Axis Orientation, Databinding and non-XAML questions (3)

4 posts, 0 answers
  1. Daryl
    Daryl avatar
    15 posts
    Member since:
    Jan 2011

    Posted 23 Mar 2011 Link to this post

    A few questions after playing with the Sparkline example here : C:\Program Files (x86)\Telerik\RadControls for WPF Q3 2010 SP1\Demos\Examples\BulletGraph

    1.  Can a RadColumnSparkline show the bars in a horizontal orientation?  Default seems to be vertical - I didn't see a property to change orientation.

    2.  The examples all seem to bind to a DateTime on the X-Axis.  Is it possible to bind to something like a string and if so what would happen?

    Where your current example data looks like:
    actual,Late arrivals,11/1/2004,1
    actual,Late arrivals,12/1/2004,24
    actual,Late arrivals,1/1/2005,32

    What if I wanted to bind to NOTE: the date is replaced by a string (site name) value:

    web ranking,Site 1, 1000
    web ranking,Site 2, 2222
    web ranking,Site 3, 4444

    3.  Do you have an example of how to do some of this XAML binding in C# code rather than XAML?  In essence doing this type of thing in a non-xaml/dynamic way?
                  <telerik:GridViewDataColumn Header="actuals nov'04 - nov'05">
                        <telerik:GridViewDataColumn.CellTemplate>
                            <DataTemplate>
                                <telerik:RadColumnSparkline ShowFirstPointIndicator="True" ShowLastPointIndicator="True" ShowHighPointIndicators="True" ShowLowPointIndicators="True" ItemsSource="{Binding ActualMeasure}" XValuePath="Date" YValuePath="Value" Width="120" Height="20" />
                            </DataTemplate>
                        </telerik:GridViewDataColumn.CellTemplate>
                    </telerik:GridViewDataColumn>

    4.  I'm adding another question to the post:

    I have 5 data points, but the chart is only showing 4 of the points. Like it is throwing out the lowest data point and not plotting it at all.  Is that a function of telerik:RadColumnSparkline attribute?


    actual,(Google) Day Spas in Houston,11/1/2004,100
    actual,(Google) Day Spas in Houston,12/1/2004,75
    actual,(Google) Day Spas in Houston,1/1/2005,72
    actual,(Google) Day Spas in Houston,2/1/2005,77
    actual,(Google) Day Spas in Houston,3/1/2005,66


     <telerik:RadColumnSparkline ShowAxis="true" ShowLastPointIndicator="True" ShowFirstPointIndicator="True" ShowHighPointIndicators="True" ShowLowPointIndicators="True"  ItemsSource="{Binding ActualMeasure}" XValuePath="Date" YValuePath="Value" Width="120" Height="20" />
  2. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 28 Mar 2011 Link to this post

    Hi Daryl,

    Thanks for using RadSparklines!

    1) Currently there are only column RadSparklines (or vertical bars). RadSparklines follow E. Tufte specifications. He mentions a horizontal bar that fits in one grid cell, but currently we haven't created it. Instead we introduced RadBulletGraph which is very similar, but has more features and can be used in more business scenarios.

    2) Sparklines can bind only to numeric data. You can find more information on this topic in our help system here.

    3) Unfortunately currently we don't have an example how to create a DataTemplate for a grid column in code behind as this is not the recommended best practice. Still you can create a DataTemplate in code behind as explained in this topic on MSDN.

    4) This behavior of column sparklines is expected. If you have 5 points the smallest gets 0px height as its value is equal to the minimum value of the range. You can workaround this by setting a custom value for minimum.

    Again your feedback is most welcome! If you have any trouble with RadSparklines we'll be happy to assist you.

    Greetings,
    Yavor Ivanov
    the Telerik team
  3. UI for WPF is Visual Studio 2017 Ready
  4. Daryl
    Daryl avatar
    15 posts
    Member since:
    Jan 2011

    Posted 28 Mar 2011 Link to this post

    Thanks Yavor for the reply, it was helpful.

    I could use a little clarification on what property to set for this:

    4) This behavior of column sparklines is expected. If you have 5 points the smallest gets 0px height as its value is equal to the minimum value of the range. You can workaround this by setting a custom value for minimum.


    I tried setting this attribute but it didn't work.  What would I set to make a "custom" value for minimum that you speak of above?

     

     

    MinYValue

     

     

    ="1000"

     


  5. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 31 Mar 2011 Link to this post

    Hi Daryl,

    RadSparklines use AutoRange by default to calculate the range of the underlying data. Let me give an example here. If you pass to your column sparkline an array of integers
    this.sparkline.ItemsSource = new int[] { 3, 4, 5, 6 };
    the range of data is min=3, max=6. Because sparklines are minimalistic, the first column will get height = 0px, and the last one height = max (without some margins). You can override the automatic calculation of the range by setting AutoRange = False and MinYValue like this:
    MinYValue="2" AutoRange="False"

    Now the first column (the smallest one) will be visible, because it is no longer the smallest in the new range.

    Regards,
    Yavor Ivanov
    the Telerik team
Back to Top