Question about determinging step as X axis shows datetime value

4 posts, 0 answers
  1. hao
    hao avatar
    2 posts
    Member since:
    Oct 2010

    Posted 02 Jan 2011 Link to this post


    I would like to show temperature data every 15 minutes using line chart.
    X axis shows time, Y axis shows temperature value of double type.

    I want X axis label to show one scale every 15 minutes, or I can set the step of X axis. How can I do this ?

    Attachment is my desirous effect.

    Many thanks!

    my codes:
    private void ConfigureChart()
                RadChart1.DefaultView.ChartLegend.Visibility = Visibility.Collapsed;
                RadChart1.DefaultView.ChartArea.EnableAnimations = true;
                RadChart1.DefaultView.ChartArea.ZoomScrollSettingsX.RangeEnd = 20.0 / 192;
                RadChart1.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.ScrollOnly;

                RadChart1.DefaultView.ChartArea.AxisX.Title = "??";
                RadChart1.DefaultView.ChartArea.AxisX.DefaultLabelFormat = "HH:mm:ss";
                RadChart1.DefaultView.ChartArea.AxisX.StepLabelLevelCount = 2;
                RadChart1.DefaultView.ChartArea.AxisX.StepLabelLevelHeight = 15;
                RadChart1.DefaultView.ChartArea.AxisX.IsDateTime = true;

                //RadChart1.DefaultView.ChartArea.AxisX.MaxValue = 100;
                //RadChart1.DefaultView.ChartArea.AxisX.MinValue = 0;
                //RadChart1.DefaultView.ChartArea.AxisX.Step = 10;
                //RadChart1.DefaultView.ChartArea.AxisX.LabelStep = 5;

                RadChart1.DefaultView.ChartArea.AxisY.AutoRange = true;
                RadChart1.DefaultView.ChartArea.AxisY.MajorGridLinesVisibility = Visibility.Visible;
                RadChart1.DefaultView.ChartArea.AxisY.MinorGridLinesVisibility = Visibility.Visible;
                RadChart1.DefaultView.ChartArea.AxisY.Title = "??";

                SeriesMapping temperatureMapping = new SeriesMapping();
                temperatureMapping.SeriesDefinition = new LineSeriesDefinition();
                temperatureMapping.SeriesDefinition.ShowItemToolTips = true;
                temperatureMapping.ItemMappings.Add(new ItemMapping("Date", DataPointMember.XValue));
                temperatureMapping.ItemMappings.Add(new ItemMapping("Temperature1", DataPointMember.YValue));
                temperatureMapping.ItemMappings.Add(new ItemMapping("Tooltip1", DataPointMember.Tooltip));

    private void FillSampleChartData()
                List<TemperatureData> temperatureData = new List<TemperatureData>();
                DateTime baseDate = new DateTime(2000, 1, 1);
                int iCount = 192;   // It captures Temperature Value every other fifteen minutes.
                                    // there are 192 fifteen-minutes in two days

                for (int year = 0; year < 1; year++)
                    for (int day = 0; day < 1; day++)
                        for (int hour = 0; hour < iCount; hour++)
                            TemperatureData tempData = new TemperatureData();
                            tempData.Temperature1 = TranslateTemperatureValue(CalculateBaseTemperatureValue(hour));
                            tempData.Date = baseDate;

                            baseDate = baseDate.AddMinutes(15);

                RadChart1.ItemsSource = temperatureData;

    <Grid x:Name="LayoutRoot">
            <telerik:RadChart Height="600" HorizontalAlignment="Left" Name="RadChart1" VerticalAlignment="Top" Width="800" />

  2. Yavor
    Yavor avatar
    11 posts

    Posted 03 Jan 2011 Link to this post

    Hello hao,

    You can use a setup similar to this one:

    however, instead of refreshing the control every second, you can do so every 15 minutes, in accordance with your requirements.
    I hope this information helps.

    All the best,
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  3. hao
    hao avatar
    2 posts
    Member since:
    Oct 2010

    Posted 05 Jan 2011 Link to this post

    What I need is not refreshing the control every second, or every 15 minutes.The data I want to show is not real-time, but historical. The control need non real-time refreshment.
    After setting the value of RadChart.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode as ScrollMode.ScrollOnly, how I determine step of X axis? The example , "100,000 + records", does not interprete how to determine step of X axis.
  4. Ves
    Ves avatar
    2926 posts

    Posted 10 Jan 2011 Link to this post

    Hello hao,

     What about using  AutoRange=true ? Generally the step is determined so that there are enough visible ticks, but not too much of them. The 100000+ records demo use exactly this technique -- it leaves the chart to calculate the step. The density of the ticks is controlled by the TicksDistance property. The lesser the value, the more ticks are visible and they appear closer to each other.

    Best regards,
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
Back to Top