Chart is not working

6 posts, 0 answers
  1. Ivan
    Ivan avatar
    7 posts
    Member since:
    May 2014

    Posted 01 Jul 2014 Link to this post

    Hi! I've tried to integrate your chart control in my application, and have faced the following problem. In my app i have the following data class:
    [Table( Name = "Statistics" )]
        public class StatItem {
            public StatItem() {
            }
     
            public StatItem( StatType type, int id, float value )
                : this( type, id, value, DateTime.UtcNow ) {
            }
     
            public StatItem( StatType type, int id, float value, DateTime dateTime ) {
                Type = type;
                ItemId = id;
                Value = value;
                DateTime = dateTime;
            }
     
            [Column( IsPrimaryKey = true, IsDbGenerated = true, CanBeNull = false, AutoSync = AutoSync.OnInsert )]
            public int Id { get; set; }
            [Column]
            public StatType Type { get; set; }
            [Column]
            public int ItemId { get; set; }
            [Column]
            public float Value { get; set; }
            [Column]
            public DateTime DateTime { get; set; }
     
            public string DateTimeNormal { get { return DateTime.ToShortDateString(); } }
        }

    I'm using MVVM for my app and have the following property in my ViewModel:
    public ObservableCollection<StatItem> BodyParameters

    On my page, i have the following XAML code:
    <chart:RadCartesianChart x:Name="chart" Height="200"
                             Margin="7">
        <chart:RadCartesianChart.HorizontalAxis>
            <chart:LinearAxis/>
        </chart:RadCartesianChart.HorizontalAxis>
     
        <chart:RadCartesianChart.VerticalAxis>
            <chart:LinearAxis/>
        </chart:RadCartesianChart.VerticalAxis>
     
        <!--<chart:RadCartesianChart x:Name="BodyParamChart"
                             Height="200"
                             Margin="7"
     
                             AxisForeground="White"
                             Background="SteelBlue"
                             FontSize="11"
                             CategoryValueMemberPath="DateTimeNormal"
                             GridStroke="Transparent"
                             IsEnabled="False"
                             DataSource="{Binding BodyParameters}"
                             PlotAreaBackground="SteelBlue">-->
     
     
        <chart:RadCartesianChart.Series>
            <chart:LineSeries Path=Statistics}" x:Name="BodyParamChart" Stroke="Orange" ValueBinding="Value" CategoryBinding="DateTimeNormal" ItemsSource="{Binding BodyParameters}" StrokeThickness="2">
            </chart:LineSeries>
        </chart:RadCartesianChart.Series>
    </chart:RadCartesianChart>
    And as a result I have the attached screenshot. I'm pretty sure, that that my data is OK, because I was using the other chart component with it. Maybe, I just misunderstand something about your chart component?
  2. Ivan
    Ivan avatar
    7 posts
    Member since:
    May 2014

    Posted 01 Jul 2014 in reply to Ivan Link to this post

    Don't know how to edit posts, so here is the correct xaml:
    <chart:RadCartesianChart x:Name="chart" Height="200"
                             Margin="7">
        <chart:RadCartesianChart.HorizontalAxis>
            <chart:LinearAxis/>
        </chart:RadCartesianChart.HorizontalAxis>
     
        <chart:RadCartesianChart.VerticalAxis>
            <chart:LinearAxis/>
        </chart:RadCartesianChart.VerticalAxis>
     
        <!--<chart:RadCartesianChart x:Name="BodyParamChart"
                             Height="200"
                             Margin="7"
     
                             AxisForeground="White"
                             Background="SteelBlue"
                             FontSize="11"
                             CategoryValueMemberPath="DateTimeNormal"
                             GridStroke="Transparent"
                             IsEnabled="False"
                             DataSource="{Binding BodyParameters}"
                             PlotAreaBackground="SteelBlue">-->
     
     
        <chart:RadCartesianChart.Series>
            <chart:LineSeries x:Name="BodyParamChart" Stroke="Orange" ValueBinding="Value" CategoryBinding="DateTimeNormal" ItemsSource="{Binding BodyParameters}" StrokeThickness="2">
            </chart:LineSeries>
        </chart:RadCartesianChart.Series>
    </chart:RadCartesianChart>

  3. DevCraft banner
  4. Ivan
    Ivan avatar
    7 posts
    Member since:
    May 2014

    Posted 02 Jul 2014 Link to this post

    Anybody?
  5. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 03 Jul 2014 Link to this post

    Hi Ivan,

    Thank you for the question.

    The problem is that you try to plot categorical data on a chart with two linear axes. If you set the RadCartesianChart.HorizontalAxis to CategoricalAxis, then the data will be visualized. You can also use DateTimeCategoricalAxis or DateTimeContinuousAxis if you wish to set the CategoryBinding of the LineSeries directly to a property of type DateTime.

    I hope this helps. Please, let us know if you have further questions.

    Regards,
    Rosy Topchiyska
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Ivan
    Ivan avatar
    7 posts
    Member since:
    May 2014

    Posted 03 Jul 2014 in reply to Rosy Topchiyska Link to this post

    Thank you. Now I have another problem. I have two or more value change on one DateTime. But when I display them, it shows only one horizontal value. I've attached file. 

    <chart:RadCartesianChart.HorizontalAxis>
    <chart:DateTimeCategoricalAxis/>
    </chart:RadCartesianChart.HorizontalAxis>

    P.S. Maybe there is a reference link for all methods and properties? I'm feeling very noobie. =)
  7. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 08 Jul 2014 Link to this post

    Hi Ivan,

    Here is a link to the API reference of the DateTimeCategoricalAxis, in the See Also section you can find a link with all members of the class. You have to set the DateTimeCategoricalAxis.DateTimeComponent property that will be used to to group the data points in categories by the specified component. If you do not wish to group the points, but display them as on a numerical axis, then you can use the DateTimeContinuousAxis.

    I hope this is useful. Please, let us know if you have further questions.

    Regards,
    Rosy Topchiyska
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
DevCraft banner