Creating a Kendo chart view from my model class

Question

I'm new to both the MVC framework and Kendo, so you'll have to bear with me. Here's my chart base class (the DatedChart class I'm using is just a chart of type <DateTime, double>:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Project.Models.Charts
{
    public class NewChart<XType, YType> : IMailListener
        where XType:IComparable 
        where YType:IComparable
    {
        public Dictionary<string, DataSeries<XType, YType>> SeriesList { get; protected set;  }
        public string Title { get; set; }
        public string XLabel { get; set; }
        public string YLabel { get; set; }

        public NewChart(string title, string xLabel, string yLabel)
        {
            this.SeriesList = new Dictionary<string, DataSeries<XType, YType>>();
            this.Title = title;
            this.XLabel = xLabel;
            this.YLabel = yLabel;
        }

        public void AddSeries(DataSeries<XType, YType> series)
        {
            this.SeriesList.Add(series.Name, series);
        }

        public virtual void OnUpdate(IEnumerable<MailEntry> mail)
        {
            foreach (var ds in this.SeriesList.Values)
            {
                ds.OnUpdate(mail);
            }
        }
    }
}

And here's the class for the data series:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Project.Models.Charts
{
    public abstract class DataSeries<XType, YType> : IMailListener
        where XType : IComparable
        where YType : IComparable
    {
        public string Name;
        public List<Pair<XType, YType>> values { get; private set; }

        protected DataSeries(string name)
        {
            this.Name = name;
            this.values = new List<Pair<XType, YType>>();
        }

        public abstract void OnUpdate(IEnumerable<MailEntry> mail);
    }
}

What I need to do is to create a view that will display one of these charts. I've read a lot of examples, but it's hard for me to see how they apply to what I'm trying to do - a lot of them gloss over how to fit your view around an arbitrary model. I don't need anything fancy for an example, just something that will show me how to get the data from one of these charts into a format where Kendo's LineChart class can display the series. My view might look something like this:

@using DatedChart = Project.Models.Charts.DatedChart
@using DatedSeries = Project.Models.Charts.DataSeries<System.DateTime, double>
@model DatedChart

<div class="nice-module nice-smallchart center">
    // Magic here?
</div>

Any hints?

EDIT:

Explanation of the model My model consists of Chart objects, where each chart has a title, x-axis, y-axis, and a set of one or more data series. Each series is a different set of points (i.e. it will be in its own color, and if it's a line chart, only those points will be connected with each other). I made the base Chart class parameterized so that the X and Y axes can have any type, but for now I'm just using DateTime objects for the X type and doubles for the y type, hence the DatedChart which will have series whose data points are pairs of . An example of this chart model would be a graph showing the reputation of four Stack Overflow users over a month period. Each user would have his or her own series of points (x, y), where x is the DateTime of a day, and y is a count o posts.

Vano Maisuradze Vano Maisuradze · Accepted Answer · 2013-08-07T05:01:46

I didn't get how your model works (What is DatedChart etc.) but here is how would I draw chart:

Model

public class Pair<XType, YType>
{
    public XType X { get; set; }
    public YType Y { get; set; }
}

public class ChartModel<XType, YType>
{
    public List<Pair<XType, YType>> Data { get; set; }
}

Controller Action

public ActionResult Test()
{
    ChartModel<int, int> model = new ChartModel<int, int>();
    model.Data = new List<Pair<int, int>>();

    for (int i = 0; i < 10; i++)
    {
        Pair<int, int> p = new Pair<int, int>();
        p.X = i;
        p.Y = i;
        model.Data.Add(p);
    }

    return View(model);
}

View

@model ChartModel<int, int> 

 <div id="chart"></div>

<script>
    function createChart() {
        $("#chart").kendoChart({
            title: {
                text: "Chart title"
            },
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "line"
            },
            series: [{
                name: "Serie name",
                data: [
                    @foreach (var item in Model.Data)
                    {
                        @item.X.ToString()@:,
                    }
                    ]
                    }],
            valueAxis: {
                labels: {
                    format: "{0}%"
                },
                line: {
                    visible: false
                }
            },
            categoryAxis: {
                categories: [
                    @foreach (var item in Model.Data)
                    {
                        @item.Y@:,
                    }],
                majorGridLines: {
                    visible: true
                }
            },
            tooltip: {
                visible: true,
                format: "{0}%",
                template: "#= series.name #: #= value #"
            }
        });
    }

    $(document).ready(createChart);
</script>

Creating a Kendo chart view from my model class

1 Answers