How to create a line chart with data from an ArrayList

Thread is closed for posting
3 posts, 0 answers
  1. Kuria
    Kuria avatar
    11 posts
    Member since:
    Jun 2014

    Posted 02 Jul 2014 Link to this post

    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. Kuria
    Kuria avatar
    11 posts
    Member since:
    Jun 2014

    Posted 03 Jul 2014 Link to this post

    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.
  3. Victor
    Victor avatar
    1358 posts

    Posted 04 Jul 2014 Link to this post

    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>() {
        public Calendar apply(Integer argument) {
            return myObject.get(argument).getDate();

    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.


    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