Share via

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.

Comments

  • Anonymous
    March 16, 2013
    I have been going through the customization code above and it work well, just wondering if there is a setting for the intervals between displaying labels. I have a chart with 15 labels its only displaying every 5th label. I have looked through the tutorials on the ASP site but they don't seem to go to that level of customisation, I am using WebMatrix ver 2.

  • Anonymous
    March 18, 2013
    Hi DMAC, I would first try to make the chart larger to determine what effect that single change makes with respect to labels. If this doesn't lead you to the correct answer, I would check with the WebPages forums. Sorry I can't be more helpful.