none
Chart - Lines

    Question

  • Hi everyone ;)

    It's just a small thing... I'm sure you can help me... I'm using the Chart control of the Silverlight toolkit release dec 08. I'm adding some series and datapoints during runtime.

    When I add these values:
    val              datetime
    2                25/12/2008
    23              23/05/2009

    then the two values are drawn - that's ok BUT between these two values more DateTime values are displayed on the x-axis. I only want 25/12/2008 and 23/05/2009 to be displayed. What property or setting do I need to set to get the wanted output?

    Thanks in advance!

    Monday, February 02, 2009 4:20 AM

Answers

  • Normally, showing only actual values isn't a core scenario for Linear/DateTime Axes.
    From a UX perspective, users like having additional reference points when they read charts.

    Here's the initial chart we'll be working off during this scenario:

    <charting:Chart x:Name="chart">

        <charting:ScatterSeries ItemsSource="{Binding}"

              DependentValueBinding="{Binding Value}"

              IndependentValueBinding="{Binding Key}"

              />

        <charting:Chart.Axes>

            <charting:LinearAxis Orientation="Vertical" Location="Left" />

            <charting:DateTimeAxis Orientation="Horizontal" Location="Bottom" />

        </charting:Chart.Axes>

    </charting:Chart>

     

    chart.DataContext = new KeyValuePair<DateTime, int>[]

            {

                new KeyValuePair<DateTime, int>(new DateTime(2008, 12, 16), 2),

                new KeyValuePair<DateTime, int>(new DateTime(2009, 1, 15), 23)

            };

    It's a basic chart with a ScatterSeries, 2 explicit axes (that get generated if we don't specify them) and a simple datasource with date and numbers.

     

    Option #1: Change Datetime Axis properties

    Really simple, if all you have are 2 points just specify an interval that shows the minimum interval.
    This doesn't scale up for multiple points.

     

    <charting:Chart x:Name="chart">

        <charting:ScatterSeries ItemsSource="{Binding}"

              DependentValueBinding="{Binding Value}"

              IndependentValueBinding="{Binding Key}"

              />

        <charting:Chart.Axes>

            <charting:LinearAxis Orientation="Vertical" Location="Left" />

            <charting:DateTimeAxis Orientation="Horizontal" Location="Bottom" IntervalType="Months" Interval="0.5" />

        </charting:Chart.Axes>

    </charting:Chart>

    This will show about 3 AxisLabels including your minimum and maximum.

     

    Option #2: Use a translation Axis Label strategy.

    Feel free to read this forum post:  http://silverlight.net/forums/p/61709/153433.aspx

     Basically, Just check if the value is something you'd like to display and if not return an empty string.

     

    Option #3: Use the correct Chart Series type

    If you really don't need to show a range of items, you might want to use a series type that supports showing just specific items - Like columns series or bar series. Additionally, make sure to specify a CategoryAxis and not a DateTimeAxis.

    <charting:Chart x:Name="chart">

        <charting:ColumnSeries ItemsSource="{Binding}"

              DependentValueBinding="{Binding Value}"

              IndependentValueBinding="{Binding Key}"

              />

        <charting:Chart.Axes>

            <charting:LinearAxis Orientation="Vertical" Location="Left" />

            <charting:CategoryAxis Orientation="Horizontal" Location="Bottom"/>

        </charting:Chart.Axes>

    </charting:Chart>

     

    BTW, Regarding the 3 star rating you gave the December release, feel free to ping me at J@JustinAngel.Net with your full opinion.

    Sincerely,

    Monday, February 02, 2009 3:02 PM

All replies

  • Normally, showing only actual values isn't a core scenario for Linear/DateTime Axes.
    From a UX perspective, users like having additional reference points when they read charts.

    Here's the initial chart we'll be working off during this scenario:

    <charting:Chart x:Name="chart">

        <charting:ScatterSeries ItemsSource="{Binding}"

              DependentValueBinding="{Binding Value}"

              IndependentValueBinding="{Binding Key}"

              />

        <charting:Chart.Axes>

            <charting:LinearAxis Orientation="Vertical" Location="Left" />

            <charting:DateTimeAxis Orientation="Horizontal" Location="Bottom" />

        </charting:Chart.Axes>

    </charting:Chart>

     

    chart.DataContext = new KeyValuePair<DateTime, int>[]

            {

                new KeyValuePair<DateTime, int>(new DateTime(2008, 12, 16), 2),

                new KeyValuePair<DateTime, int>(new DateTime(2009, 1, 15), 23)

            };

    It's a basic chart with a ScatterSeries, 2 explicit axes (that get generated if we don't specify them) and a simple datasource with date and numbers.

     

    Option #1: Change Datetime Axis properties

    Really simple, if all you have are 2 points just specify an interval that shows the minimum interval.
    This doesn't scale up for multiple points.

     

    <charting:Chart x:Name="chart">

        <charting:ScatterSeries ItemsSource="{Binding}"

              DependentValueBinding="{Binding Value}"

              IndependentValueBinding="{Binding Key}"

              />

        <charting:Chart.Axes>

            <charting:LinearAxis Orientation="Vertical" Location="Left" />

            <charting:DateTimeAxis Orientation="Horizontal" Location="Bottom" IntervalType="Months" Interval="0.5" />

        </charting:Chart.Axes>

    </charting:Chart>

    This will show about 3 AxisLabels including your minimum and maximum.

     

    Option #2: Use a translation Axis Label strategy.

    Feel free to read this forum post:  http://silverlight.net/forums/p/61709/153433.aspx

     Basically, Just check if the value is something you'd like to display and if not return an empty string.

     

    Option #3: Use the correct Chart Series type

    If you really don't need to show a range of items, you might want to use a series type that supports showing just specific items - Like columns series or bar series. Additionally, make sure to specify a CategoryAxis and not a DateTimeAxis.

    <charting:Chart x:Name="chart">

        <charting:ColumnSeries ItemsSource="{Binding}"

              DependentValueBinding="{Binding Value}"

              IndependentValueBinding="{Binding Key}"

              />

        <charting:Chart.Axes>

            <charting:LinearAxis Orientation="Vertical" Location="Left" />

            <charting:CategoryAxis Orientation="Horizontal" Location="Bottom"/>

        </charting:Chart.Axes>

    </charting:Chart>

     

    BTW, Regarding the 3 star rating you gave the December release, feel free to ping me at J@JustinAngel.Net with your full opinion.

    Sincerely,

    Monday, February 02, 2009 3:02 PM
  • Thanks for your reply! That sounds very easy, so I'll give it a try tomorrow at work :)
    I was not aware of the different charting types - thanks for clearing that.

    In case I run in some trouble I'd appreciate your help, but I think there won't be any problems!

     

    Monday, February 02, 2009 3:42 PM
  • Hi ;)

    Just wanted to report that setting the Interval to 0 causes an endless loop!

    Cheers

    Tuesday, February 03, 2009 3:18 AM