Fun with Umbraco : Using the webpages chart helper

There’s a whole lot of power included in Umbraco out of the box. Here’s a quick demo of how to create a Chart just with a few lines of code. I’m using the “Chart helper”. The charting component is in the .net core and the helper is in System.Web.Helpers.dll which is now included in Umbraco (4.7 beta):

In Umbraco I’m just creating a new template, called “chart”. A template in Umbraco is most often used by documents, but it is also possible to render a template without a document just by navigating to the template name, which is what I’m doing in my demo, ie

Full code (template “chart”):

<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>

<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
 <umbraco:macro runat="server" language="razor"> 
  var myChart = new Chart(width: 600, height: 400).AddTitle("Chart Title")
  .AddSeries(name: "Employee", xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },yValues: new[] { "2", "6", "4", "5", "3" })


If I liked to include the chart in another page I could do so with this simple img tag:

<img src="/chart"/>

More information about the powerful Chart helper and it’s syntax.

I strongly recommend this free PDF book from Microsoft about Razor and WebPages. Know that most (all?) helpers can be used straight away in Umbraco.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s