newbie issue - Chart doesnt display any values

[Kuria]

Hi again. 

I must say i'm struggling understanding how to use the Chart controls. They seem rather complex and have a steep learning curve for me.
The examples shown in the download all work with fragments and my app isnt using fragments as its phone only. the fragments in the example all implement other fragments and I quickly got lost trying to follow.
If possible I'd like to request simpler examples that are contained in one activity so that its easier to follow :)  

The objective
My aim is to display a dual line chart with the horizontalAxis having Day values like 01-Jun,02-Jun  and 2 line series in the chart body where one line shows amount received and the other shows amount sent.  The purpose is to show user their spending and income trends over a selected time Period.

I collect the data via an async task and have a listener which is activated when data is successfully collected and wrapped inside an object that has only 4 fields. 
fields are a)Date, b)amount sent, c)amount Received, d) YAxisValue which is just a copy of either sent or received amount.  - I added this field because the charts all seem to require  "category" and "value"  data.
I'm assuming that the "Value" in this case would be discrete amounts shown on the Y axis where the bottom would be 0 and top would be highest value known for either Sent or Received amounts.


The code below runs just fine but doesnt display anything.  the chart is empty. (I can confirm however that the series variables all have data in debug view) \
I'm suspecting that i'm missing some initialization somewhere ....but not sure where.



---xml used in layout----------------------------------

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        style="@style/MatchParent.ExampleFragment">

        <TextView
            style="@style/WrapContent.ChartTitle"
            android:text="Daily Trends"
            android:enabled="false"
            android:id="@+id/textView"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_below="@+id/progressBarDailyChart"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />

        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          style="@style/MatchParent.ExampleFragment">
        <com.telerik.widget.chart.visualization.cartesianChart.RadCartesianChartView
            android:id="@+id/container"
            style="@style/MatchParent.Chart" />
        </RelativeLayout>
        <ProgressBar
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:id="@+id/progressBarDailyChart"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:visibility="invisible" />

    </RelativeLayout>
</RelativeLayout>
--------------------------------------------------------------------

----------------code used to try and display the chart---------------------------------
public class activity_daily_log_chart extends ActionBarActivity implements dailylog_transComplete_listenerDay_chart {
    CategoricalAxis horizontalAxis;
    LinearAxis verticalAxis;
    List<daily_log_trans_for_chart> monthResults;
    ViewGroup rootView;
    LineSeries lineSeries;
    LineSeries lineSeries2;
    dailylog_trans_expListAdapterDay IncomingAdapter;
    ArrayList<daily_log_trans_for_chart> DayResults;
    ProgressBar progressBarDailyChart;
    dailylog_trans_Async_day_chart objFetchRecentsSummaryData;
    boolean blnShowDateFilter;
    long lngFilterStartDate;
    long lngFilterEndDate;
    private static final float VERTICAL_AXIS_MULTIPLE_STEP = 50;
    private static final float VERTICAL_AXIS_MULTIPLE_MIN = 0;
    private static final float VERTICAL_AXIS_MULTIPLE_MAX = 200;
    RadChartViewBase chart;
    RadCartesianChartView cartesianChart;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_daily_log_charts);
        progressBarDailyChart =(ProgressBar) findViewById(R.id.progressBarDailyChart);
        ReadIntentParameters();
        cartesianChart = new RadCartesianChartView(this);
        GetChartData();

    }

    }
//this collects data from a table via AsyncTask and puts it into an object that is then passed to the chart
    private void GetChartData() {
        if(blnShowDateFilter){
            objFetchRecentsSummaryData = new dailylog_trans_Async_day_chart(true,this,true,progressBarDailyChart,false,lngFilterStartDate,lngFilterEndDate);
        }
        else
        {
            objFetchRecentsSummaryData = new dailylog_trans_Async_day_chart(true,this,true,progressBarDailyChart,false);
        }
        objFetchRecentsSummaryData.setListListener(this); //the chart is passed data to when the data collection task is complete.
        objFetchRecentsSummaryData.execute(); 


    }


private void PrepareAndDisplayChart(Context context,ArrayList<daily_log_trans_for_chart> DayResults){


    LinearAxis vAxis = new LinearAxis(context);
    vAxis.setMinimum(VERTICAL_AXIS_MULTIPLE_MIN);
    vAxis.setMaximum(VERTICAL_AXIS_MULTIPLE_MAX);
    vAxis.setMajorStep(VERTICAL_AXIS_MULTIPLE_STEP);

    CategoricalAxis hAxis = new CategoricalAxis(context);
    hAxis.setLabelFitMode(AxisLabelFitMode.MULTI_LINE);

    DataPointBinding categoryBinding = new FieldNameDataPointBinding("mdate"); // this is the date field with values like 01-Jun,03-Jun etc
    DataPointBinding valueBinding = new FieldNameDataPointBinding("YAxisValue"); // This field I assume is the values that the chart uses to display points against.

    LineSeries series = new LineSeries(context);
    series.setValueBinding(new DataPointBinding() {
        @Override
        public Object getValue(Object o) throws IllegalArgumentException {
            return ((daily_log_trans_for_chart)o).getTotalSent(); //this holds amounts
        }
    });

    Resources res = this.getResources();
    series.setStrokeThickness(res.getDimension(R.dimen.twodp));
    series.setCategoryBinding(categoryBinding);
    series.setValueBinding(valueBinding);
    series.setData(DayResults);
    series.setDataPointIndicatorRenderer(new SphericalDataPointIndicatorRenderer(series));


    LineSeries secondarySeries = new LineSeries(context);
    secondarySeries.setValueBinding(new DataPointBinding() {
        @Override
        public Object getValue(Object o) throws IllegalArgumentException {
            return ((daily_log_trans_for_chart)o).getTotalReceived(); //this holds amount as well
        }
    });


    secondarySeries.setStrokeThickness(res.getDimension(R.dimen.twodp));
    secondarySeries.setCategoryBinding(categoryBinding);
    secondarySeries.setValueBinding(valueBinding);
    //secondarySeries.setData();
    secondarySeries.setData(DayResults);
    secondarySeries.setDataPointIndicatorRenderer(new SphericalDataPointIndicatorRenderer(secondarySeries));

    CartesianChartGrid grid = new CartesianChartGrid(context);
    grid.setStripLinesVisibility(GridLineVisibility.Y);

    cartesianChart.setGrid(grid);
    cartesianChart.setVerticalAxis(vAxis);
    cartesianChart.setHorizontalAxis(hAxis);
    cartesianChart.getSeries().add(series);
    cartesianChart.getSeries().add(secondarySeries);

}

//this is the Listener entry point. hence the chart is called from here only when data is available.
    @Override
    public void TransDataDay(ArrayList<daily_log_trans_for_chart> TransactionsListDay) {

        if(TransactionsListDay!=null && !TransactionsListDay.isEmpty()) {
            PrepareAndDisplayChart(activity_daily_log_chart.this, TransactionsListDay);
        }
        else
        {
        Toast.makeText(activity_daily_log_chart.this,"No Data To Display Chart With",Toast.LENGTH_LONG).show();
        }

    }


}

[Victor]

Hi Kuria,

Thanks for writing.
From the code you provided it appears that you have declared a chart in the XML but you are also creating a new instance of the chart in the code. The chart in the XML is displayed but since it is not configured nothing is displayed. The code chart on the other hand is initialized but it is not added to the android layout so it doesn't render anything. What you need to do is to get a reference to the chart created in XML via findViewById() instead of creating a new instance with the new operator.

Also, you can delete the chart created in XML and add the chart created in code to the android layout.

Please write again if you need further assistance.

Regards,
Victor
Telerik

 

 

[Kuria]

Thanks! I referenced the xml chart and its now fine. Cheers :)

[Victor]

Hi Kuria,

Excellent :). Write again if you need assistance with anything else.

Regards,
Victor
Telerik