Chart - LinseSeries Dynamic

2 posts, 0 answers
  1. Marco
    Marco avatar
    4 posts
    Member since:
    Apr 2014

    Posted 30 Nov 2014 Link to this post

    Hi,

    I want to fill a chart dynamicaly.

    My XAML : (mainpage.xaml)

    <Page
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:Chart="using:Telerik.UI.Xaml.Controls.Chart"
        x:Class="App1.MainPage"
        mc:Ignorable="d"

        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">



        <Hub>
            <HubSection>
                <DataTemplate>
                    <Chart:RadCartesianChart HorizontalAlignment="Left" 
                                     Margin="0,0,0,0" 
                                     VerticalAlignment="Top"
                                     Width="350"
                                     Height="400"
                                     x:Name="lineSeries">
                <Chart:RadCartesianChart.HorizontalAxis>
                    <Chart:CategoricalAxis/>
                </Chart:RadCartesianChart.HorizontalAxis>
                <Chart:RadCartesianChart.VerticalAxis>
                    <Chart:LinearAxis/>
                </Chart:RadCartesianChart.VerticalAxis>

                <Chart:LineSeries ItemsSource="{Binding}"
                                  Stroke="Blue"
                                  Name="Line1">
                    <Chart:LineSeries.CategoryBinding>
                        <Chart:PropertyNameDataPointBinding PropertyName="Category"/>
                    </Chart:LineSeries.CategoryBinding>
                    <Chart:LineSeries.ValueBinding>
                        <Chart:PropertyNameDataPointBinding PropertyName="Value"/>
                    </Chart:LineSeries.ValueBinding>
                </Chart:LineSeries>

                <Chart:LineSeries ItemsSource="{Binding}"
                                  Stroke="Red"
                                  Name="Line2">
                    <Chart:LineSeries.CategoryBinding>
                        <Chart:PropertyNameDataPointBinding PropertyName="Category"/>
                    </Chart:LineSeries.CategoryBinding>
                    <Chart:LineSeries.ValueBinding>
                        <Chart:PropertyNameDataPointBinding PropertyName="Value"/>
                    </Chart:LineSeries.ValueBinding>
                </Chart:LineSeries>


            </Chart:RadCartesianChart>


                    </DataTemplate>
                </HubSection>
            </Hub>
    </Page>

    My c#  (mainpage.xaml.cs)
    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;

    // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

    namespace App1
    {
        /// <summary>
        /// An empty page that can be used on its own or navigated to within a Frame.
        /// </summary>
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();

                this.NavigationCacheMode = NavigationCacheMode.Required;
                List<GData> data1 = new List<GData>();
                data1.Add(new GData() { Category = "Apples", Value = 5 });
                data1.Add(new GData() { Category = "Oranges", Value = 9 });
                data1.Add(new GData() { Category = "Pineaples", Value = 8 });

                this.lineSeries.DataContext = data1;
                List<GData> data2 = new List<GData>();
                data2.Add(new GData() { Category = "Apples", Value = 3 });
                data2.Add(new GData() { Category = "Oranges", Value = 6 });
                data2.Add(new GData() { Category = "Pineaples", Value = 7 });

                this.lineSeries.DataContext = data2;

            }


            protected override void OnNavigatedTo(NavigationEventArgs e)
            {

            }

        }

        public class GData
        {
            public string Category { get; set; }
            public double Value { get; set; }
        }
    }

    My error :

    Error 1 'App1.MainPage' does not contain a definition for 'lineSeries' and no extension method 'lineSeries' accepting a first argument of type 'App1.MainPage' could be found (are you missing a using directive or an assembly reference?)

    My question :
    What to do to solve this ?



    Thx !





  2. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 02 Dec 2014 Link to this post

    Hi Marco,

    The chart is not available in the code through its name lineSeries, because it is defined within a DataTemplate, which limits its namescope. Actually, that would be true for any control, not just for the chart. You can find more details here. To solve the issue, you can set DataContext property of the HubSection itself and it will be propagated to the items in it. You can find similar topics discussed in this article.

    Best regards,
    Ves
    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