[Solved] Chart is not working

[Ivan]

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?

[Ivan]

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>

[Ivan]

Anybody?

[Rosy Topchiyska]

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

 

 

[Ivan]

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. =)

[Rosy Topchiyska]

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