Spread ASP.NET 16
Spread for ASP.NET 16 Product Documentation / Developer's Guide / Working with the Chart Control / Creating Charts / Creating Plot Types / Creating a Treemap Chart
In This Topic
    Creating a Treemap Chart
    In This Topic

    A treemap chart displays hierarchical data as a set of nested rectangles. The tree branches are represented by rectangles and each sub-branch is shown as a smaller rectangle. The rectangles in the chart use color and size to make it easier to spot patterns. Treemap charts also make efficient use of space and are useful for displaying large amounts of data.

    Treemap Chart

    You can use the TreemapSeries class and the TreemapPlotArea class to create a treemap chart.

    You can set a color for each item in the treemap chart using the Fills property. Colors are mapped to the items based on the index order. The following image and code example show how the colors would be mapped to each data item.

    Treemap Colors Mapping

    C#
    Copy Code

    FarPoint.Web.Chart.TreemapSeries series = new FarPoint.Web.Chart.TreemapSeries();
    series.Values.AddRange(new double[] { 3.5, 1.2, 0.8, 0.6, 0.5, 1.7, 1.1, 0.7, 1.3, 2.0 });
    series.Fills.AddRange(new FarPoint.Web.Chart.Fill[] { new FarPoint.Web.Chart.SolidFill(Color.Blue), new FarPoint.Web.Chart.SolidFill(Color.Aqua), new FarPoint.Web.Chart.SolidFill(Color.Coral), new FarPoint.Web.Chart.SolidFill(Color.Lavender), new FarPoint.Web.Chart.SolidFill(Color.Lavender), new FarPoint.Web.Chart.SolidFill(Color.Lavender), new FarPoint.Web.Chart.SolidFill(Color.Lavender), new FarPoint.Web.Chart.SolidFill(Color.Olive), new FarPoint.Web.Chart.SolidFill(Color.Orange), new FarPoint.Web.Chart.SolidFill(Color.Beige), new FarPoint.Web.Chart.SolidFill(Color.Firebrick), new FarPoint.Web.Chart.SolidFill(Color.Gray), new FarPoint.Web.Chart.SolidFill(Color.Magenta) });

    FarPoint.Web.Chart.StringCollectionItem collection1 = new FarPoint.Web.Chart.StringCollectionItem();
    collection1.AddRange(new String[] { "1st", "", "", "", "", "", "2nd", "", "", "3rd" });
    FarPoint.Web.Chart.StringCollectionItem collection2 = new FarPoint.Web.Chart.StringCollectionItem();
    collection2.AddRange(new String[] { "Jan", "Feb", "", "", "", "Mar", "Apr", "May", "June", "July" });
    FarPoint.Web.Chart.StringCollectionItem collection3 = new FarPoint.Web.Chart.StringCollectionItem();
    collection3.AddRange(new String[] { "", "Week1", "Week2", "Week3", "Week4", "", "", "", "", "" });
    series.CategoryNames.AddRange(new FarPoint.Web.Chart.StringCollectionItem[] { collection1, collection2, collection3 });
    FarPoint.Web.Chart.TreemapPlotArea plotArea = new FarPoint.Web.Chart.TreemapPlotArea();
    plotArea.Location = new PointF(0.2f, 0.2f);
    plotArea.Size = new SizeF(0.6f, 0.6f);
    plotArea.Series.Add(series);
    FarPoint.Web.Chart.ChartModel model = new FarPoint.Web.Chart.ChartModel();
    model.PlotAreas.Add(plotArea);
    FarPoint.Web.Spread.Chart.SpreadChart chart = new FarPoint.Web.Spread.Chart.SpreadChart();
    chart.Width = 500;
    chart.Height = 500;
    chart.Model = model;
    fpSpread1.Sheets[0].Charts.Add(chart);

    For information about creating charts in the Spread Designer or the Chart Designer, refer to Using the Spread Designer or Using the Chart Designer.

    Using Code

    1. Add data for the chart.
    2. Add the chart.
    3. Set any additional properties such as the fill color.

    Example

    This example creates a treemap chart.

    C#
    Copy Code
    FpSpread1.ActiveSheetView.RowCount = 25;
    FpSpread1.ActiveSheetView.ColumnCount = 15;
    FpSpread1.ActiveSheetView.PageSize = 25;
    FpSpread1.ActiveSheetView.Cells[0, 0].Text = "Quarter";
    FpSpread1.ActiveSheetView.Cells[0, 1].Text = "Month";
    FpSpread1.ActiveSheetView.Cells[0, 2].Text = "Week";
    FpSpread1.ActiveSheetView.Cells[0, 3].Text = "Sales";
    FpSpread1.ActiveSheetView.Cells[1, 0].Text = "1st";
    FpSpread1.ActiveSheetView.Cells[1, 1].Text = "Jan";
    FpSpread1.ActiveSheetView.Cells[1, 3].Value = 1.7;
    FpSpread1.ActiveSheetView.Cells[2, 1].Text = "Feb";
    FpSpread1.ActiveSheetView.Cells[2, 2].Text = "Wk1";
    FpSpread1.ActiveSheetView.Cells[2, 3].Value = 2.0;
    FpSpread1.ActiveSheetView.Cells[3, 2].Text = "Wk2";
    FpSpread1.ActiveSheetView.Cells[3, 3].Value = 1.0;
    FpSpread1.ActiveSheetView.Cells[4, 2].Text = "Wk3";
    FpSpread1.ActiveSheetView.Cells[4, 3].Value = 1.0;
    FpSpread1.ActiveSheetView.Cells[5, 2].Text = "Wk4";
    FpSpread1.ActiveSheetView.Cells[5, 3].Value = 1.5;
    FpSpread1.ActiveSheetView.Cells[6, 1].Text = "Mar";
    FpSpread1.ActiveSheetView.Cells[6, 3].Value = 3.0;
    FpSpread1.ActiveSheetView.Cells[7, 0].Text = "2nd";
    FpSpread1.ActiveSheetView.Cells[7, 1].Text = "Apr";
    FpSpread1.ActiveSheetView.Cells[7, 3].Value = 1.1;
    FpSpread1.ActiveSheetView.Cells[8, 1].Text = "May";
    FpSpread1.ActiveSheetView.Cells[8, 3].Value = 2.8;
    FpSpread1.ActiveSheetView.Cells[9, 1].Text = "Jun";
    FpSpread1.ActiveSheetView.Cells[9, 3].Value = 1.3;
    FpSpread1.ActiveSheetView.Cells[10, 0].Text = "3rd";
    FpSpread1.ActiveSheetView.Cells[10, 1].Text = "July";
    FpSpread1.ActiveSheetView.Cells[10, 3].Value = 1.7;
    FpSpread1.ActiveSheetView.Cells[11, 1].Text = "Aug";
    FpSpread1.ActiveSheetView.Cells[11, 3].Value = 1.6;
    FpSpread1.ActiveSheetView.Cells[12, 1].Text = "Sept";
    FpSpread1.ActiveSheetView.Cells[12, 3].Value = 2.1;
    FpSpread1.ActiveSheetView.Cells[13, 0].Text = "4th";
    FpSpread1.ActiveSheetView.Cells[13, 1].Text = "Oct";
    FpSpread1.ActiveSheetView.Cells[13, 3].Value = 1.4;
    FpSpread1.ActiveSheetView.Cells[14, 1].Text = "Nov";
    FpSpread1.ActiveSheetView.Cells[14, 3].Value = 2.0;
    FpSpread1.ActiveSheetView.Cells[15, 1].Text = "Dec";
    FpSpread1.ActiveSheetView.Cells[15, 2].Text = "Wk1";
    FpSpread1.ActiveSheetView.Cells[15, 3].Value = 3.0;
    FpSpread1.ActiveSheetView.AddChart(new FarPoint.Web.Spread.Model.CellRange(0, 0, 16, 4), typeof(FarPoint.Web.Chart.TreemapSeries), 550, 450, 300, 0);
    FarPoint.Web.Chart.TreemapSeries treeseries = (FarPoint.Web.Chart.TreemapSeries)FpSpread1.Sheets[0].Charts[0].Model.PlotAreas[0].Series[0];
    treeseries.Fills.AddRange(new FarPoint.Web.Chart.Fill[] { new FarPoint.Web.Chart.SolidFill(Color.MediumSeaGreen), null, null, null, null });
    VB
    Copy Code
    FpSpread1.ActiveSheetView.RowCount = 25
    FpSpread1.ActiveSheetView.ColumnCount = 15
    FpSpread1.ActiveSheetView.PageSize = 25
    FpSpread1.ActiveSheetView.Cells(0, 0).Text = "Quarter"
    FpSpread1.ActiveSheetView.Cells(0, 1).Text = "Month"
    FpSpread1.ActiveSheetView.Cells(0, 2).Text = "Week"
    FpSpread1.ActiveSheetView.Cells(0, 3).Text = "Sales"
    FpSpread1.ActiveSheetView.Cells(1, 0).Text = "1st"
    FpSpread1.ActiveSheetView.Cells(1, 1).Text = "Jan"
    FpSpread1.ActiveSheetView.Cells(1, 3).Value = 1.7
    FpSpread1.ActiveSheetView.Cells(2, 1).Text = "Feb"
    FpSpread1.ActiveSheetView.Cells(2, 2).Text = "Wk1"
    FpSpread1.ActiveSheetView.Cells(2, 3).Value = 2.0
    FpSpread1.ActiveSheetView.Cells(3, 2).Text = "Wk2"
    FpSpread1.ActiveSheetView.Cells(3, 3).Value = 1.0
    FpSpread1.ActiveSheetView.Cells(4, 2).Text = "Wk3"
    FpSpread1.ActiveSheetView.Cells(4, 3).Value = 1.0
    FpSpread1.ActiveSheetView.Cells(5, 2).Text = "Wk4"
    FpSpread1.ActiveSheetView.Cells(5, 3).Value = 1.5
    FpSpread1.ActiveSheetView.Cells(6, 1).Text = "Mar"
    FpSpread1.ActiveSheetView.Cells(6, 3).Value = 3.0
    FpSpread1.ActiveSheetView.Cells(7, 0).Text = "2nd"
    FpSpread1.ActiveSheetView.Cells(7, 1).Text = "Apr"
    FpSpread1.ActiveSheetView.Cells(7, 3).Value = 1.1
    FpSpread1.ActiveSheetView.Cells(8, 1).Text = "May"
    FpSpread1.ActiveSheetView.Cells(8, 3).Value = 2.8
    FpSpread1.ActiveSheetView.Cells(9, 1).Text = "Jun"
    FpSpread1.ActiveSheetView.Cells(9, 3).Value = 1.3
    FpSpread1.ActiveSheetView.Cells(10, 0).Text = "3rd"
    FpSpread1.ActiveSheetView.Cells(10, 1).Text = "July"
    FpSpread1.ActiveSheetView.Cells(10, 3).Value = 1.7
    FpSpread1.ActiveSheetView.Cells(11, 1).Text = "Aug"
    FpSpread1.ActiveSheetView.Cells(11, 3).Value = 1.6
    FpSpread1.ActiveSheetView.Cells(12, 1).Text = "Sept"
    FpSpread1.ActiveSheetView.Cells(12, 3).Value = 2.1
    FpSpread1.ActiveSheetView.Cells(13, 0).Text = "4th"
    FpSpread1.ActiveSheetView.Cells(13, 1).Text = "Oct"
    FpSpread1.ActiveSheetView.Cells(13, 3).Value = 1.4
    FpSpread1.ActiveSheetView.Cells(14, 1).Text = "Nov"
    FpSpread1.ActiveSheetView.Cells(14, 3).Value = 2.0
    FpSpread1.ActiveSheetView.Cells(15, 1).Text = "Dec"
    FpSpread1.ActiveSheetView.Cells(15, 2).Text = "Wk1"
    FpSpread1.ActiveSheetView.Cells(15, 3).Value = 3.0
    FpSpread1.ActiveSheetView.AddChart(New FarPoint.Web.Spread.Model.CellRange(0, 0, 16, 4), GetType(FarPoint.Web.Chart.TreemapSeries), 550, 450, 300, 0)
    Dim treeseries As FarPoint.Web.Chart.TreemapSeries = DirectCast(FpSpread1.Sheets(0).Charts(0).Model.PlotAreas(0).Series(0), FarPoint.Web.Chart.TreemapSeries)
    treeseries.Fills.AddRange(New FarPoint.Web.Chart.Fill() {New FarPoint.Web.Chart.SolidFill(System.Drawing.Color.MediumSeaGreen), Nothing, Nothing, Nothing, Nothing})

     

     

    Copyright © 2022 GrapeCity, Inc. All rights reserved.

    Product Support Forum | Print this page