This is a migrated thread and some comments may be shown as answers.

Charts etc. in ASP.NET MVC?

8 Answers 396 Views

Chart (Obsolete)

This is a migrated thread and some comments may be shown as answers.

8 Answers, 1 is accepted

answered on 14 Aug 2009, 12:04 PM

The demo you refer to seems to be built on an earlier version of the MVC extensions, and I'm having trouble getting it to work.

When I hit the page that was supposed to display a chart, I'm greeted with a "Error loading RadChart image" dialog box, and a question about whether I want to display the stack trace. No stacktrace is displayed when I click "OK" though, and neither is any further indication of what is wrong.

I have tried both with the DLL's included in the demo (which are older than the latest), and the new DLL's from the MVC and RadControls.

Any idea?

(UPDATE)
The page output includes the following html, but the image of the chart does not display:

<div id="ctl00_MainContent_RadPanelBar1" class="RadPanelBar RadPanelBar_Default " style="width:500px;">
   <ul class="rpRootGroup">
       <li class="rpItem rpFirst"><a href="#" class="rpLink rpExpandable rpExpanded"><span class="rpOut"><span class="rpText">Posts by technology</span></span></a><div class="rpSlide" style="display:block;">
           <ul class="rpGroup rpLevel1 " style="display:block;">
               <li class="rpItem rpFirst rpLast"><div class="rpTemplate">

                           <div id="ctl00_MainContent_RadPanelBar1_i0_i0_postsByTechnologyChart" class=" RadChart" style="height:300px;width:400px;">
                       <img alt='' style='border-width: 0px;' usemap='#imctl00_MainContent_RadPanelBar1_i0_i0_postsByTechnologyChart' src='ChartImage.axd?UseSession=true&ChartID=458f76e1-946b-4c54-94ac-22645460464d_chart_ctl00$MainContent$RadPanelBar1$i0$i0$postsByTechnologyChart&imageFormat=Png&random=0,287413598637755' onerror="if(confirm('Error loading RadChart image.\nYou may also wish to check the ASP.NET Trace for further details.\nDisplay stack trace?'))window.location.href=this.src;" /><input id="ctl00_MainContent_RadPanelBar1_i0_i0_postsByTechnologyChart_ClientState" name="ctl00_MainContent_RadPanelBar1_i0_i0_postsByTechnologyChart_ClientState" type="hidden" />
                   </div>

               </div></li>
           </ul>
       </div></li><li class="rpItem rpLast"><a href="#" class="rpLink rpExpandable rpExpanded"><span class="rpOut"><span class="rpText">General Stats</span></span></a><div class="rpSlide" style="display:block;">
           <ul class="rpGroup rpLevel1 " style="display:block;">
               <li class="rpItem rpFirst rpLast"><div class="rpTemplate">

                           <div id="stats-listing">
                               <ul>
                                   <li>12 users</li>
                                   <li>23 threads</li>
                                   <li>34 posts</li>
                               </ul>
                           </div>

               </div></li>
           </ul>
       </div></li>
   </ul><input id="ctl00_MainContent_RadPanelBar1_ClientState" name="ctl00_MainContent_RadPanelBar1_ClientState" type="hidden" />
</div>

answered on 14 Aug 2009, 02:22 PM

The problem seems to be that the URL for the ChartImage.axd image generator is incorrectly generated.

If I am on a URL as the following:
/People/History/1
...and I try to render a RadPanel such as the following (from History.aspx):

    <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="500px">
       <Items>
           <telerik:RadPanelItem Text="Posts by technology" Expanded="true">
               <Items>
                   <telerik:RadPanelItem>
                       <ItemTemplate>
                           <telerik:RadChart runat="server" ID="postsByTechnologyChart" AutoLayout="true" Skin="Forest">
                               <ChartTitle>
                                   <TextBlock Text="Posts per technology" />
                               </ChartTitle>
                               <Series>
                                   <telerik:ChartSeries Type="Pie" Appearance-LegendDisplayMode="ItemLabels" DefaultLabelValue="#%"/>
                               </Series>
                           </telerik:RadChart>
                       </ItemTemplate>
                   </telerik:RadPanelItem>
               </Items>
           </telerik:RadPanelItem>
        </Items>
       <ExpandAnimation Type="None" Duration="100"></ExpandAnimation>
   </telerik:RadPanelBar>

Telerik wil try to fetch the image from the following URL:

/People/History/ChartImage.axd?[lots of params]

...but this doesn't work! Manually altering the URL to this:

/ChartImage.axd?[lots of params]

...does the trick, and an image is rendered.

So... it seems what when the RadPanel is used on an ASP.NET MVC view, the path to the CharImage only strips the last part of the current URL (from /People/History/1), which is not enough.

Is this a bug, or is the forum demo application just too simplistic? Please advice.

answered on 14 Aug 2009, 02:36 PM

It turns out that the demo application was too simplistic. What was needed was additions to the ASP.NET MVC route table (Global.asax), so that it would forward requests for URL's like "/People/History/ChartImage.axd?[lots of params]" to the chart handler.

What solved the problem for me, was to add two additional IgnoreRoute to Global.asax in my application:

        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.IgnoreRoute("{controller}/{resource}.axd/{*pathInfo}"); // This is new
            routes.IgnoreRoute("{controller}/{action}/{resource}.axd/{*pathInfo}"); // This is new

            routes.MapRoute(
                "Default",                                              // Route name
                "{controller}/{action}/{id}",                           // URL with parameters
                new { controller = "Home", action = "Index", id = "" } // Parameter defaults
            );
        }

I suggest you guys add this to your knowledge base, and include these additional routes in the demo application, so that future interested users do not have to figure this out for themselves!

answered on 04 Aug 2011, 07:33 PM

@Washington-

Take a look at this updated link: http://demos.telerik.com/aspnet-mvc/chart
(More product info is also available here: http://www.telerik.com/products/aspnet-mvc/chart.aspx)

The new charts in the Telerik Extensions for ASP.NET MVC are powered by HTML5 technologies, allowing the data visualization to be quickly rendered in the browser. No need to generate images on the server and ship them to the browser. No need for plug-ins.

Under the hood, the charts use both SVG and VML for rendering, depending on the browser. This maximizes compatibility with new and old browsers.

Today we offer the Bar and Line chart types. In future releases, we will continue expand this, likely adding Pie charts next, followed by chart types that have the most demand. I hope this helps explain what Telerik is doing for HTML5 charts. Let me know if you have any questions.