Chart not displaying in screen after data is loaded

2 posts, 0 answers
  1. Bob
    Bob avatar
    4 posts
    Member since:
    Jul 2011

    Posted 26 Mar 2014 Link to this post

    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;">
                    <td class="chart-wrapper">
                        .Legend(legend => legend
                        .ChartArea(chartArea => chartArea
                        .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
                            .Labels(labels => labels.Format("c"))
                            .Line(line => line.Visible(false))
                            .MajorGridLines(lines => lines.Visible(true))
                        .Tooltip(tooltip => tooltip

    inspecting the element in the browser

    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}});});
  2. Bob
    Bob avatar
    4 posts
    Member since:
    Jul 2011

    Posted 26 Mar 2014 in reply to Bob Link to this post

    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.
  3. UI for ASP.NET AJAX banner
Back to Top