Plotting a graph w/ a fixed grid size and an expanding view

[JAP]

I'm currently working on a project that concerns coming up with a graph using TeeChart for Xamarin of an ECG Data. Although I have successfully plotted a graph, I have some question in refining my program.

[1] An ECG paper has specifications regarding its grid, specifically 1mm x 1mm per small square. How can I set a fixed distance between the "ticks" in which I think it concerns about setting the "Increment" property of the axis.

[2] I already graphed a series using the whole screen of my phone but unfortunately the graph is limited withing the boundaries of my phone's resolution or dimensions. How can I make my graph retain the previously set "Increment" of each "tick" and still expand where in "unseen" part of the graph horizontally can be seen with the use of the InChart Zoom Style.

[3] An alternative for my second question would be, is it possible to view my graph in a ScrollView container in which it can expancd horizontally?

[Narcís]

Hi JAP,

First of all, is this question about Xamarin.Android or Xamarin.iOS? It would make sense to me that it was with Xamarin.Android and I'll reply assuming that. However, if that's not the case, please let us know.

[1] An ECG paper has specifications regarding its grid, specifically 1mm x 1mm per small square. How can I set a fixed distance between the "ticks" in which I think it concerns about setting the "Increment" property of the axis.

Yes, Increment property, that's right. You can also specify axes dimensions. You'll find more detailed information about that in tutorial 4. Tutorial's can be found at TeeChart's program group.

[2] I already graphed a series using the whole screen of my phone but unfortunately the graph is limited withing the boundaries of my phone's resolution or dimensions. How can I make my graph retain the previously set "Increment" of each "tick" and still expand where in "unseen" part of the graph horizontally can be seen with the use of the InChart Zoom Style.

This should be possible with ZoomStyles.Classic. Full functionality has not been implemented though. It's one of the main items in the TeeChart for Xamarin.Android to-do list. When it's fully functional you should be able to set axes minimum and maximum values and scroll as you would do with classic TeeChart desktop zooming.

In the meantime, an option is using TeeChart paging, for example:

Code: Select all

      tChart1.Series.Add(new Steema.TeeChart.Styles.FastLine()).FillSampleValues(1000);
      tChart1.Zoom.Style = Steema.TeeChart.ZoomStyles.Classic;
      tChart1.Page.MaxPointsPerPage = 100;

You can use the follow instructions to navigate the pages in buttons, for example.

Code: Select all

      tChart1.Page.Current = 0;
      tChart1.Page.Previous();
      tChart1.Page.Next();
      tChart1.Page.Current = tChart1.Page.Count - 1;

[3] An alternative for my second question would be, is it possible to view my graph in a ScrollView container in which it can expancd horizontally?

Yes, you can add TChart objects to a ScrollView. You might need an intermediate container/layout though, LinearLayout, for example. Add the chart to a layout and add this to the ScrollView.

[JAP]

First of all, is this question about Xamarin.Android or Xamarin.iOS? It would make sense to me that it was with Xamarin.Android and I'll reply assuming that. However, if that's not the case, please let us know.

I'm developing am app for both Android and iOS but I'm currently testing for Android now.

Yes, Increment property, that's right. You can also specify axes dimensions. You'll find more detailed information about that in tutorial 4. Tutorial's can be found at TeeChart's program group.

With the imcrement property, why is that it changes expecially if there are so many data in the chart. For example, whenever I limit the max points per page to 6250, the increment based on the generate chart is 500. How can I make it fixed regardless of the data?

This should be possible with ZoomStyles.Classic. Full functionality has not been implemented though. It's one of the main items in the TeeChart for Xamarin.Android to-do list. When it's fully functional you should be able to set axes minimum and maximum values and scroll as you would do with classic TeeChart desktop zooming.

What do you mean by full functionality? I noticed that I can't zoom through pinching when I use this kind of zoom style.

Yes, you can add TChart objects to a ScrollView. You might need an intermediate container/layout though, LinearLayout, for example. Add the chart to a layout and add this to the ScrollView.

Regarding the use of a scrollview container, I can't make it work... Here's my methodology for that, my main container is a LinearLayout then inside it is the scrollview container which contains a Linear Layout (this is where my graph will be viewed).

For the code,
I set my ContentView to my Activity layout
SetContentView(Resource.Layout.FetchWaveformLayout);
process the graph
ScrollView sView = FindViewById<ScrollView>(Resource.Id.scrollView1);
LinearLayout lLayout = FindViewById<LinearLayout>(Resource.Id.linearLayout3);

lLayout.AddView(tChart1, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FillParent, ViewGroup.LayoutParams.FillParent));
sView.AddView(lLayout);

then nothing happens. It's blank.

[Narcís]

With the imcrement property, why is that it changes expecially if there are so many data in the chart. For example, whenever I limit the max points per page to 6250, the increment based on the generate chart is 500. How can I make it fixed regardless of the data?

TeeChart tries to plot axis labels in the range given by Increment provided they don't overlap. If they do, labels will be plotted according to the minimum increment value that makes them not overlapping. If this is not the desired behavior, the only solution is using custom labels. You can find a custom labels example here.

What do you mean by full functionality? I noticed that I can't zoom through pinching when I use this kind of zoom style.

ZoomStyles.Classic full functionality is the same traditional scrolling and panning options available in TeeChart desktop versions. That is being able to toggle zoom or scroll individually, choose scrolling and zooming directions, etc. This hasn't been implemented yet, that's why ZoomStyles.Classic currently only disables zoom and scroll.

Regarding the use of a scrollview container, I can't make it work... Here's my methodology for that, my main container is a LinearLayout then inside it is the scrollview container which contains a Linear Layout (this is where my graph will be viewed).

You'll find a ScrollView example with TeeChart here. If your problem persists please attach a simple example project we can run "as-is" to reproduce the problem here.

Thanks in advance.

[JAP]

I will try to do your suggestion regarding custom labels but I can't make the incorporate of ScrollView work. I copied, because I'm having a hard time uploading the project, the codes of a sample project that includes a parent LinearLayout containing a ScrollView layout and another LinearLayout in it for graph viewing. Unfortunately, it's still blank and with the link you've given I honestly cannot understand what should I do more.

Code: Select all

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;

using Steema.TeeChart;
using Android.Graphics;
using System.Collections;
using Android.Content.PM;
using Steema.TeeChart.Tools;

namespace AndroidApplication5
{
    [Activity(Label = "AndroidApplication5", MainLauncher = true, Icon = "@drawable/icon", ScreenOrientation = ScreenOrientation.Sensor)]
    public class Activity1 : Activity
    {
        private Steema.TeeChart.TChart tChart1;
        int count = 1;

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);

            // Get our button from the layout resource,
            // and attach an event to it
            Button button = FindViewById<Button>(Resource.Id.MyButton);

            button.Click += delegate { button.Text = string.Format("{0} clicks!", count++); };



            //Steema.TeeChart.TChart tChart1 = new Steema.TeeChart.TChart(this);
            tChart1 = new Steema.TeeChart.TChart(this);


            //Steema.TeeChart.Styles.Line line1 = new Steema.TeeChart.Styles.Line();
            Steema.TeeChart.Styles.Line line1 = new Steema.TeeChart.Styles.Line(tChart1.Chart);


            Random Rnd = new Random();            

            for (int t = 0; t < 6250; t++)
            {
                line1.Add(t, ((Rnd.Next(100)) + 1) - ((Rnd.Next(70)) + 1));
            }


            tChart1.Aspect.View3D = false;
            tChart1.Zoom.Style = Steema.TeeChart.ZoomStyles.Classic;

            //Set the intervals for the Axis. 
            Steema.TeeChart.Axis bottomAxis = tChart1.Axes.Bottom;
            bottomAxis.Increment = 250;

            Steema.TeeChart.Axis leftAxis = tChart1.Axes.Left;
            leftAxis.Increment = 10;

            tChart1.Header.Visible = true;
            tChart1.Header.Text = "ECG Thesis";
            tChart1.Header.Alignment = Android.Graphics.Paint.Align.Center;
            tChart1.Header.Font.Size = 20;

            tChart1.Legend.Visible = false;

            tChart1.Axes.Top.AxisPen.Color = System.Drawing.Color.Black;
            tChart1.Axes.Right.AxisPen.Color = System.Drawing.Color.Black;
            tChart1.Axes.Left.AxisPen.Color = System.Drawing.Color.Black;
            tChart1.Axes.Bottom.AxisPen.Color = System.Drawing.Color.Black;
            tChart1.Axes.Top.AxisPen.Width = 1;
            tChart1.Axes.Right.AxisPen.Width = 1;
            tChart1.Axes.Left.AxisPen.Width = 1;
            tChart1.Axes.Bottom.AxisPen.Width = 1;

            LinearLayout lLayout = FindViewById<LinearLayout>(Resource.Id.linearLayout2);
            lLayout.AddView(tChart1, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FillParent, ViewGroup.LayoutParams.FillParent));

            ScrollView sView = FindViewById<ScrollView>(Resource.Id.scrollView1);
            sView.AddView(lLayout, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FillParent, ViewGroup.LayoutParams.FillParent));
        }
    }
}

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <Button
        android:id="@+id/MyButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/Hello" />
    <LinearLayout
        android:orientation="horizontal"
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/linearLayout1">
        <ScrollView
            android:minWidth="25px"
            android:minHeight="25px"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/scrollView1">
            <LinearLayout
                android:orientation="vertical"
                android:minWidth="25px"
                android:minHeight="25px"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/linearLayout2" />
        </ScrollView>
    </LinearLayout>
</LinearLayout>

[Narcís]

Hi JAP.

The problem is the ScrollView FillViewport property as explained here:

http://stackoverflow.com/a/2606641/214639
http://stackoverflow.com/a/4815089/214639
https://groups.google.com/forum/#!topic ... Cd9pZ_s79c
http://www.curious-creature.org/2010/08 ... ndy-trick/

Also, you don't need to add the ScrollView twice as you already do that in the manifest. So you can do something like the code snippet below or remove all ScrollView code from the Activity and add android:fillViewport="true" in the ScrollView manifest properties.

Code: Select all

      ScrollView sView = FindViewById<ScrollView>(Resource.Id.scrollView1);
      sView.FillViewport = true;

[japrtorres]

I'm sorry I this issue is too long to be solve but making the fillViewport property as "true" can't fix it..


Here's my manifest (I assume this is)

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:p1="http://schemas.android.com/apk/res/android"
    p1:orientation="horizontal"
    p1:minWidth="25px"
    p1:minHeight="25px"
    p1:layout_width="match_parent"
    p1:layout_height="match_parent"
    p1:id="@+id/linearLayout1"
    p1:background="@drawable/Fetch_Waveform_BG">
    <LinearLayout
        p1:orientation="vertical"
        p1:minWidth="25px"
        p1:minHeight="25px"
        p1:layout_width="111.1dp"
        p1:layout_height="match_parent"
        p1:id="@+id/linearLayout2"
        p1:gravity="bottom">
        <Button
            p1:text="First Page"
            p1:layout_width="match_parent"
            p1:layout_height="30dp"
            p1:id="@+id/p1Btn"
            p1:textSize="12dp"
            p1:textColor="#4F4F4F" />
        <Button
            p1:text="Next"
            p1:layout_width="match_parent"
            p1:layout_height="30dp"
            p1:id="@+id/advBtn"
            p1:textSize="12dp"
            p1:textColor="#4F4F4F" />
        <Button
            p1:text="Previous"
            p1:layout_width="match_parent"
            p1:layout_height="30dp"
            p1:id="@+id/bckBtn"
            p1:textSize="12dp"
            p1:textColor="#4F4F4F" />
        <Button
            p1:text="Last Page"
            p1:layout_width="match_parent"
            p1:layout_height="30dp"
            p1:id="@+id/lpBtn"
            p1:textSize="12dp"
            p1:textColor="#4F4F4F" />
    </LinearLayout>
    <ScrollView
        p1:minWidth="25px"
        p1:minHeight="25px"
        p1:layout_width="match_parent"
        p1:layout_height="match_parent"
        p1:id="@+id/scrollView1"
        p1:fillViewport="true">
        <LinearLayout
            p1:orientation="horizontal"
            p1:minWidth="25px"
            p1:minHeight="25px"
            p1:layout_width="match_parent"
            p1:layout_height="match_parent"
            p1:id="@+id/linearLayout3" />
    </ScrollView>
</LinearLayout>

Here's my activity (partial)

Code: Select all

ScrollView sView = FindViewById<ScrollView>(Resource.Id.scrollView1); //Unhandled Exception: Java.Lang.IllegalStateException: Loading...
sView.FillViewport = true;

LinearLayout lLayout = FindViewById<LinearLayout>(Resource.Id.linearLayout3);
lLayout.AddView(tChart1, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FillParent, ViewGroup.LayoutParams.FillParent));

sView.AddView(lLayout);

It still has an unhandled exception

Java.Lang.IllegalStateException: Loading...

[Narcís]

Hello,

It still has an unhandled exception

Java.Lang.IllegalStateException: Loading...

Yes, I also got this. That's why told you that you didn't have to assign the ScrollView twice (at the manifest and at the activity code). Apologies if my reply was not clear enough:

Also, you don't need to add the ScrollView twice as you already do that in the manifest. So you can do something like the code snippet below or remove all ScrollView code from the Activity and add android:fillViewport="true" in the ScrollView manifest properties.

Code: Select all

      ScrollView sView = FindViewById<ScrollView>(Resource.Id.scrollView1);
      sView.FillViewport = true;

Since you are already setting the ScrollView and FillViewPort property at the manifest you don't need to add additional ScrollView related code at the Activity. So you can safely remove the ScrollView code belwo, you only need to add the chart to the LinearLayout.

Code: Select all

ScrollView sView = FindViewById<ScrollView>(Resource.Id.scrollView1); //Unhandled Exception: Java.Lang.IllegalStateException: Loading...
sView.FillViewport = true;

LinearLayout lLayout = FindViewById<LinearLayout>(Resource.Id.linearLayout3);
lLayout.AddView(tChart1, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FillParent, ViewGroup.LayoutParams.FillParent));

sView.AddView(lLayout);

So that it is something like this:

Code: Select all

LinearLayout lLayout = FindViewById<LinearLayout>(Resource.Id.linearLayout3);
lLayout.AddView(tChart1, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FillParent, ViewGroup.LayoutParams.FillParent));

Find also attached the code I used.