This is a migrated thread and some comments may be shown as answers.

How to create a line chart with data from an ArrayList

2 Answers 306 Views
Chart
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Kuria
Top achievements
Rank 1
Kuria asked on 02 Jul 2014, 04:40 PM
Hello.
I'm brand new to telerik and have spent the last couple of days combing examples. I understand the basic ones ie the Line Chart example with an object holding MonthResults.

I've looked but cannot find an example where the object is slightly more complex. My question is How do I draw a Line chart from an object that contains data and looks like what is pasted below

My intention is to have the Date on the X axis and two lines  where one shows total Incoming Funds and the other TotalSpent. Note that I dont actually need to use the data in the object within having childItems (details of the transactions). However if it is possible to also use this data I'd be glad to know how as well.

(I have tried creating a chart but get stuck when creating a DataPointBinding to the LineSeries. The problem is that my arraylist requires provision of an index before accessing the item. ie myObject.get(index).getDate()   ------where Date is to be used as the Line Series DataPointBinding. 


//------------------------------------- ArrayList Object --------------------------------------------------
public class dailylog_Trans_ExpListGroupDay  {

    public static Comparator<dailylog_Trans_ExpListGroupDay> SORT_BY_DATE = new Comparator<dailylog_Trans_ExpListGroupDay>() {
        public int compare(dailylog_Trans_ExpListGroupDay one, dailylog_Trans_ExpListGroupDay other) {

            return one.getDate().compareTo(other.getDate());
        }


    };
    private String Date;
    private ArrayList<dailylog_Trans_ExpListChildDay> Items;
    private double TotalSpent = 0;
    private double TotalIncoming = 0;

    public String getDate() {
        return Date;
    }

    public void setDate(String date) {
        Date = date;
    }

    public ArrayList<dailylog_Trans_ExpListChildDay> getItems() {
        return Items;
    }

    public void setItems(ArrayList<dailylog_Trans_ExpListChildDay> items) {
        Items = items;
    }


    public double getTotalSpent() {
        return TotalSpent;
    }

    public void setTotalSpent(double totalSpent) {
        TotalSpent = totalSpent;
    }

    public double getTotalIncoming() {
        return TotalIncoming;
    }

    public void setTotalIncoming(double totalIncoming) {
        TotalIncoming = totalIncoming;
    }
}

2 Answers, 1 is accepted

Sort by
0
Kuria
Top achievements
Rank 1
answered on 03 Jul 2014, 10:54 PM
While waiting for assistance on the question I decided to find a way around it, which seems to have succeeded somewhat

Since I don't know how to pass an arraylist that uses an index to determine child position, to the telerik control, I decided to emulate the example of MonthResult and create a class exactly like the MonthResult one but having my data. I'm pulling the data from a sqllite db and then putting it into the object. then passing it to the chart to display. It would however have been great to know how to pass data to the chart from an object that contains another object. (useful if for example you have data grouped by date and then having transactions for each date as children.)

While the controls are wonderful there is need of some tutorials (like the video one) but for slightly deeper concepts. For example a tutorial that explains what each step or attribute provided to the chart does etc.
0
Victor
Telerik team
answered on 04 Jul 2014, 07:34 AM
Hello Kuria,

Thanks for writing.
From what I understand you could easily implement your scenario. If you build an array list of integers and populate it with indices through the data point binding you can use the index to get the specified object and return the correct value to the chart to be visualized. For example:
ArrayList<Integer> indices = getIndices();
series.setCategoryBinding(new GenericDataPointBinding<Integer, Calendar>(new Function<Integer, Calendar>() {
    @Override
    public Calendar apply(Integer argument) {
        return myObject.get(argument).getDate();
    }
}));
series.setData(indices);

If this example is not helpful, please clarify your scenario a bit more. Where does the index come from? If the index provider is some global object/class or if the object is accessible through the anonymous Function implementation you can access it like a closure.

I am looking forward to your reply.

Regards,
Victor
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.

 
Tags
Chart
Asked by
Kuria
Top achievements
Rank 1
Answers by
Kuria
Top achievements
Rank 1
Victor
Telerik team
Share this question
or