.net Charting Gallery Sample

Gallery

Gallery > TreeMapSimple

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<%@ Import Namespace="dotnetCHARTING.Mapping" %>

<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
       // Demonstrates how to draw a simple TreeMap chart with color ranges using a SmartPalette.

       Chart.Size = "600x450";
       Chart.Title = ".netCHARTING TreeMap Sample";
       Chart.TempDirectory = "temp";
       Chart.Debug = true;
       Chart.Type = ChartType.TreeMap;
       Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend;
       Chart.DefaultSeries.LegendEntry.Visible = false;

       // Distance between series boxes
       Chart.ChartArea.Padding = 6;

       // Series Label: The chart x axis label settings can be used to control the default series labels.
       Chart.DefaultSeries.Box.Label.Color = Color.White;
       Chart.DefaultSeries.Box.Label.Shadow.Color = Color.Black;
       Chart.DefaultSeries.Box.Label.Shadow.Depth = 2;
       Chart.DefaultSeries.Box.Label.LineAlignment = StringAlignment.Far;
       Chart.DefaultSeries.Box.Label.Text = "%Name (%YSum)";
       Chart.DefaultSeries.Box.Label.Font = new Font("Arial", 10, FontStyle.Bold);

       // ColorRange coloring
       Chart.SmartPalette.Add("*", new SmartColor(Color.Red, Color.Yellow, new ScaleRange(0, 10)));
       Chart.SmartPalette.Add("*", new SmartColor(Color.Yellow, Color.YellowGreen, new ScaleRange(10, 50)));

       Chart.DefaultElement.ToolTip = "%SeriesName\nValue: %YValue";

       // *DYNAMIC DATA NOTE*
       // This sample uses random data to populate the chart. To populate
       // a chart with database data see the following resources:
       // - Use the getLiveData() method using the dataEngine to query a database.
       // - Help File > Getting Started > Data Tutorials
       // - DataEngine Class in the help file
       // - Sample: features/DataEngine.aspx

       SeriesCollection mySC = getRandomData();
       // Add the random data.
       Chart.SeriesCollection.Add(mySC);

}

SeriesCollection getRandomData()
{
       Random myR = new Random(1);
       SeriesCollection SC = new SeriesCollection();
       for (int a = 1; a < 5; a++)
       {
             Series s = new Series("Series " + a.ToString());
             int eCount = 80 + myR.Next(50);
             for (int b = 1; b < eCount; b++)
             {
                   Element e = new Element("Element " + b.ToString());
                   if(myR.Next(5) == 3)
                   e.YValue = myR.Next(50);
                   else
                        e.YValue = myR.Next(10);
                   s.Elements.Add(e);
             }
             SC.Add(s);
       }
       return SC;
}

SeriesCollection getLiveData()
{
       DataEngine de = new DataEngine(ConfigurationManager.AppSettings["DNCConnectionString"]);
       de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
       de.SqlStatement = "SELECT XAxisColumn, YAxisColumn FROM ....";
       return de.GetSeries();
}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div align="center">
       <dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<%@ Import Namespace="dotnetCHARTING.Mapping" %>

<script runat="server">

      Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            ' Demonstrates how to draw a simple TreeMap chart with color ranges using a SmartPalette.

            Chart.Size = "600x450"
            Chart.Title = ".netCHARTING TreeMap Sample"
            Chart.TempDirectory = "temp"
            Chart.Debug = True
            Chart.Type = ChartType.TreeMap
            Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend
            Chart.DefaultSeries.LegendEntry.Visible = False

            ' Distance between series boxes
            Chart.ChartArea.Padding = 6

            ' Series Label: The chart x axis label settings can be used to control the default series labels.
            Chart.DefaultSeries.Box.Label.Color = Color.White
            Chart.DefaultSeries.Box.Label.Shadow.Color = Color.Black
            Chart.DefaultSeries.Box.Label.Shadow.Depth = 2
            Chart.DefaultSeries.Box.Label.LineAlignment = StringAlignment.Far
            Chart.DefaultSeries.Box.Label.Text = "%Name (%YSum)"
            Chart.DefaultSeries.Box.Label.Font = New Font("Arial", 10, FontStyle.Bold)

            ' ColorRange coloring
            Chart.SmartPalette.Add("*", New SmartColor(Color.Red, Color.Yellow, New ScaleRange(0, 10)))
            Chart.SmartPalette.Add("*", New SmartColor(Color.Yellow, Color.YellowGreen, New ScaleRange(10, 50)))

            Chart.DefaultElement.ToolTip = "%SeriesName" & Constants.vbLf & "Value: %YValue"

            ' *DYNAMIC DATA NOTE*
            ' This sample uses random data to populate the chart. To populate
            ' a chart with database data see the following resources:
            ' - Use the getLiveData() method using the dataEngine to query a database.
            ' - Help File > Getting Started > Data Tutorials
            ' - DataEngine Class in the help file
            ' - Sample: features/DataEngine.aspx

            Dim mySC As SeriesCollection = getRandomData()
            ' Add the random data.
            Chart.SeriesCollection.Add(mySC)

      End Sub

      Function getRandomData() As SeriesCollection
            Dim myR As Random = New Random(1)
            Dim SC As SeriesCollection = New SeriesCollection()
            For a As Integer = 1 To 4
                  Dim s As Series = New Series("Series " & a.ToString())
                  Dim eCount As Integer = 80 + myR.Next(50)
                  For b As Integer = 1 To eCount - 1
                        Dim e As Element = New Element("Element " & b.ToString())
                        If myR.Next(5) = 3 Then
                        e.YValue = myR.Next(50)
                        Else
                              e.YValue = myR.Next(10)
                        End If
                        s.Elements.Add(e)
                  Next b
                  SC.Add(s)
            Next a
            Return SC
      End Function

      Function getLiveData() As SeriesCollection
            Dim de As DataEngine = New DataEngine(ConfigurationManager.AppSettings("DNCConnectionString"))
            de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
            de.SqlStatement = "SELECT XAxisColumn, YAxisColumn FROM ...."
            Return de.GetSeries()
      End Function

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
      <title>.netCHARTING Sample</title>
</head>
<body>
      <div align="center">
            <dnc:Chart ID="Chart" runat="server" />
      </div>
</body>
</html>

JS Charting

Gallery