WebMatrix - Creating 3D Charts

  • Article

This post provides details and code about creating 3D charts in WebMatrix (Beta).

A quick method for creating 3D charts using ASP.NET Web Pages is to use the built in theme named Vanilla3D. However, if you need to create a custom 3D chart, you can add an Area3DStyle node to a template and set a few values (shown below). This post is based on the WebMatrix Chapter 7 - Displaying Data in a Chart. It may be helpful to complete the steps in Chapter 7 or download the related WebMatrix samples.

  1. At the root of your web site, create a new XML file named OrangeBlue3DTemplate.xml.

  2. Replace the default XML in the file with the following:
    Code Snippet

    1. <Chart Palette="BrightPastel"
    2.      BackColor="#D3DFF0"
    3.      BackGradientStyle="TopBottom"
    4.      BackSecondaryColor="White"
    5.      BorderColor="26, 59, 105"
    6.      BorderWidth="2"
    7.      BorderlineDashStyle="Solid">
    8. <Series>
    9.   <series _Template_="All"
    10.           BorderColor="180, 26, 59, 105"
    11.           CustomProperties="LabelStyle=Bottom"
    12.           IsValueShownAsLabel="False">
    13.   </series>
    14. </Series>
    15. <ChartAreas>
    16.   <ChartArea _Template_="All"
    17.              BackColor="Orange"
    18.              BackGradientStyle="TopBottom"
    19.              BackSecondaryColor="White"
    20.              ShadowColor="Transparent"
    21.              BorderColor="64, 64, 64, 64"
    22.              BorderDashStyle="Solid">
    23.     <Area3DStyle Enable3D="True"
    24.                  Inclination="5">
    25.     </Area3DStyle>
    26.     <AxisX ArrowStyle="Triangle"
    27.            IsLabelAutoFit="False"
    28.            LineColor="64, 64, 64, 64">
    29.       <MajorGrid LineColor="64, 64, 64, 64" />
    30.       <LabelStyle Font="Trebuchet MS, 10pt, style=Bold"
    31.                   IsStaggered="True" />
    32.     </AxisX>
    33.   </ChartArea>
    34. </ChartAreas>
    35. <Titles>
    36.   <Title _Template_="All"
    37.          Font="Trebuchet MS, 14.25pt, style=Bold"
    38.          ForeColor="26, 59, 105"
    39.          ShadowOffset="3"
    40.          ShadowColor="32, 0, 0, 0">
    41.   </Title>
    42. </Titles>
    43. <BorderSkin SkinStyle="Emboss" />
    44. </Chart>

    Notice that the new XML includes the 3D style:
    Code Snippet

    1.  <Area3DStyle Enable3D="True"
    2.              Inclination="5">
    3. </Area3DStyle>

  3. At the root of your website, create a new file named ChartWith3DTemplate.cshtml.

  4. 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: "OrangeBlue3DTemplate.xml")
    5.        .AddTitle("Chart Title")
    6.        .AddSeries(
    7.            name: "Employee",
    8.            xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" },
    9.            yValues: new[] { "2", "6", "4", "5", "3" })
    10.        .Write();
    11. }

  5. Run the ChartWith3DTemplate.cshtml page in a browser.  

    image

 

For more information about 3D charts, see 3D Charts (Chart Controls) and the ChartArea3DStyle Class on MSDN. These two links will provide the information you need to completely customize your 3D charts in WebMatrix.

 

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