Rendering HTML5 Charts in partial views show only blank data

Question

I am trying to display MVC charts as shown in Creating a HTML5 Chart Helper Extension for ASP.NET MVC 4. I have the standard project working but I can't get multiple graphs to show up at once in partial views called by a single view.

I will skip reviewing the ChartExtensions.cs and HelperModel.cs classes since they are covered in the article above.

I created a controller with a few views:

public class WelcomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.Message = "Creating your own HtmlHelper library";
        var data = WelcomeHelper.GetData1();
        return View(data);
    }

    public ActionResult DisplayAllGraphs()
    {
        ViewBag.Message = "Show all charts";
        var dataSet = new DataGroup();
        dataSet.Datas.Add(WelcomeHelper.GetData1());
        dataSet.Datas.Add(WelcomeHelper.GetData2());
        return View(dataSet);
    }

    public ActionResult PartialDisplayGraphs(TwoDimensionalData data)
    {
        ViewBag.Message = "Chart by request";
        return View(data);
    }
}

I populate it with a quick helper class

public class WelcomeHelper
{
    public static TwoDimensionalData GetData1()
    {
        var data = new TwoDimensionalData();
        data.Data.Add(new int[] { 2000, 3045 });
        data.Data.Add(new int[] { 2001, 7045 });
        data.Data.Add(new int[] { 2002, 9045 });
        data.Data.Add(new int[] { 2003, 13045 });
        data.Data.Add(new int[] { 2004, 15045 });
        data.Id = 1;
        return data;
    }

    public static TwoDimensionalData GetData2()
    {
        var data = new TwoDimensionalData();
        data.Data.Add(new int[] { 2005, 18045 });
        data.Data.Add(new int[] { 2006, 20845 });
        data.Data.Add(new int[] { 2007, 23045 });
        data.Data.Add(new int[] { 2008, 20345 });
        data.Data.Add(new int[] { 2009, 23405 });
        data.Id = 2;
        return data;
    }
}

I attempt to display all the graphs with DisplayAllGraphs.cshtml

@model PostingGraphs.Models.DataGroup
@{
    ViewBag.Title = "DisplayAllGraphs";
}

<h2>@ViewBag.Message</h2>
<section>
    @Html.Partial("PartialDisplayGraphs", data)
</section>

and the PartialDisplayGraphs.cshtml called for partial view is

@model PostingGraphs.Models.TwoDimensionalData
@using PostingGraphs.Extensions
@using (Html.BeginForm())
{   
    <label>Model ID: @Model.Id</label>
    @Html.Chart("sampleChart" + Model.Id, Model.Data, "Year", "Hits in Thousands") 
}

@section Scripts
{
<script type="text/javascript">
    $(function () {
        barChart();
    });   
</script>
}

What I get is a series of <section>s with the label Model ID: # where the # coincides correctly with the ID of the data being sent as the model. That I do not get is a chart, although the section is spaced as expected.

Am I missing something? Is this a problem with identifiers within the code for the chart extensions creating the javascript?

EDIT: Added unique identifier for canvas ID to include index of data points. Changed form within form issue.

What is the data variable inside @Html.Partial("PartialDisplayGraphs", data) ? Also you are creating form inside form which is not a valid html. — emre nevayeshirazi, Sep 18 '13 at 00:09
@emrenevayeshirazi The data variable is a TwoDimensionalData type variable that I get populated from the helper class. The view displays a label of the ID associated with the chart. Good point about the form within form... Should have seen that myself. I will update that tomorrow morning. — Greg Mason, Sep 18 '13 at 04:52
@emrenevayeshirazi I have updated the for within form issue, still no idea why this is not working. — Greg Mason, Sep 18 '13 at 15:49
@patxy It is included in the DNC article. Done in the Chart Helper Extension itself, server side. The `@Html.Chart` call generates it. The script will be within each partial view `PartialDisplayGraphs.cshtml`. — Greg Mason, Sep 18 '13 at 16:12
When you use a javascript debugger, does yous code go through the function "barChart()"? Maybe you should check the rendered html client-side. I think that there's something wring with your javascript code — Deblaton Jean-Philippe, Sep 18 '13 at 16:32
@patxy The more I look at it the more I think you are right and the article has a miss or two, I will reapply myself to fixing this... right now I think you are right and I should have a serious look at the way they are creating the javascript. — Greg Mason, Sep 18 '13 at 22:21

score 0 · Accepted Answer · answered Sep 21 '13 at 00:25

The problem is that the Dot Net Curry example code just isn't set up for managing multiple charts on the same page very well and does require some substantial rework. It isn't difficult, just not a very good solution on its own. I did find a fairly decent FREE charting set at http://www.chartjs.org/ that will do fine. Thank you to those of you who have taken the time to look into this for me and have given me feedback.

Rendering HTML5 Charts in partial views show only blank data

1 Answers1

Linked