ChartDirector 5.1 (.NET Edition)

Multi-Color Bar Chart




This example demonstrates creating a multi-color bar chart, in which each bar has a different color. It also demonstrates metallic background colors and various 3D border effects.

A multi-color bar layer is a bar layer in which each bar has a different color. It is created using XYChart.addBarLayer3. The colors can be specified explicitly (as is in this example), or can be taken automatically from the color palette.

Source Code Listing

[ASP.NET - VB Version] NetWebCharts\VBNetASP\colorbar.aspx
(Click here on how to convert this code to Visual Studio code-behind style.)
<%@ Page Language="VB" Debug="true" %>
<%@ Import Namespace="ChartDirector" %>
<%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %>
<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 data() As Double = {85, 156, 179.5, 211, 123}

    ' The labels for the bar chart
    Dim labels() As String = {"Mon", "Tue", "Wed", "Thu", "Fri"}

    ' The colors for the bar chart
    Dim colors() As Integer = {&Hb8bc9c, &Ha0bdc4, &H999966, &H333366, &Hc3c3e6}

    ' Create a XYChart object of size 300 x 220 pixels. Use golden background color.
    ' Use a 2 pixel 3D border.
    Dim c As XYChart = New XYChart(300, 220, Chart.goldColor(), -1, 2)

    ' Add a title box using 10 point Arial Bold font. Set the background color to
    ' metallic blue (9999FF) Use a 1 pixel 3D border.
    c.addTitle("Daily Network Load", "Arial Bold", 10).setBackground( _
        Chart.metalColor(&H9999ff), -1, 1)

    ' Set the plotarea at (40, 40) and of 240 x 150 pixels in size
    c.setPlotArea(40, 40, 240, 150)

    ' Add a multi-color bar chart layer using the given data and colors. Use a 1
    ' pixel 3D border for the bars.
    c.addBarLayer3(data, colors).setBorderColor(-1, 1)

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

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

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

End Sub

</script>
<html>
<body>
    <chart:WebChartViewer id="WebChartViewer1" runat="server" />
</body>
</html>

[ASP.NET - C# Version] NetWebCharts\CSharpASP\colorbar.aspx
(Click here on how to convert this code to Visual Studio code-behind style.)
<%@ Page Language="C#" Debug="true" %>
<%@ Import Namespace="ChartDirector" %>
<%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %>
<script runat="server">

//
// Page Load event handler
//
protected void Page_Load(object sender, EventArgs e)
{
    // The data for the bar chart
    double[] data = {85, 156, 179.5, 211, 123};

    // The labels for the bar chart
    string[] labels = {"Mon", "Tue", "Wed", "Thu", "Fri"};

    // The colors for the bar chart
    int[] colors = {0xb8bc9c, 0xa0bdc4, 0x999966, 0x333366, 0xc3c3e6};

    // Create a XYChart object of size 300 x 220 pixels. Use golden background color.
    // Use a 2 pixel 3D border.
    XYChart c = new XYChart(300, 220, Chart.goldColor(), -1, 2);

    // Add a title box using 10 point Arial Bold font. Set the background color to
    // metallic blue (9999FF) Use a 1 pixel 3D border.
    c.addTitle("Daily Network Load", "Arial Bold", 10).setBackground(
        Chart.metalColor(0x9999ff), -1, 1);

    // Set the plotarea at (40, 40) and of 240 x 150 pixels in size
    c.setPlotArea(40, 40, 240, 150);

    // Add a multi-color bar chart layer using the given data and colors. Use a 1
    // pixel 3D border for the bars.
    c.addBarLayer3(data, colors).setBorderColor(-1, 1);

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

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

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

</script>
<html>
<body>
    <chart:WebChartViewer id="WebChartViewer1" runat="server" />
</body>
</html>

[Windows Forms - VB Version] NetWinCharts\VBNetWinCharts\colorbar.vb
Imports System
Imports Microsoft.VisualBasic
Imports ChartDirector

Public Class colorbar
    Implements DemoModule

    'Name of demo module
    Public Function getName() As String Implements DemoModule.getName
        Return "Multi-Color 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 img is unused because this demo only has 1 chart.
    Public Sub createChart(viewer As WinChartViewer, img As String) _
        Implements DemoModule.createChart

        ' The data for the bar chart
        Dim data() As Double = {85, 156, 179.5, 211, 123}

        ' The labels for the bar chart
        Dim labels() As String = {"Mon", "Tue", "Wed", "Thu", "Fri"}

        ' The colors for the bar chart
        Dim colors() As Integer = {&Hb8bc9c, &Ha0bdc4, &H999966, &H333366, &Hc3c3e6}

        ' Create a XYChart object of size 300 x 220 pixels. Use golden background
        ' color. Use a 2 pixel 3D border.
        Dim c As XYChart = New XYChart(300, 220, Chart.goldColor(), -1, 2)

        ' Add a title box using 10 point Arial Bold font. Set the background color to
        ' metallic blue (9999FF) Use a 1 pixel 3D border.
        c.addTitle("Daily Network Load", "Arial Bold", 10).setBackground( _
            Chart.metalColor(&H9999ff), -1, 1)

        ' Set the plotarea at (40, 40) and of 240 x 150 pixels in size
        c.setPlotArea(40, 40, 240, 150)

        ' Add a multi-color bar chart layer using the given data and colors. Use a 1
        ' pixel 3D border for the bars.
        c.addBarLayer3(data, colors).setBorderColor(-1, 1)

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

        ' Output the chart
        viewer.Chart = c

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

    End Sub

End Class

[Windows Forms - C# Version] NetWinCharts\CSharpWinCharts\colorbar.cs
using System;
using ChartDirector;

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

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

        //Main code for creating chart.
        //Note: the argument img is unused because this demo only has 1 chart.
        public void createChart(WinChartViewer viewer, string img)
        {
            // The data for the bar chart
            double[] data = {85, 156, 179.5, 211, 123};

            // The labels for the bar chart
            string[] labels = {"Mon", "Tue", "Wed", "Thu", "Fri"};

            // The colors for the bar chart
            int[] colors = {0xb8bc9c, 0xa0bdc4, 0x999966, 0x333366, 0xc3c3e6};

            // Create a XYChart object of size 300 x 220 pixels. Use golden
            // background color. Use a 2 pixel 3D border.
            XYChart c = new XYChart(300, 220, Chart.goldColor(), -1, 2);

            // Add a title box using 10 point Arial Bold font. Set the background
            // color to metallic blue (9999FF) Use a 1 pixel 3D border.
            c.addTitle("Daily Network Load", "Arial Bold", 10).setBackground(
                Chart.metalColor(0x9999ff), -1, 1);

            // Set the plotarea at (40, 40) and of 240 x 150 pixels in size
            c.setPlotArea(40, 40, 240, 150);

            // Add a multi-color bar chart layer using the given data and colors. Use
            // a 1 pixel 3D border for the bars.
            c.addBarLayer3(data, colors).setBorderColor(-1, 1);

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

            // Output the chart
            viewer.Chart = c;

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