Charts etc. in ASP.NET MVC?

[Erik Underbjerg]

Hi,

I'm building an ASP.NET MVC application, and would like find an easy way to generate and show charts.

Is it possible to use Teleriks library of charts, e.g. RadControls, in an MVC application, and if so, how?

//Erik

[Atanas Korchev]

Hello Erik Underbjerg,

Using RadChart for ASP.NET Ajax in MVC is possible. You can check our online demo here. The source can be downloaded from here.

Regards,
Albert
The Telerik team

[Erik Underbjerg]

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;">
    <!-- 2009.2.701.35 --><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&amp;ChartID=458f76e1-946b-4c54-94ac-22645460464d_chart_ctl00$MainContent$RadPanelBar1$i0$i0$postsByTechnologyChart&amp;imageFormat=Png&amp;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>

[Erik Underbjerg]

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.

[Erik Underbjerg]

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!

[Denis]

Had the same problem, trying to place a radchart on an MVC page.

stumbled on this thread and it fixed my problem.
great find.

[Todd Anglin]

I know this thread is a bit old, but as an update, native HTML5-based charting is coming to Telerik's MVC Extensions in the Q2 2011 release. You can see an early preview in the live Beta demos here:

http://demos.telerik.com/aspnet-mvc-beta/chart

When the charts ship, you will have SVG/VML based output (depending on the browser) that can be directly bound to JSON data. We hope you enjoy this new, powerful way to do data viz in MVC.

-Todd

[Washington]

Todd,

You mention native HTML5 charting  however in the link you provided I dont see an  explicit mention it. I ask because my company is in need of HTML5 charts controls, and I had great experience with your products, however before I mention to them that  Telerik has/will have HTML5 I would like more clarification as to what is going to be offered. 

thank you

[Todd Anglin]

@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.