H-Bar Meter Orientation

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

using System;
using ChartDirector;

namespace CSharpChartExplorer
{
    public class hbarmeterorientation : DemoModule
    {
        //Name of demo module
        public string getName() { return "H-Bar Meter Orientation"; }

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

        //Main code for creating charts
        public void createChart(WinChartViewer viewer, int chartIndex)
        {
            // The value to display on the meter
            double value = 75.35;

            // The bar colors for the meters
            int[] barColor = {0x0088ff, 0x00cc00, 0x8833dd, 0xff8800};

            // Create a LinearMeter object of size 260 x 80 pixels with very light grey (0xeeeeee)
            // backgruond and a light grey (0xccccccc) 3-pixel thick rounded frame
            LinearMeter m = new LinearMeter(260, 80, 0xeeeeee, 0xcccccc);
            m.setRoundedFrame(Chart.Transparent);
            m.setThickFrame(3);

            // This example demonstrates putting the text labels at the top or bottom. This is by
            // setting the label alignment, as well as the scale, color scale and label positions.
            int[] alignment = {Chart.Top, Chart.Top, Chart.Bottom, Chart.Bottom};
            int[] meterYPos = {24, 24, 36, 36};
            int[] labelYPos = {65, 65, 16, 16};
            int[] colorScalePos = {48, 48, 27, 27};

            // Set the scale region
            m.setMeter(18, meterYPos[chartIndex], 222, 20, alignment[chartIndex]);

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

            // Add a 5-pixel thick smooth color scale
            double[] smoothColorScale = {0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100,
                0xff0000};
            m.addColorScale(smoothColorScale, colorScalePos[chartIndex], 5);

            // Add a bar from 0 to value with glass effect and 4 pixel rounded corners
            m.addBar(0, value, barColor[chartIndex], Chart.glassEffect(Chart.NormalGlare, Chart.Top
                ), 4);

            //
            // In this example, some charts have the "Temperauture" label on the left side and the
            // value readout on the right side, and some charts have the reverse
            //

            if (chartIndex % 2 == 0) {
                // Add a label on the left side using 8pt Arial Bold font
                m.addText(15, labelYPos[chartIndex], "Temperature C", "Arial Bold", 8,
                    Chart.TextColor, Chart.Left);

                // Add a text box on the right side. Display the value using white (0xffffff) 8pt
                // Arial Bold font on a black (0x000000) background with depressed rounded border.
                ChartDirector.TextBox t = m.addText(240, labelYPos[chartIndex], m.formatValue(value,
                    "2"), "Arial", 8, 0xffffff, Chart.Right);
                t.setBackground(0x000000, 0x000000, -1);
                t.setRoundedCorners(3);
            } else {
                // Add a label on the right side using 8pt Arial Bold font
                m.addText(243, labelYPos[chartIndex], "Temperature C", "Arial Bold", 8,
                    Chart.TextColor, Chart.Right);

                // Add a text box on the left side. Display the value using white (0xffffff) 8pt
                // Arial Bold font on a black (0x000000) background with depressed rounded border.
                ChartDirector.TextBox t = m.addText(18, labelYPos[chartIndex], m.formatValue(value,
                    "2"), "Arial", 8, 0xffffff, Chart.Left);
                t.setBackground(0x000000, 0x000000, -1);
                t.setRoundedCorners(3);
            }

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

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

Imports System
Imports Microsoft.VisualBasic
Imports ChartDirector

Public Class hbarmeterorientation
    Implements DemoModule

    'Name of demo module
    Public Function getName() As String Implements DemoModule.getName
        Return "H-Bar Meter Orientation"
    End Function

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

    'Main code for creating charts
    Public Sub createChart(viewer As WinChartViewer, chartIndex As Integer) _
        Implements DemoModule.createChart

        ' The value to display on the meter
        Dim value As Double = 75.35

        ' The bar colors for the meters
        Dim barColor() As Integer = {&H0088ff, &H00cc00, &H8833dd, &Hff8800}

        ' Create a LinearMeter object of size 260 x 80 pixels with very light grey (0xeeeeee)
        ' backgruond and a light grey (0xccccccc) 3-pixel thick rounded frame
        Dim m As LinearMeter = New LinearMeter(260, 80, &Heeeeee, &Hcccccc)
        m.setRoundedFrame(Chart.Transparent)
        m.setThickFrame(3)

        ' This example demonstrates putting the text labels at the top or bottom. This is by setting
        ' the label alignment, as well as the scale, color scale and label positions.
        Dim alignment() As Integer = {Chart.Top, Chart.Top, Chart.Bottom, Chart.Bottom}
        Dim meterYPos() As Integer = {24, 24, 36, 36}
        Dim labelYPos() As Integer = {65, 65, 16, 16}
        Dim colorScalePos() As Integer = {48, 48, 27, 27}

        ' Set the scale region
        m.setMeter(18, meterYPos(chartIndex), 222, 20, alignment(chartIndex))

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

        ' Add a 5-pixel thick smooth color scale
        Dim smoothColorScale() As Double = {0, &H0000ff, 25, &H0088ff, 50, &H00ff00, 75, &Hdddd00, _
            100, &Hff0000}
        m.addColorScale(smoothColorScale, colorScalePos(chartIndex), 5)

        ' Add a bar from 0 to value with glass effect and 4 pixel rounded corners
        m.addBar(0, value, barColor(chartIndex), Chart.glassEffect(Chart.NormalGlare, Chart.Top),4)

        '
        ' In this example, some charts have the "Temperauture" label on the left side and the value
        ' readout on the right side, and some charts have the reverse
        '

        If chartIndex Mod 2 = 0 Then
            ' Add a label on the left side using 8pt Arial Bold font
            m.addText(15, labelYPos(chartIndex), "Temperature C", "Arial Bold", 8, _
                Chart.TextColor, Chart.Left)

            ' Add a text box on the right side. Display the value using white (0xffffff) 8pt Arial
            ' Bold font on a black (0x000000) background with depressed rounded border.
            Dim t As ChartDirector.TextBox = m.addText(240, labelYPos(chartIndex), m.formatValue( _
                value, "2"), "Arial", 8, &Hffffff, Chart.Right)
            t.setBackground(&H000000, &H000000, -1)
            t.setRoundedCorners(3)
        Else
            ' Add a label on the right side using 8pt Arial Bold font
            m.addText(243, labelYPos(chartIndex), "Temperature C", "Arial Bold", 8, _
                Chart.TextColor, Chart.Right)

            ' Add a text box on the left side. Display the value using white (0xffffff) 8pt Arial
            ' Bold font on a black (0x000000) background with depressed rounded border.
            Dim t As ChartDirector.TextBox = m.addText(18, labelYPos(chartIndex), m.formatValue( _
                value, "2"), "Arial", 8, &Hffffff, Chart.Left)
            t.setBackground(&H000000, &H000000, -1)
            t.setRoundedCorners(3)
        End If

        ' Output the chart
        viewer.Chart = m

    End Sub

End Class

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

using System;
using ChartDirector;

namespace CSharpWPFCharts
{
    public class hbarmeterorientation : DemoModule
    {
        //Name of demo module
        public string getName() { return "H-Bar Meter Orientation"; }

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

        //Main code for creating charts
        public void createChart(WPFChartViewer viewer, int chartIndex)
        {
            // The value to display on the meter
            double value = 75.35;

            // The bar colors for the meters
            int[] barColor = {0x0088ff, 0x00cc00, 0x8833dd, 0xff8800};

            // Create a LinearMeter object of size 260 x 80 pixels with very light grey (0xeeeeee)
            // backgruond and a light grey (0xccccccc) 3-pixel thick rounded frame
            LinearMeter m = new LinearMeter(260, 80, 0xeeeeee, 0xcccccc);
            m.setRoundedFrame(Chart.Transparent);
            m.setThickFrame(3);

            // This example demonstrates putting the text labels at the top or bottom. This is by
            // setting the label alignment, as well as the scale, color scale and label positions.
            int[] alignment = {Chart.Top, Chart.Top, Chart.Bottom, Chart.Bottom};
            int[] meterYPos = {24, 24, 36, 36};
            int[] labelYPos = {65, 65, 16, 16};
            int[] colorScalePos = {48, 48, 27, 27};

            // Set the scale region
            m.setMeter(18, meterYPos[chartIndex], 222, 20, alignment[chartIndex]);

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

            // Add a 5-pixel thick smooth color scale
            double[] smoothColorScale = {0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100,
                0xff0000};
            m.addColorScale(smoothColorScale, colorScalePos[chartIndex], 5);

            // Add a bar from 0 to value with glass effect and 4 pixel rounded corners
            m.addBar(0, value, barColor[chartIndex], Chart.glassEffect(Chart.NormalGlare, Chart.Top
                ), 4);

            //
            // In this example, some charts have the "Temperauture" label on the left side and the
            // value readout on the right side, and some charts have the reverse
            //

            if (chartIndex % 2 == 0) {
                // Add a label on the left side using 8pt Arial Bold font
                m.addText(15, labelYPos[chartIndex], "Temperature C", "Arial Bold", 8,
                    Chart.TextColor, Chart.Left);

                // Add a text box on the right side. Display the value using white (0xffffff) 8pt
                // Arial Bold font on a black (0x000000) background with depressed rounded border.
                ChartDirector.TextBox t = m.addText(240, labelYPos[chartIndex], m.formatValue(value,
                    "2"), "Arial", 8, 0xffffff, Chart.Right);
                t.setBackground(0x000000, 0x000000, -1);
                t.setRoundedCorners(3);
            } else {
                // Add a label on the right side using 8pt Arial Bold font
                m.addText(243, labelYPos[chartIndex], "Temperature C", "Arial Bold", 8,
                    Chart.TextColor, Chart.Right);

                // Add a text box on the left side. Display the value using white (0xffffff) 8pt
                // Arial Bold font on a black (0x000000) background with depressed rounded border.
                ChartDirector.TextBox t = m.addText(18, labelYPos[chartIndex], m.formatValue(value,
                    "2"), "Arial", 8, 0xffffff, Chart.Left);
                t.setBackground(0x000000, 0x000000, -1);
                t.setRoundedCorners(3);
            }

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

[ASP.NET Web Forms - C# version] NetWebCharts\CSharpASP\hbarmeterorientation.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">

//
// Create chart
//
protected void createChart(WebChartViewer viewer, int chartIndex)
{
    // The value to display on the meter
    double value = 75.35;

    // The bar colors for the meters
    int[] barColor = {0x0088ff, 0x00cc00, 0x8833dd, 0xff8800};

    // Create a LinearMeter object of size 260 x 80 pixels with very light grey (0xeeeeee)
    // backgruond and a light grey (0xccccccc) 3-pixel thick rounded frame
    LinearMeter m = new LinearMeter(260, 80, 0xeeeeee, 0xcccccc);
    m.setRoundedFrame(Chart.Transparent);
    m.setThickFrame(3);

    // This example demonstrates putting the text labels at the top or bottom. This is by setting
    // the label alignment, as well as the scale, color scale and label positions.
    int[] alignment = {Chart.Top, Chart.Top, Chart.Bottom, Chart.Bottom};
    int[] meterYPos = {24, 24, 36, 36};
    int[] labelYPos = {65, 65, 16, 16};
    int[] colorScalePos = {48, 48, 27, 27};

    // Set the scale region
    m.setMeter(18, meterYPos[chartIndex], 222, 20, alignment[chartIndex]);

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

    // Add a 5-pixel thick smooth color scale
    double[] smoothColorScale = {0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100,
        0xff0000};
    m.addColorScale(smoothColorScale, colorScalePos[chartIndex], 5);

    // Add a bar from 0 to value with glass effect and 4 pixel rounded corners
    m.addBar(0, value, barColor[chartIndex], Chart.glassEffect(Chart.NormalGlare, Chart.Top), 4);

    //
    // In this example, some charts have the "Temperauture" label on the left side and the value
    // readout on the right side, and some charts have the reverse
    //

    if (chartIndex % 2 == 0) {
        // Add a label on the left side using 8pt Arial Bold font
        m.addText(15, labelYPos[chartIndex], "Temperature C", "Arial Bold", 8, Chart.TextColor,
            Chart.Left);

        // Add a text box on the right side. Display the value using white (0xffffff) 8pt Arial Bold
        // font on a black (0x000000) background with depressed rounded border.
        ChartDirector.TextBox t = m.addText(240, labelYPos[chartIndex], m.formatValue(value, "2"),
            "Arial", 8, 0xffffff, Chart.Right);
        t.setBackground(0x000000, 0x000000, -1);
        t.setRoundedCorners(3);
    } else {
        // Add a label on the right side using 8pt Arial Bold font
        m.addText(243, labelYPos[chartIndex], "Temperature C", "Arial Bold", 8, Chart.TextColor,
            Chart.Right);

        // Add a text box on the left side. Display the value using white (0xffffff) 8pt Arial Bold
        // font on a black (0x000000) background with depressed rounded border.
        ChartDirector.TextBox t = m.addText(18, labelYPos[chartIndex], m.formatValue(value, "2"),
            "Arial", 8, 0xffffff, Chart.Left);
        t.setBackground(0x000000, 0x000000, -1);
        t.setRoundedCorners(3);
    }

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

//
// Page Load event handler
//
protected void Page_Load(object sender, EventArgs e)
{
    createChart(WebChartViewer0, 0);
    createChart(WebChartViewer1, 1);
    createChart(WebChartViewer2, 2);
    createChart(WebChartViewer3, 3);
}

</script>

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

[ASP.NET Web Forms - VB Version] NetWebCharts\VBNetASP\hbarmeterorientation.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">

'
' Create chart
'
Protected Sub createChart(viewer As WebChartViewer, chartIndex As Integer)

    ' The value to display on the meter
    Dim value As Double = 75.35

    ' The bar colors for the meters
    Dim barColor() As Integer = {&H0088ff, &H00cc00, &H8833dd, &Hff8800}

    ' Create a LinearMeter object of size 260 x 80 pixels with very light grey (0xeeeeee) backgruond
    ' and a light grey (0xccccccc) 3-pixel thick rounded frame
    Dim m As LinearMeter = New LinearMeter(260, 80, &Heeeeee, &Hcccccc)
    m.setRoundedFrame(Chart.Transparent)
    m.setThickFrame(3)

    ' This example demonstrates putting the text labels at the top or bottom. This is by setting the
    ' label alignment, as well as the scale, color scale and label positions.
    Dim alignment() As Integer = {Chart.Top, Chart.Top, Chart.Bottom, Chart.Bottom}
    Dim meterYPos() As Integer = {24, 24, 36, 36}
    Dim labelYPos() As Integer = {65, 65, 16, 16}
    Dim colorScalePos() As Integer = {48, 48, 27, 27}

    ' Set the scale region
    m.setMeter(18, meterYPos(chartIndex), 222, 20, alignment(chartIndex))

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

    ' Add a 5-pixel thick smooth color scale
    Dim smoothColorScale() As Double = {0, &H0000ff, 25, &H0088ff, 50, &H00ff00, 75, &Hdddd00, _
        100, &Hff0000}
    m.addColorScale(smoothColorScale, colorScalePos(chartIndex), 5)

    ' Add a bar from 0 to value with glass effect and 4 pixel rounded corners
    m.addBar(0, value, barColor(chartIndex), Chart.glassEffect(Chart.NormalGlare, Chart.Top), 4)

    '
    ' In this example, some charts have the "Temperauture" label on the left side and the value
    ' readout on the right side, and some charts have the reverse
    '

    If chartIndex Mod 2 = 0 Then
        ' Add a label on the left side using 8pt Arial Bold font
        m.addText(15, labelYPos(chartIndex), "Temperature C", "Arial Bold", 8, Chart.TextColor, _
            Chart.Left)

        ' Add a text box on the right side. Display the value using white (0xffffff) 8pt Arial Bold
        ' font on a black (0x000000) background with depressed rounded border.
        Dim t As ChartDirector.TextBox = m.addText(240, labelYPos(chartIndex), m.formatValue( _
            value, "2"), "Arial", 8, &Hffffff, Chart.Right)
        t.setBackground(&H000000, &H000000, -1)
        t.setRoundedCorners(3)
    Else
        ' Add a label on the right side using 8pt Arial Bold font
        m.addText(243, labelYPos(chartIndex), "Temperature C", "Arial Bold", 8, Chart.TextColor, _
            Chart.Right)

        ' Add a text box on the left side. Display the value using white (0xffffff) 8pt Arial Bold
        ' font on a black (0x000000) background with depressed rounded border.
        Dim t As ChartDirector.TextBox = m.addText(18, labelYPos(chartIndex), m.formatValue(value, _
            "2"), "Arial", 8, &Hffffff, Chart.Left)
        t.setBackground(&H000000, &H000000, -1)
        t.setRoundedCorners(3)
    End If

    ' Output the chart
    viewer.Image = m.makeWebImage(Chart.SVG)

End Sub

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

    createChart(WebChartViewer0, 0)
    createChart(WebChartViewer1, 1)
    createChart(WebChartViewer2, 2)
    createChart(WebChartViewer3, 3)

End Sub

</script>

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

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

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

namespace NetMvcCharts.Controllers
{
    public class HbarmeterorientationController : Controller
    {
        //
        // Default Action
        //
        public ActionResult Index()
        {
            ViewBag.Title = "H-Bar Meter Orientation";

            // This example contains 4 charts.
            ViewBag.Viewer = new RazorChartViewer[4];
            for (int i = 0; i < ViewBag.Viewer.Length; ++i)
                createChart(ViewBag.Viewer[i] = new RazorChartViewer(HttpContext, "chart" + i), i);

            return View("~/Views/Shared/ChartView.cshtml");
        }

        //
        // Create chart
        //
        private void createChart(RazorChartViewer viewer, int chartIndex)
        {
            // The value to display on the meter
            double value = 75.35;

            // The bar colors for the meters
            int[] barColor = {0x0088ff, 0x00cc00, 0x8833dd, 0xff8800};

            // Create a LinearMeter object of size 260 x 80 pixels with very light grey (0xeeeeee)
            // backgruond and a light grey (0xccccccc) 3-pixel thick rounded frame
            LinearMeter m = new LinearMeter(260, 80, 0xeeeeee, 0xcccccc);
            m.setRoundedFrame(Chart.Transparent);
            m.setThickFrame(3);

            // This example demonstrates putting the text labels at the top or bottom. This is by setting
            // the label alignment, as well as the scale, color scale and label positions.
            int[] alignment = {Chart.Top, Chart.Top, Chart.Bottom, Chart.Bottom};
            int[] meterYPos = {24, 24, 36, 36};
            int[] labelYPos = {65, 65, 16, 16};
            int[] colorScalePos = {48, 48, 27, 27};

            // Set the scale region
            m.setMeter(18, meterYPos[chartIndex], 222, 20, alignment[chartIndex]);

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

            // Add a 5-pixel thick smooth color scale
            double[] smoothColorScale = {0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100,
                0xff0000};
            m.addColorScale(smoothColorScale, colorScalePos[chartIndex], 5);

            // Add a bar from 0 to value with glass effect and 4 pixel rounded corners
            m.addBar(0, value, barColor[chartIndex], Chart.glassEffect(Chart.NormalGlare, Chart.Top), 4);

            //
            // In this example, some charts have the "Temperauture" label on the left side and the value
            // readout on the right side, and some charts have the reverse
            //

            if (chartIndex % 2 == 0) {
                // Add a label on the left side using 8pt Arial Bold font
                m.addText(15, labelYPos[chartIndex], "Temperature C", "Arial Bold", 8, Chart.TextColor,
                    Chart.Left);

                // Add a text box on the right side. Display the value using white (0xffffff) 8pt Arial
                // Bold font on a black (0x000000) background with depressed rounded border.
                ChartDirector.TextBox t = m.addText(240, labelYPos[chartIndex], m.formatValue(value, "2"
                    ), "Arial", 8, 0xffffff, Chart.Right);
                t.setBackground(0x000000, 0x000000, -1);
                t.setRoundedCorners(3);
            } else {
                // Add a label on the right side using 8pt Arial Bold font
                m.addText(243, labelYPos[chartIndex], "Temperature C", "Arial Bold", 8, Chart.TextColor,
                    Chart.Right);

                // Add a text box on the left side. Display the value using white (0xffffff) 8pt Arial
                // Bold font on a black (0x000000) background with depressed rounded border.
                ChartDirector.TextBox t = m.addText(18, labelYPos[chartIndex], m.formatValue(value, "2"),
                    "Arial", 8, 0xffffff, Chart.Left);
                t.setBackground(0x000000, 0x000000, -1);
                t.setRoundedCorners(3);
            }

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

[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>