Binding real time data to my char via XAML

2 posts, 0 answers
  1. Zik
    Zik avatar
    4 posts
    Member since:
    May 2015

    Posted 26 May 2015 Link to this post

    I have this chart:

    <telerik:RadCartesianChart Name="myChart">
        <telerik:RadCartesianChart.Grid>
            <telerik:CartesianChartGrid MajorLinesVisibility="XY"/>
        </telerik:RadCartesianChart.Grid>
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:LogarithmicAxis LogarithmBase="2"
                             Minimum="125" Maximum="8000"/>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis Maximum="10" Minimum="-130"/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.Series>
            <telerik:ScatterLineSeries>
                <telerik:ScatterLineSeries.DataPoints>
                    <telerik:ScatterDataPoint YValue="-40" XValue="125"/>
                    <telerik:ScatterDataPoint YValue="-50" XValue="250"/>
                    <telerik:ScatterDataPoint YValue="-60" XValue="500"/>
                    <telerik:ScatterDataPoint YValue="-70" XValue="1000"/>
                    <telerik:ScatterDataPoint YValue="-80" XValue="2000"/>
                    <telerik:ScatterDataPoint YValue="-70" XValue="4000"/>
                </telerik:ScatterLineSeries.DataPoints>
            </telerik:ScatterLineSeries>
        </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>

    And in my code i have timer that receive data every second:

    private Random random = null;

    Create timer:

    random = new Random();
        System.Windows.Threading.DispatcherTimer dispatcherTimer = new System.Windows.Threading.DispatcherTimer();
        dispatcherTimer.Tick += dispatcherTimer_Tick;
        dispatcherTimer.Interval = new TimeSpan(0, 0, 1);
        dispatcherTimer.Start();

    Timer tick:

    private void dispatcherTimer_Tick(object sender, EventArgs e)
    {
        int val = random.Next(0, 100);
        line.DataPoints.Add(new CategoricalDataPoint() { Value = val });
    }

    I all i want to to (i am totally new with WPF) is to replace my hard coded values in my XAML in the real time data that the timer received (the 'val' variable).

    My timer is define only in the code and not in XAML.

    How can i do that ?

    I have this chart:

    <telerik:RadCartesianChart Name="myChart"> 

     
     
    ffffff
     
     
    <telerik:RadCartesianChart.Grid>
            <telerik:CartesianChartGrid MajorLinesVisibility="XY"/>
        </telerik:RadCartesianChart.Grid>
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:LogarithmicAxis LogarithmBase="2"
                             Minimum="125" Maximum="8000"/>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis Maximum="10" Minimum="-130"/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.Series>
            <telerik:ScatterLineSeries>
                <telerik:ScatterLineSeries.DataPoints>
                    <telerik:ScatterDataPoint YValue="-40" XValue="125"/>
                    <telerik:ScatterDataPoint YValue="-50" XValue="250"/>
                    <telerik:ScatterDataPoint YValue="-60" XValue="500"/>
                    <telerik:ScatterDataPoint YValue="-70" XValue="1000"/>
                    <telerik:ScatterDataPoint YValue="-80" XValue="2000"/>
                    <telerik:ScatterDataPoint YValue="-70" XValue="4000"/>
                </telerik:ScatterLineSeries.DataPoints>
            </telerik:ScatterLineSeries>
        </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>

    And in my code i have timer that receive data every second:

    I have this chart:

    <telerik:RadCartesianChart Name="myChart">
        <telerik:RadCartesianChart.Grid>
            <telerik:CartesianChartGrid MajorLinesVisibility="XY"/>
        </telerik:RadCartesianChart.Grid>
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:LogarithmicAxis LogarithmBase="2"
                             Minimum="125" Maximum="8000"/>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis Maximum="10" Minimum="-130"/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.Series>
            <telerik:ScatterLineSeries>
                <telerik:ScatterLineSeries.DataPoints>
                    <telerik:ScatterDataPoint YValue="-40" XValue="125"/>
                    <telerik:ScatterDataPoint YValue="-50" XValue="250"/>
                    <telerik:ScatterDataPoint YValue="-60" XValue="500"/>
                    <telerik:ScatterDataPoint YValue="-70" XValue="1000"/>
                    <telerik:ScatterDataPoint YValue="-80" XValue="2000"/>
                    <telerik:ScatterDataPoint YValue="-70" XValue="4000"/>
                </telerik:ScatterLineSeries.DataPoints>
            </telerik:ScatterLineSeries>
        </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>

    And in my code i have timer that receive data every second:

    I have this chart:

    <telerik:RadCartesianChart Name="myChart">
        <telerik:RadCartesianChart.Grid>
            <telerik:CartesianChartGrid MajorLinesVisibility="XY"/>
        </telerik:RadCartesianChart.Grid>
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:LogarithmicAxis LogarithmBase="2"
                             Minimum="125" Maximum="8000"/>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis Maximum="10" Minimum="-130"/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.Series>
            <telerik:ScatterLineSeries>
                <telerik:ScatterLineSeries.DataPoints>
                    <telerik:ScatterDataPoint YValue="-40" XValue="125"/>
                    <telerik:ScatterDataPoint YValue="-50" XValue="250"/>
                    <telerik:ScatterDataPoint YValue="-60" XValue="500"/>
                    <telerik:ScatterDataPoint YValue="-70" XValue="1000"/>
                    <telerik:ScatterDataPoint YValue="-80" XValue="2000"/>
                    <telerik:ScatterDataPoint YValue="-70" XValue="4000"/>
                </telerik:ScatterLineSeries.DataPoints>
            </telerik:ScatterLineSeries>
        </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>

    And in my code i have timer that receive data every second:

     
     
     
     
     
     
     
     
     
    Text-to-speech function is limited to 100 characters
     
  2. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 27 May 2015 Link to this post

    Hi Zik,

    I suggest you invest some time into getting to know our control and its features. This way, you will learn about what the chart can do and how you can get it working. Here are some references:
    live-data qsf example
    sdk samples
    online documentation

    As you can see in the examples, you can create a data-bound series by specifying CategoryBinding and ValueBinding (or if you decide to use a scatter variation - XValueBinding and YValueBinding). You can then alter your observable collection on the click of a timer. Note, however, that you need to ensure that you modify the collection only on the UI thread (via Dispatcher.BeginInvoke). This is because the chart is a UI control and you should make changes only on the UI thread.

    Regards,
    Petar Marchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top