Monday, 16 July 2012

Infragistics NetAdvantage 3D Area Charts

An Area Chart emphasizes the amount of change over a period of time or compares multiple items. An area chart also shows the relationship of parts to a whole by displaying the total of the plotted values. An area chart is a form of line chart, but the area between the horizontal (X) axis and the line connecting the data markers is filled with color. This makes it easy to see where the points encompassed by the different data series overlap. The 3D area chart provides an extra dimension for plotting data by comparing values along two axes.

 Default.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/SamplePage.master" AutoEventWireup="false"
    CodeFile="Default.aspx.cs" Inherits="Samples_WebCharts_Display_Area_Charts_3D_Area_Chart_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <igchart:UltraChart ID="UltraChart1" runat="server" ChartType="AreaChart3D" Transform3D-Perspective="50"
        Transform3D-ZRotation="0" Transform3D-Scale="50" Transform3D-XRotation="144"
        Transform3D-YRotation="12" Height="400px">
        <ColorModel ModelStyle="CustomLinear" />
        <Axis>
            <X Visible="True">
                <Labels ItemFormatString="&lt;ITEM_LABEL&gt;" VerticalAlign="Center" Font="Verdana, 7pt"
                    FontColor="Black" Orientation="VerticalLeftFacing" Visible="True" HorizontalAlign="Near" />
            </X>
            <Y Visible="True" TickmarkStyle="Smart">
                <Labels ItemFormatString="&lt;DATA_VALUE:00.##&gt;" VerticalAlign="Center" Font="Verdana, 7pt"
                    FontColor="Black" Orientation="Horizontal" Visible="True" HorizontalAlign="Far" />
            </Y>
            <Z Visible="True">
                <Labels ItemFormatString="&lt;SERIES_LABEL&gt;" VerticalAlign="Center" Font="Verdana, 7pt, style=Bold"
                    Flip="False" FontColor="Black" Orientation="Horizontal" Visible="True" />
            </Z>
            <X2 Visible="False" />
            <Y2 Visible="False" />
            <Z2 Visible="False" />
        </Axis>
        <DeploymentScenario Scenario="FileSystem" ImageURL="/SamplesBrowser/Temp/ChartImages/Chart_#SEQNUM(100).png" ImageType="Png" FilePath="/SamplesBrowser/Temp/ChartImages" />
        <Tooltips BorderThickness="1" Overflow="None" FormatString="&lt;DATA_VALUE:00.##&gt;"
            EnableFadingEffect="False" Format="DataValue" FontColor="Black" BorderColor="Black"
            Display="MouseMove" BackColor="AntiqueWhite" Padding="0" />
    </igchart:UltraChart>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="beforeClosingBodyPlaceHolder" runat="Server">
</asp:Content> 
 
 Default.aspx.cs
 
using System;
using System.Data;
using System.Drawing;

public partial class Samples_WebCharts_Display_Area_Charts_3D_Area_Chart_Default : Infragistics.Web.SampleBrowser.Core.Framework.Web.UI.ASPNET.SamplePage
{
    protected System.Data.OleDb.OleDbCommand oleDbSelectCommand1;
    protected System.Data.OleDb.OleDbCommand oleDbInsertCommand1;
    protected System.Data.OleDb.OleDbConnection oleDbConnection1;
    protected System.Data.OleDb.OleDbDataAdapter oleDbDataAdapter1;
    protected WebSamplesCS.WebCharts.ChartData chartData1;

    private void Page_Load(object sender, System.EventArgs e)
    {

        this.UltraChart1.Data.DataSource = MakeData();
        this.UltraChart1.Data.DataBind();

        this.UltraChart1.ColorModel.ModelStyle = Infragistics.UltraChart.Shared.Styles.ColorModels.CustomLinear;
        this.UltraChart1.ColorModel.CustomPalette = new Color[] {
                                                                        Color.FromArgb(108,162,36),
                                                                        Color.FromArgb(7,108,176),
                                                                        Color.FromArgb(215,0,5),
                                                                        Color.FromArgb(243,204,3),
                                                                        Color.FromArgb(252,122,10)
                                                                    };

        this.UltraChart1.BackgroundImageFileName = Server.MapPath("/SamplesBrowser/SamplesCommon/aspnet/Common/ChartBg.jpg");

    }

    #region Create Chart Data
    /// <summary>
    /// Use the Sin and Cos functions to generate data for the heatmap chart
    /// </summary>
    /// <returns></returns>
    private DataTable MakeData()
    {
        DataTable t = new DataTable();

        t.Columns.Add("Symbol", typeof(string));
        t.Columns.Add("Week 1", typeof(double));
        t.Columns.Add("Week 2", typeof(double));
        t.Columns.Add("Week 3", typeof(double));
        t.Columns.Add("Week 4", typeof(double));
        t.Columns.Add("Week 5", typeof(double));
        t.Columns.Add("Week 6", typeof(double));

        t.Rows.Add(new object[] { "LVLT", 2.74, 2.33, 2.06, 1.81, 2.08, 2.03 });
        t.Rows.Add(new object[] { "DSCO", 7.86, 7.33, 4.36, 4.39, 4.73, 4.69 });
        t.Rows.Add(new object[] { "ZRAN", 8.55, 8.50, 9.25, 13.21, 13.60, 15.35 });

        return t;
    }
    #endregion

    #region Web Form Designer generated code
    override protected void OnInit(EventArgs e)
    {
        //
        // CODEGEN: This call is required by the ASP.NET Web Form Designer.
        //
        InitializeComponent();
        base.OnInit(e);
    }

    /// <summary>
    /// Required method for Designer support - do not modify
    /// the contents of this method with the code editor.
    /// </summary>
    private void InitializeComponent()
    {
        this.oleDbSelectCommand1 = new System.Data.OleDb.OleDbCommand();
        this.oleDbInsertCommand1 = new System.Data.OleDb.OleDbCommand();
        this.oleDbConnection1 = new System.Data.OleDb.OleDbConnection();
        this.oleDbDataAdapter1 = new System.Data.OleDb.OleDbDataAdapter();
        this.chartData1 = new WebSamplesCS.WebCharts.ChartData();
        ((System.ComponentModel.ISupportInitialize)(this.chartData1)).BeginInit();
        // 
        // oleDbSelectCommand1
        // 
        this.oleDbSelectCommand1.CommandText = "SELECT Friday, Monday, StockName, Thursday, Tuesday, Wednesday FROM [3DLineAreaDa" +
            "ta]";
        this.oleDbSelectCommand1.Connection = this.oleDbConnection1;
        // 
        // oleDbInsertCommand1
        // 
        this.oleDbInsertCommand1.CommandText = "INSERT INTO [3DLineAreaData] (Friday, Monday, StockName, Thursday, Tuesday, Wedne" +
            "sday) VALUES (?, ?, ?, ?, ?, ?)";
        this.oleDbInsertCommand1.Connection = this.oleDbConnection1;
        this.oleDbInsertCommand1.Parameters.Add(new System.Data.OleDb.OleDbParameter("Friday", System.Data.OleDb.OleDbType.Integer, 0, System.Data.ParameterDirection.Input, false, ((System.Byte)(10)), ((System.Byte)(0)), "Friday", System.Data.DataRowVersion.Current, null));
        this.oleDbInsertCommand1.Parameters.Add(new System.Data.OleDb.OleDbParameter("Monday", System.Data.OleDb.OleDbType.Integer, 0, System.Data.ParameterDirection.Input, false, ((System.Byte)(10)), ((System.Byte)(0)), "Monday", System.Data.DataRowVersion.Current, null));
        this.oleDbInsertCommand1.Parameters.Add(new System.Data.OleDb.OleDbParameter("StockName", System.Data.OleDb.OleDbType.VarWChar, 50, "StockName"));
        this.oleDbInsertCommand1.Parameters.Add(new System.Data.OleDb.OleDbParameter("Thursday", System.Data.OleDb.OleDbType.Integer, 0, System.Data.ParameterDirection.Input, false, ((System.Byte)(10)), ((System.Byte)(0)), "Thursday", System.Data.DataRowVersion.Current, null));
        this.oleDbInsertCommand1.Parameters.Add(new System.Data.OleDb.OleDbParameter("Tuesday", System.Data.OleDb.OleDbType.Integer, 0, System.Data.ParameterDirection.Input, false, ((System.Byte)(10)), ((System.Byte)(0)), "Tuesday", System.Data.DataRowVersion.Current, null));
        this.oleDbInsertCommand1.Parameters.Add(new System.Data.OleDb.OleDbParameter("Wednesday", System.Data.OleDb.OleDbType.Integer, 0, System.Data.ParameterDirection.Input, false, ((System.Byte)(10)), ((System.Byte)(0)), "Wednesday", System.Data.DataRowVersion.Current, null));
        // 
        // oleDbConnection1
        // 
        this.oleDbConnection1.ConnectionString = @"Provider=Microsoft.Jet.OLEDB.4.0;Password="""";User ID=Admin;Data Source=C:\Program Files\Infragistics\NETADVANTAGE 2006 VOLUME 1 CLR 1.0\ASP.NET\SAMPLES\Data\ChartDataBase.mdb;Mode=Share Deny None;Extended Properties="""";Jet OLEDB:System database="""";Jet OLEDB:Registry Path="""";Jet OLEDB:Database Password="""";Jet OLEDB:Engine Type=5;Jet OLEDB:Database Locking Mode=1;Jet OLEDB:Global Partial Bulk Ops=2;Jet OLEDB:Global Bulk Transactions=1;Jet OLEDB:New Database Password="""";Jet OLEDB:Create System Database=False;Jet OLEDB:Encrypt Database=False;Jet OLEDB:Don't Copy Locale on Compact=False;Jet OLEDB:Compact Without Replica Repair=False;Jet OLEDB:SFP=False";
        // 
        // oleDbDataAdapter1
        // 
        this.oleDbDataAdapter1.InsertCommand = this.oleDbInsertCommand1;
        this.oleDbDataAdapter1.SelectCommand = this.oleDbSelectCommand1;
        this.oleDbDataAdapter1.TableMappings.AddRange(new System.Data.Common.DataTableMapping[] {
                                                                                                        new System.Data.Common.DataTableMapping("Table", "3DLineAreaData", new System.Data.Common.DataColumnMapping[] {
                                                                                                                                                                                                                          new System.Data.Common.DataColumnMapping("StockName", "StockName"),
                                                                                                                                                                                                                          new System.Data.Common.DataColumnMapping("Monday", "Monday"),
                                                                                                                                                                                                                          new System.Data.Common.DataColumnMapping("Tuesday", "Tuesday"),
                                                                                                                                                                                                                          new System.Data.Common.DataColumnMapping("Wednesday", "Wednesday"),
                                                                                                                                                                                                                          new System.Data.Common.DataColumnMapping("Thursday", "Thursday"),
                                                                                                                                                                                                                          new System.Data.Common.DataColumnMapping("Friday", "Friday")})});
        // 
        // chartData1
        // 
        this.chartData1.DataSetName = "ChartData";
        this.chartData1.Locale = new System.Globalization.CultureInfo("en-US");
        this.chartData1.Namespace = "http://www.tempuri.org/ChartData.xsd";
        this.Load += new System.EventHandler(this.Page_Load);
        ((System.ComponentModel.ISupportInitialize)(this.chartData1)).EndInit();

    }
    #endregion
} 
 
 
 
 
 Article provided by:

No comments:

Post a Comment