MVC Build Chart in the Controller

4 posts, 0 answers
  1. Robert
    Robert avatar
    20 posts
    Member since:
    Jul 2013

    Posted 20 Aug 2013 Link to this post

    Is it possible to build a Chart in the MVC Control and pass it to the View in the Model?  I want to do this so that I can dynamically display a chart based on the desired dashboard layout.  So I want the View to dictate where the charts are displayed but I want the View to be ignorant of the reports content.  Let me know if I haven't explained what I want to do well enough or if there is a better way.  I plan to have the dashboard layouts and which reports those contain stored in a database.

    This is a "mark up"
    View
    @model ChartCollection
    @{
        ViewBag.Title = "Dashboard";
    }
    <h2>
        Dashboard
    </h2>
    @Html.Partial("_Report1", Model["ValidationResults"])
    @Html.Partial("_Report2", Model["ClientComponents"])

    ChartCollection(Model)
    public class ChartCollection : Dictionary<string, IChart>
    {
    }
    Controller
    01.public class HomeController : Controller
    02.{
    03.    public ActionResult Index()
    04.    {
    05.        ViewBag.Message = "Welcome to ASP.NET MVC!";
    06. 
    07.        return View();
    08.    }
    09. 
    10.    public ActionResult About()
    11.    {
    12.        ChartCollection charts = new ChartCollection();
    13. 
    14.        IChart chart;
    15. 
    16.        /// How do I duplicate this logic in the Controller?
    17.         @(Html.Kendo().Chart()
    18.            .Name("ClientComponents")
    19.            .Title("Components")
    20.            .DataSource(ds =>
    21.                    {
    22.                        ds.Model(model =>
    23.            {
    24.                            foreach (DataColumn col in Model.QueryResults.Columns)
    25.                            {
    26.                                model.Field(col.ColumnName, col.DataType);
    27.                            }
    28.                        });
    29.                    }
    30.            )
    31.        .Legend(legend => legend.Visible(true).Position(ChartLegendPosition.Bottom))
    32.        .Series(series => series.Bar(new int[] {2,4,6}).Name("MyValues"))
    33.        .CategoryAxis(yaxis => yaxis.Categories(new string[] {"Hello", "World"}))
    34.        .Tooltip(tip => tip.Visible(true)) )
    35. 
    36.        /// Add the IChart to the ChartCollection
    37.        charts.Add(chart.Name, chart)
    38.        return View(charts);
    39.                }
    40.            }
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2815 posts

    Posted 22 Aug 2013 Link to this post

    Hello,

    The helper methods are designed to be used within a view. You might be able to construct the widgets by initializing their properties directly, but they're not designed to be used like that.

    Our recommendation is to store the widget configuration in a dedicated view model and construct the widget from it. This also maintains the View-Controller separation inherent to the MVC framework.

    For example:

        .Title(Model.Title)
        .Series(series => {
            foreach (var s in Model.Series)
            {
                series.Bar(s.Field).Name(s.Name);
            }
        })


    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Robert
    Robert avatar
    20 posts
    Member since:
    Jul 2013

    Posted 22 Aug 2013 Link to this post

    Are there objects in the framework that I can use as container object in the Model or do I have to build my own?
  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2815 posts

    Posted 23 Aug 2013 Link to this post

    Hello,

    Well, not really, but the ViewBag is usually a good fit for unstructured data.

    Regards,
    T. Tsonev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top