Multi-Shape Bar Chart

[Windows Forms - C# version] NetWinCharts\CSharpWinCharts\multishapebar.cs

using System;
using ChartDirector;

namespace CSharpChartExplorer
{
    public class multishapebar : DemoModule
    {
        //Name of demo module
        public string getName() { return "Multi-Shape Bar Chart"; }

        //Number of charts produced in this demo module
        public int getNoOfCharts() { return 1; }

        //Main code for creating chart.
        //Note: the argument chartIndex is unused because this demo only has 1 chart.
        public void createChart(WinChartViewer viewer, int chartIndex)
        {
            // The data for the bar chart
            double[] data0 = {100, 125, 245, 147};
            double[] data1 = {85, 156, 179, 211};
            double[] data2 = {97, 87, 56, 267};
            string[] labels = {"1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter"};

            // Create a XYChart object of size 600 x 350 pixels
            XYChart c = new XYChart(600, 350);

            // Add a title to the chart using 14pt Arial Bold Italic font
            c.addTitle("Annual Product Revenue", "Arial Bold Italic", 14);

            // Set the plot area at (50, 60) and of size 500 x 240. Use two alternative background
            // colors (f8f8f8 and ffffff)
            c.setPlotArea(50, 60, 500, 240, 0xf8f8f8, 0xffffff);

            // Add a legend box at (55, 22) using horizontal layout, with transparent background
            c.addLegend(55, 22, false).setBackground(Chart.Transparent);

            // Set the x axis labels
            c.xAxis().setLabels(labels);

            // Draw the ticks between label positions (instead of at label positions)
            c.xAxis().setTickOffset(0.5);

            // Add a multi-bar layer with 3 data sets and 9 pixels 3D depth
            BarLayer layer = c.addBarLayer2(Chart.Side, 9);
            layer.addDataSet(data0, -1, "Product A");
            layer.addDataSet(data1, -1, "Product B");
            layer.addDataSet(data2, -1, "Product C");

            // Set data set 1 to use a bar shape of a 6-pointed star
            layer.setBarShape(Chart.StarShape(6), 0);

            // Set data set 2 to use a bar shapre of a 6-sided polygon
            layer.setBarShape(Chart.PolygonShape(6), 1);

            // Set data set 3 to use an X bar shape
            layer.setBarShape(Chart.Cross2Shape(), 2);

            // Add a title to the y-axis
            c.yAxis().setTitle("Revenue (USD in millions)");

            // Add a title to the x axis
            c.xAxis().setTitle("Year 2005");

            // Output the chart
            viewer.Chart = c;

            //include tool tip for the chart
            viewer.ImageMap = c.getHTMLImageMap("clickable", "",
                "title='{dataSetName}: {xLabel} Revenue = {value} millions'");
        }
    }
}

[Windows Forms - VB Version] NetWinCharts\VBNetWinCharts\multishapebar.vb

Imports System
Imports Microsoft.VisualBasic
Imports ChartDirector

Public Class multishapebar
    Implements DemoModule

    'Name of demo module
    Public Function getName() As String Implements DemoModule.getName
        Return "Multi-Shape Bar Chart"
    End Function

    'Number of charts produced in this demo module
    Public Function getNoOfCharts() As Integer Implements DemoModule.getNoOfCharts
        Return 1
    End Function

    'Main code for creating chart.
    'Note: the argument chartIndex is unused because this demo only has 1 chart.
    Public Sub createChart(viewer As WinChartViewer, chartIndex As Integer) _
        Implements DemoModule.createChart

        ' The data for the bar chart
        Dim data0() As Double = {100, 125, 245, 147}
        Dim data1() As Double = {85, 156, 179, 211}
        Dim data2() As Double = {97, 87, 56, 267}
        Dim labels() As String = {"1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter"}

        ' Create a XYChart object of size 600 x 350 pixels
        Dim c As XYChart = New XYChart(600, 350)

        ' Add a title to the chart using 14pt Arial Bold Italic font
        c.addTitle("Annual Product Revenue", "Arial Bold Italic", 14)

        ' Set the plot area at (50, 60) and of size 500 x 240. Use two alternative background colors
        ' (f8f8f8 and ffffff)
        c.setPlotArea(50, 60, 500, 240, &Hf8f8f8, &Hffffff)

        ' Add a legend box at (55, 22) using horizontal layout, with transparent background
        c.addLegend(55, 22, False).setBackground(Chart.Transparent)

        ' Set the x axis labels
        c.xAxis().setLabels(labels)

        ' Draw the ticks between label positions (instead of at label positions)
        c.xAxis().setTickOffset(0.5)

        ' Add a multi-bar layer with 3 data sets and 9 pixels 3D depth
        Dim layer As BarLayer = c.addBarLayer2(Chart.Side, 9)
        layer.addDataSet(data0, -1, "Product A")
        layer.addDataSet(data1, -1, "Product B")
        layer.addDataSet(data2, -1, "Product C")

        ' Set data set 1 to use a bar shape of a 6-pointed star
        layer.setBarShape(Chart.StarShape(6), 0)

        ' Set data set 2 to use a bar shapre of a 6-sided polygon
        layer.setBarShape(Chart.PolygonShape(6), 1)

        ' Set data set 3 to use an X bar shape
        layer.setBarShape(Chart.Cross2Shape(), 2)

        ' Add a title to the y-axis
        c.yAxis().setTitle("Revenue (USD in millions)")

        ' Add a title to the x axis
        c.xAxis().setTitle("Year 2005")

        ' Output the chart
        viewer.Chart = c

        'include tool tip for the chart
        viewer.ImageMap = c.getHTMLImageMap("clickable", "", _
            "title='{dataSetName}: {xLabel} Revenue = {value} millions'")

    End Sub

End Class

[WPF - C#] NetWPFCharts\CSharpWPFCharts\multishapebar.cs

using System;
using ChartDirector;

namespace CSharpWPFCharts
{
    public class multishapebar : DemoModule
    {
        //Name of demo module
        public string getName() { return "Multi-Shape Bar Chart"; }

        //Number of charts produced in this demo module
        public int getNoOfCharts() { return 1; }

        //Main code for creating chart.
        //Note: the argument chartIndex is unused because this demo only has 1 chart.
        public void createChart(WPFChartViewer viewer, int chartIndex)
        {
            // The data for the bar chart
            double[] data0 = {100, 125, 245, 147};
            double[] data1 = {85, 156, 179, 211};
            double[] data2 = {97, 87, 56, 267};
            string[] labels = {"1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter"};

            // Create a XYChart object of size 600 x 350 pixels
            XYChart c = new XYChart(600, 350);

            // Add a title to the chart using 14pt Arial Bold Italic font
            c.addTitle("Annual Product Revenue", "Arial Bold Italic", 14);

            // Set the plot area at (50, 60) and of size 500 x 240. Use two alternative background
            // colors (f8f8f8 and ffffff)
            c.setPlotArea(50, 60, 500, 240, 0xf8f8f8, 0xffffff);

            // Add a legend box at (55, 22) using horizontal layout, with transparent background
            c.addLegend(55, 22, false).setBackground(Chart.Transparent);

            // Set the x axis labels
            c.xAxis().setLabels(labels);

            // Draw the ticks between label positions (instead of at label positions)
            c.xAxis().setTickOffset(0.5);

            // Add a multi-bar layer with 3 data sets and 9 pixels 3D depth
            BarLayer layer = c.addBarLayer2(Chart.Side, 9);
            layer.addDataSet(data0, -1, "Product A");
            layer.addDataSet(data1, -1, "Product B");
            layer.addDataSet(data2, -1, "Product C");

            // Set data set 1 to use a bar shape of a 6-pointed star
            layer.setBarShape(Chart.StarShape(6), 0);

            // Set data set 2 to use a bar shapre of a 6-sided polygon
            layer.setBarShape(Chart.PolygonShape(6), 1);

            // Set data set 3 to use an X bar shape
            layer.setBarShape(Chart.Cross2Shape(), 2);

            // Add a title to the y-axis
            c.yAxis().setTitle("Revenue (USD in millions)");

            // Add a title to the x axis
            c.xAxis().setTitle("Year 2005");

            // Output the chart
            viewer.Chart = c;

            //include tool tip for the chart
            viewer.ImageMap = c.getHTMLImageMap("clickable", "",
                "title='{dataSetName}: {xLabel} Revenue = {value} millions'");
        }
    }
}

[ASP.NET Web Forms - C# version] NetWebCharts\CSharpASP\multishapebar.aspx
(Click here on how to convert this code to code-behind style.)

<%@ Page Language="C#" Debug="true" %>
<%@ Import Namespace="ChartDirector" %>
<%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %>

<!DOCTYPE html>

<script runat="server">

//
// Page Load event handler
//
protected void Page_Load(object sender, EventArgs e)
{
    // The data for the bar chart
    double[] data0 = {100, 125, 245, 147};
    double[] data1 = {85, 156, 179, 211};
    double[] data2 = {97, 87, 56, 267};
    string[] labels = {"1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter"};

    // Create a XYChart object of size 600 x 350 pixels
    XYChart c = new XYChart(600, 350);

    // Add a title to the chart using 14pt Arial Bold Italic font
    c.addTitle("Annual Product Revenue", "Arial Bold Italic", 14);

    // Set the plot area at (50, 60) and of size 500 x 240. Use two alternative background colors
    // (f8f8f8 and ffffff)
    c.setPlotArea(50, 60, 500, 240, 0xf8f8f8, 0xffffff);

    // Add a legend box at (55, 22) using horizontal layout, with transparent background
    c.addLegend(55, 22, false).setBackground(Chart.Transparent);

    // Set the x axis labels
    c.xAxis().setLabels(labels);

    // Draw the ticks between label positions (instead of at label positions)
    c.xAxis().setTickOffset(0.5);

    // Add a multi-bar layer with 3 data sets and 9 pixels 3D depth
    BarLayer layer = c.addBarLayer2(Chart.Side, 9);
    layer.addDataSet(data0, -1, "Product A");
    layer.addDataSet(data1, -1, "Product B");
    layer.addDataSet(data2, -1, "Product C");

    // Set data set 1 to use a bar shape of a 6-pointed star
    layer.setBarShape(Chart.StarShape(6), 0);

    // Set data set 2 to use a bar shapre of a 6-sided polygon
    layer.setBarShape(Chart.PolygonShape(6), 1);

    // Set data set 3 to use an X bar shape
    layer.setBarShape(Chart.Cross2Shape(), 2);

    // Add a title to the y-axis
    c.yAxis().setTitle("Revenue (USD in millions)");

    // Add a title to the x axis
    c.xAxis().setTitle("Year 2005");

    // Output the chart
    WebChartViewer1.Image = c.makeWebImage(Chart.SVG);

    // Include tool tip for the chart
    WebChartViewer1.ImageMap = c.getHTMLImageMap("", "",
        "title='{dataSetName}: {xLabel} Revenue = {value} millions'");
}

</script>

<html>
<head>
    <script type="text/javascript" src="cdjcv.js"></script>
</head>
<body>
    <chart:WebChartViewer id="WebChartViewer1" runat="server" />
</body>
</html>

[ASP.NET Web Forms - VB Version] NetWebCharts\VBNetASP\multishapebar.aspx
(Click here on how to convert this code to code-behind style.)

<%@ Page Language="VB" Debug="true" %>
<%@ Import Namespace="ChartDirector" %>
<%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %>

<!DOCTYPE html>

<script runat="server">

'
' Page Load event handler
'
Protected Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)

    ' The data for the bar chart
    Dim data0() As Double = {100, 125, 245, 147}
    Dim data1() As Double = {85, 156, 179, 211}
    Dim data2() As Double = {97, 87, 56, 267}
    Dim labels() As String = {"1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter"}

    ' Create a XYChart object of size 600 x 350 pixels
    Dim c As XYChart = New XYChart(600, 350)

    ' Add a title to the chart using 14pt Arial Bold Italic font
    c.addTitle("Annual Product Revenue", "Arial Bold Italic", 14)

    ' Set the plot area at (50, 60) and of size 500 x 240. Use two alternative background colors
    ' (f8f8f8 and ffffff)
    c.setPlotArea(50, 60, 500, 240, &Hf8f8f8, &Hffffff)

    ' Add a legend box at (55, 22) using horizontal layout, with transparent background
    c.addLegend(55, 22, False).setBackground(Chart.Transparent)

    ' Set the x axis labels
    c.xAxis().setLabels(labels)

    ' Draw the ticks between label positions (instead of at label positions)
    c.xAxis().setTickOffset(0.5)

    ' Add a multi-bar layer with 3 data sets and 9 pixels 3D depth
    Dim layer As BarLayer = c.addBarLayer2(Chart.Side, 9)
    layer.addDataSet(data0, -1, "Product A")
    layer.addDataSet(data1, -1, "Product B")
    layer.addDataSet(data2, -1, "Product C")

    ' Set data set 1 to use a bar shape of a 6-pointed star
    layer.setBarShape(Chart.StarShape(6), 0)

    ' Set data set 2 to use a bar shapre of a 6-sided polygon
    layer.setBarShape(Chart.PolygonShape(6), 1)

    ' Set data set 3 to use an X bar shape
    layer.setBarShape(Chart.Cross2Shape(), 2)

    ' Add a title to the y-axis
    c.yAxis().setTitle("Revenue (USD in millions)")

    ' Add a title to the x axis
    c.xAxis().setTitle("Year 2005")

    ' Output the chart
    WebChartViewer1.Image = c.makeWebImage(Chart.SVG)

    ' Include tool tip for the chart
    WebChartViewer1.ImageMap = c.getHTMLImageMap("", "", _
        "title='{dataSetName}: {xLabel} Revenue = {value} millions'")

End Sub

</script>

<html>
<head>
    <script type="text/javascript" src="cdjcv.js"></script>
</head>
<body>
    <chart:WebChartViewer id="WebChartViewer1" runat="server" />
</body>
</html>

[ASP.NET MVC - Controller] NetMvcCharts\Controllers\MultishapebarController.cs

using System;
using System.Web.Mvc;
using ChartDirector;

namespace NetMvcCharts.Controllers
{
    public class MultishapebarController : Controller
    {
        //
        // Default Action
        //
        public ActionResult Index()
        {
            ViewBag.Title = "Multi-Shape Bar Chart";
            createChart(ViewBag.Viewer = new RazorChartViewer(HttpContext, "chart1"));
            return View("~/Views/Shared/ChartView.cshtml");
        }

        //
        // Create chart
        //
        private void createChart(RazorChartViewer viewer)
        {
            // The data for the bar chart
            double[] data0 = {100, 125, 245, 147};
            double[] data1 = {85, 156, 179, 211};
            double[] data2 = {97, 87, 56, 267};
            string[] labels = {"1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter"};

            // Create a XYChart object of size 600 x 350 pixels
            XYChart c = new XYChart(600, 350);

            // Add a title to the chart using 14pt Arial Bold Italic font
            c.addTitle("Annual Product Revenue", "Arial Bold Italic", 14);

            // Set the plot area at (50, 60) and of size 500 x 240. Use two alternative background colors
            // (f8f8f8 and ffffff)
            c.setPlotArea(50, 60, 500, 240, 0xf8f8f8, 0xffffff);

            // Add a legend box at (55, 22) using horizontal layout, with transparent background
            c.addLegend(55, 22, false).setBackground(Chart.Transparent);

            // Set the x axis labels
            c.xAxis().setLabels(labels);

            // Draw the ticks between label positions (instead of at label positions)
            c.xAxis().setTickOffset(0.5);

            // Add a multi-bar layer with 3 data sets and 9 pixels 3D depth
            BarLayer layer = c.addBarLayer2(Chart.Side, 9);
            layer.addDataSet(data0, -1, "Product A");
            layer.addDataSet(data1, -1, "Product B");
            layer.addDataSet(data2, -1, "Product C");

            // Set data set 1 to use a bar shape of a 6-pointed star
            layer.setBarShape(Chart.StarShape(6), 0);

            // Set data set 2 to use a bar shapre of a 6-sided polygon
            layer.setBarShape(Chart.PolygonShape(6), 1);

            // Set data set 3 to use an X bar shape
            layer.setBarShape(Chart.Cross2Shape(), 2);

            // Add a title to the y-axis
            c.yAxis().setTitle("Revenue (USD in millions)");

            // Add a title to the x axis
            c.xAxis().setTitle("Year 2005");

            // Output the chart
            viewer.Image = c.makeWebImage(Chart.SVG);

            // Include tool tip for the chart
            viewer.ImageMap = c.getHTMLImageMap("", "",
                "title='{dataSetName}: {xLabel} Revenue = {value} millions'");
        }
    }
}

[ASP.NET MVC - View] NetMvcCharts\Views\Shared\ChartView.cshtml

@{ Layout = null; }

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <style>
        @ViewBag.Style
    </style>
    @Scripts.Render("~/Scripts/cdjcv.js")
</head>
<body style="margin:5px 0px 0px 5px">
    <div style="font:bold 18pt verdana;">
        @ViewBag.Title
    </div>
    <hr style="border:solid 1px #000080; background:#000080" />
    <div>
        @{
            if (ViewBag.Viewer is Array)
            {
                // Display multiple charts
                for (int i = 0; i < ViewBag.Viewer.Length; ++i)
                {
                    @:@Html.Raw(ViewBag.Viewer[i].RenderHTML())
                }
            }
            else
            {
                // Display one chart only
                @:@Html.Raw(ViewBag.Viewer.RenderHTML())
            }
        }
    </div>
</body>
</html>