Chart not displaying in screen after data is loaded

[Bob]

I'm passing an IEnumerable collection into a foreach loop to create multiple series in a chart. I can verify that the foreach loop is indeed populating and creating the individual series. Though when the screen renders the space is there and I can inspect the element but it doesn't display on the screen. 

<table style="height: 400px; width:900px;">
            <tr>
                <td class="chart-wrapper">
                    @(Html.Kendo().Chart(Model)
                    .Name("LocationsChart")
                    .Title("Locations")
                    .Legend(legend => legend
                        .Visible(true)
                    )
                    .ChartArea(chartArea => chartArea
                        .Background("transparent")
                        .Width(900)
                        .Height(400)
                    )
                    .Series(series =>
                    {
                        foreach (var item in Model)
                        {
                            series.Column(new decimal[] { item.FuelSales, item.FuelSalesLyr, item.FuelSalesLy2 }).Name(item.LocUsageDesc);
                        }
                    })
                    .CategoryAxis(axis => axis
                        .Categories(new string[] {"Sales Yr to Date", "Sales Last Yr", "Sales 2yr"} )
                        .MajorGridLines(lines => lines.Visible(false))
                    )
                    .ValueAxis(axis => axis
                        .Numeric()
                        .Labels(labels => labels.Format("c"))
                        .Line(line => line.Visible(false))
                        .MajorGridLines(lines => lines.Visible(true))
                    )
                    .Tooltip(tooltip => tooltip
                        .Visible(true)
                        .Format("{0:C}")
                        .Background("grey"))
                    )
                </td>
            </tr>
        </table>


inspecting the element in the browser

jQuery(function(){jQuery("#LocationsChart").kendoChart({"chartArea":{"background":"transparent","height":400,"width":900},"title":{"text":"Locations"},"legend":{"visible":true},"series":[{"name":"Home","type":"column","data":[368.59,1532.70,622.57]},{"name":"Shop","type":"column","data":[485.46,1824.32,856.80]},{"name":"Cdry","type":"column","data":[287.98,100.00,0]},{"name":"Cndo","type":"column","data":[363.69,872.09,0]},{"name":"Home","type":"column","data":[199.59,389.70,0]}],"categoryAxis":[{"majorGridLines":{"visible":false},"categories":["Sales Yr to Date","Sales Last Yr","Sales 2yr"]}],"valueAxis":[{"labels":{"format":"c"},"majorGridLines":{"visible":true},"line":{"visible":false}}],"tooltip":{"background":"grey","format":"{0:C}","visible":true}});});

[Bob]

I figured this out.. I had a grid and a chart in the same body of a webpage and the two referenced javascript filed were fighting with each other. Commented them both out and put in a different location and Chart displayed.