WebMatrix – Creating a Custom Chart Template

  • Article

This post shows you how to create a custom chart template based on an existing theme in WebMatrix Beta 2.

The ChartTheme class includes built-in themes. You can create a page to display the XML contained in a built-in theme, and then create a custom template file based on that theme.

  1. Create a new file named ThemeSourceViewer.cshtml.

  2. Replace the default markup in the page with the following:

    Code Snippet

    1. <!DOCTYPE html>
    2. <html>
    3.    <head>
    4.        <title></title>
    5.    </head>
    6.    <body>
    7.    @ChartTheme.Vanilla3D
    8.    </body>
    9. </html>

    The above code displays the XML contained in the Vanilla3D property of the ChartTheme class.

  3. Run the page in a browser.

  4. In the browser window, select the displayed XML and copy it. This XML represents the Vanilla3D theme property of the ChartTheme class. It will appear as a continuous line of text in the browser, rather than text with indentation as shown below.

    Code Snippet

    1. <Chart BackColor="#555"
    2.       BackGradientStyle="TopBottom"
    3.       BorderColor="181, 64, 1"
    4.       BorderWidth="2"
    5.       BorderlineDashStyle="Solid"
    6.       Palette="SemiTransparent"
    7.       AntiAliasing="All">
    8.    <ChartAreas>
    9.        <ChartArea Name="Default"
    10.                  _Template_="All"
    11.                  BackColor="Transparent"
    12.                  BackSecondaryColor="White"
    13.                  BorderColor="64, 64, 64, 64"
    14.                  BorderDashStyle="Solid"
    15.                  ShadowColor="Transparent">
    16.            <Area3DStyle LightStyle="Simplistic"
    17.                         Enable3D="True"
    18.                         Inclination="30"
    19.                         IsClustered="False"
    20.                         IsRightAngleAxes="False"
    21.                         Perspective="10"
    22.                         Rotation="-30"
    23.                         WallWidth="0" />
    24.        </ChartArea>
    25.    </ChartAreas>
    26. </Chart>

  5. Create a new XML file at the root of your web site named CustomTemplate.xml .

  6. Replace the default markup in the file with the copy from the XML displayed in the browser (or from the code above).

  7. Set the BackColor of the Chart node to “Blue”.

  8. Set the Enable3D value in the new XML to "False".

  9. Save the CustomTemplate.xml file.

  10. At the root of your website, create a new file named ChartWithCustomTemplate.cshtml.

  11. Replace the default markup in the page with the following:

    Code Snippet

    1. @{
    2.    var key = new Chart(width: 600,
    3.                        height: 400,
    4.                        templatePath: "CustomTemplate.xml")
    5.        .AddTitle("Chart Title")
    6.        .AddSeries(
    7.            name: "Employee",
    8.            chartType: "Column",
    9.            xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" },
    10.            yValues: new[] { "2", "6", "4", "5", "3" })
    11.        .Write();
    12. }

  12. Run the ChartWithCustomTemplate.cshtml page in a browser. 

    image

    -- Erik Reitan
    Web Platform and Tools Developer Content
    This posting is provided "AS IS" with no warranties, and confers no rights.