ChartDirector 5.1 (.NET Edition)

Multi-Pointer Horizontal Meter




This example demonstrates a horizontal linear meter with multiple pointers.

ChartDirector supports adding arbitrary number of pointers to a meter using BaseMeter.addPointer. The shape of each pointer is configurable by using MeterPointer.setShape or MeterPointer.setShape2.

Source Code Listing

[ASP.NET - VB Version] NetWebCharts\VBNetASP\multihmeter.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 values to display on the meter
    Dim value0 As Double = 30.99
    Dim value1 As Double = 45.35
    Dim value2 As Double = 77.64

    ' Create an LinearMeter object of size 250 x 75 pixels, using silver background
    ' with a 2 pixel black 3D depressed border.
    Dim m As LinearMeter = New LinearMeter(250, 75, Chart.silverColor(), 0, -2)

    ' Set the scale region top-left corner at (15, 25), with size of 220 x 20 pixels.
    ' The scale labels are located on the top (implies horizontal meter)
    m.setMeter(15, 25, 220, 20, Chart.Top)

    ' Set meter scale from 0 - 100, with a tick every 10 units
    m.setScale(0, 100, 10)

    ' Set 0 - 50 as green (99ff99) zone, 50 - 80 as yellow (ffff66) zone, and 80 -
    ' 100 as red (ffcccc) zone
    m.addZone(0, 50, &H99ff99)
    m.addZone(50, 80, &Hffff66)
    m.addZone(80, 100, &Hffcccc)

    ' Add deep red (000080), deep green (008000) and deep blue (800000) pointers to
    ' reflect the values
    m.addPointer(value0, &H000080)
    m.addPointer(value1, &H008000)
    m.addPointer(value2, &H800000)

    ' Add a label at bottom-left (10, 68) using Arial Bold/8 pts/red (c00000)
    m.addText(10, 68, "Temp C", "Arial Bold", 8, &Hc00000, Chart.BottomLeft)

    ' Add three text boxes to show the values in this meter
    m.addText(148, 70, m.formatValue(value0, "2"), "Arial", 8, &H6666ff, _
        Chart.BottomRight).setBackground(0, 0, -1)
    m.addText(193, 70, m.formatValue(value1, "2"), "Arial", 8, &H33ff33, _
        Chart.BottomRight).setBackground(0, 0, -1)
    m.addText(238, 70, m.formatValue(value2, "2"), "Arial", 8, &Hff3333, _
        Chart.BottomRight).setBackground(0, 0, -1)

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

End Sub

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

[ASP.NET - C# Version] NetWebCharts\CSharpASP\multihmeter.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 values to display on the meter
    double value0 = 30.99;
    double value1 = 45.35;
    double value2 = 77.64;

    // Create an LinearMeter object of size 250 x 75 pixels, using silver background
    // with a 2 pixel black 3D depressed border.
    LinearMeter m = new LinearMeter(250, 75, Chart.silverColor(), 0, -2);

    // Set the scale region top-left corner at (15, 25), with size of 220 x 20
    // pixels. The scale labels are located on the top (implies horizontal meter)
    m.setMeter(15, 25, 220, 20, Chart.Top);

    // Set meter scale from 0 - 100, with a tick every 10 units
    m.setScale(0, 100, 10);

    // Set 0 - 50 as green (99ff99) zone, 50 - 80 as yellow (ffff66) zone, and 80 -
    // 100 as red (ffcccc) zone
    m.addZone(0, 50, 0x99ff99);
    m.addZone(50, 80, 0xffff66);
    m.addZone(80, 100, 0xffcccc);

    // Add deep red (000080), deep green (008000) and deep blue (800000) pointers to
    // reflect the values
    m.addPointer(value0, 0x000080);
    m.addPointer(value1, 0x008000);
    m.addPointer(value2, 0x800000);

    // Add a label at bottom-left (10, 68) using Arial Bold/8 pts/red (c00000)
    m.addText(10, 68, "Temp C", "Arial Bold", 8, 0xc00000, Chart.BottomLeft);

    // Add three text boxes to show the values in this meter
    m.addText(148, 70, m.formatValue(value0, "2"), "Arial", 8, 0x6666ff,
        Chart.BottomRight).setBackground(0, 0, -1);
    m.addText(193, 70, m.formatValue(value1, "2"), "Arial", 8, 0x33ff33,
        Chart.BottomRight).setBackground(0, 0, -1);
    m.addText(238, 70, m.formatValue(value2, "2"), "Arial", 8, 0xff3333,
        Chart.BottomRight).setBackground(0, 0, -1);

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

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

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

Public Class multihmeter
    Implements DemoModule

    'Name of demo module
    Public Function getName() As String Implements DemoModule.getName
        Return "Multi-Pointer Horizontal Meter"
    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 values to display on the meter
        Dim value0 As Double = 30.99
        Dim value1 As Double = 45.35
        Dim value2 As Double = 77.64

        ' Create an LinearMeter object of size 250 x 75 pixels, using silver
        ' background with a 2 pixel black 3D depressed border.
        Dim m As LinearMeter = New LinearMeter(250, 75, Chart.silverColor(), 0, -2)

        ' Set the scale region top-left corner at (15, 25), with size of 220 x 20
        ' pixels. The scale labels are located on the top (implies horizontal meter)
        m.setMeter(15, 25, 220, 20, Chart.Top)

        ' Set meter scale from 0 - 100, with a tick every 10 units
        m.setScale(0, 100, 10)

        ' Set 0 - 50 as green (99ff99) zone, 50 - 80 as yellow (ffff66) zone, and 80
        ' - 100 as red (ffcccc) zone
        m.addZone(0, 50, &H99ff99)
        m.addZone(50, 80, &Hffff66)
        m.addZone(80, 100, &Hffcccc)

        ' Add deep red (000080), deep green (008000) and deep blue (800000) pointers
        ' to reflect the values
        m.addPointer(value0, &H000080)
        m.addPointer(value1, &H008000)
        m.addPointer(value2, &H800000)

        ' Add a label at bottom-left (10, 68) using Arial Bold/8 pts/red (c00000)
        m.addText(10, 68, "Temp C", "Arial Bold", 8, &Hc00000, Chart.BottomLeft)

        ' Add three text boxes to show the values in this meter
        m.addText(148, 70, m.formatValue(value0, "2"), "Arial", 8, &H6666ff, _
            Chart.BottomRight).setBackground(0, 0, -1)
        m.addText(193, 70, m.formatValue(value1, "2"), "Arial", 8, &H33ff33, _
            Chart.BottomRight).setBackground(0, 0, -1)
        m.addText(238, 70, m.formatValue(value2, "2"), "Arial", 8, &Hff3333, _
            Chart.BottomRight).setBackground(0, 0, -1)

        ' Output the chart
        viewer.Chart = m

    End Sub

End Class

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

namespace CSharpChartExplorer
{
    public class multihmeter : DemoModule
    {
        //Name of demo module
        public string getName() { return "Multi-Pointer Horizontal Meter"; }

        //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 values to display on the meter
            double value0 = 30.99;
            double value1 = 45.35;
            double value2 = 77.64;

            // Create an LinearMeter object of size 250 x 75 pixels, using silver
            // background with a 2 pixel black 3D depressed border.
            LinearMeter m = new LinearMeter(250, 75, Chart.silverColor(), 0, -2);

            // Set the scale region top-left corner at (15, 25), with size of 220 x
            // 20 pixels. The scale labels are located on the top (implies horizontal
            // meter)
            m.setMeter(15, 25, 220, 20, Chart.Top);

            // Set meter scale from 0 - 100, with a tick every 10 units
            m.setScale(0, 100, 10);

            // Set 0 - 50 as green (99ff99) zone, 50 - 80 as yellow (ffff66) zone,
            // and 80 - 100 as red (ffcccc) zone
            m.addZone(0, 50, 0x99ff99);
            m.addZone(50, 80, 0xffff66);
            m.addZone(80, 100, 0xffcccc);

            // Add deep red (000080), deep green (008000) and deep blue (800000)
            // pointers to reflect the values
            m.addPointer(value0, 0x000080);
            m.addPointer(value1, 0x008000);
            m.addPointer(value2, 0x800000);

            // Add a label at bottom-left (10, 68) using Arial Bold/8 pts/red
            // (c00000)
            m.addText(10, 68, "Temp C", "Arial Bold", 8, 0xc00000, Chart.BottomLeft);

            // Add three text boxes to show the values in this meter
            m.addText(148, 70, m.formatValue(value0, "2"), "Arial", 8, 0x6666ff,
                Chart.BottomRight).setBackground(0, 0, -1);
            m.addText(193, 70, m.formatValue(value1, "2"), "Arial", 8, 0x33ff33,
                Chart.BottomRight).setBackground(0, 0, -1);
            m.addText(238, 70, m.formatValue(value2, "2"), "Arial", 8, 0xff3333,
                Chart.BottomRight).setBackground(0, 0, -1);

            // Output the chart
            viewer.Chart = m;
        }
    }
}