Choose an item

Stacked charts

Now, let's learn how to create a Stacked Chart. We will create a chart showcasing revenue split for each quarter of the current year by product category - food products and non-food products. The data will look as shown below:

Quarter Product Type Revenue(in USD)
Q1 Food Products 11000
Non-Food Products 11400
Q2 Food Products 15000
Non-Food Products 14800
Q3 Food Products 13500
Non-Food Products 8300
Q4 Food Products 15000
Non-Food Products 11800

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the stacked chart.

Render the Chart

Create the StackedChart.aspx.cs file and do the following:

  • Include the FusionCharts.DataEngine and FusionCharts.Visualization .dll files.
  • Create DataTable.
  • Retrieve data using database query.
  • Set server name.
  • Set DataBase name.
  • Connect with DataBase using a connection string.
  • Create StaticSource using the data table.
  • Create an instance of DataModel class.
  • Add DataSource to the DataModel.
  • Instantiate Stacked Chart.
  • Set chart width.
  • Set chart height.
  • Set the type of stacked chart as BAR, COLUMN, or AREA.
  • Set DataModel instance as the data source of the chart.
  • Set Chart title.
  • Finally, use a container using <div> to render the chart.

The code is shown below:


using FusionCharts.DataEngine;
using FusionCharts.Visualization;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace FusionChartsVisualisationWebFormsSamples.Samples 
{
    public partial class StackedChart : System.Web.UI.Page 
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable ChartData = new DataTable();
            ChartData.Columns.Add("Quarter", typeof(System.String));
            ChartData.Columns.Add("Food Products", typeof(System.Double));
            ChartData.Columns.Add("Non-Food Products", typeof(System.Double));
            ChartData.Rows.Add("Q1", 11000, 11400);
            ChartData.Rows.Add("Q2", 15000, 14800);
            ChartData.Rows.Add("Q3", 13500, 8300);
            ChartData.Rows.Add("Q4", 15000, 11800);
            StaticSource source = new StaticSource(ChartData);
            DataModel model = new DataModel();
            model.DataSources.Add(source);
            Charts.StackedChart stack = new Charts.StackedChart("stacked_chart_db");
            stack.Width.Pixel(700);
            stack.Height.Pixel(400);
            stack.Caption.Text = "Revenue split by product aategory";
            stack.Caption.Bold = true;
            stack.SubCaption.Text = "for current year";
            stack.XAxis.Text = "Quarter";
            stack.YAxis.Text = "Revenue";
            stack.Data.Source = model;
            stack.ThemeName = FusionChartsTheme.ThemeName.FUSION;
            // Render the chart to 'Literal1' literal control
            Literal1.Text = column.Render();
        }
    }
}




Imports FusionCharts.DataEngine
Imports FusionCharts.Visualization
Imports System
Imports System.Collections.Generic
Imports System.Data
Imports System.Data.SqlClient
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls

Namespace FusionChartsVisualisationWebFormsSamples.Samples
    Public Partial Class StackedChart
        Inherits System.Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            Dim ChartData As DataTable = New DataTable()
            ChartData.Columns.Add("Quarter", GetType(System.String))
            ChartData.Columns.Add("Food Products", GetType(System.Double))
            ChartData.Columns.Add("Non-Food Products", GetType(System.Double))
            ChartData.Rows.Add("Q1", 11000, 11400)
            ChartData.Rows.Add("Q2", 15000, 14800)
            ChartData.Rows.Add("Q3", 13500, 8300)
            ChartData.Rows.Add("Q4", 15000, 11800)
            Dim source As StaticSource = New StaticSource(ChartData)
            Dim model As DataModel = New DataModel()
            model.DataSources.Add(source)
            Dim stack As Charts.StackedChart = New Charts.StackedChart("stacked_chart_db")
            stack.Width.Pixel(700)
            stack.Height.Pixel(400)
            stack.Caption.Text = "Revenue split by product aategory"
            stack.Caption.Bold = True
            stack.SubCaption.Text = "for current year"
            stack.XAxis.Text = "Quarter"
            stack.YAxis.Text = "Revenue"
            stack.Data.Source = model
            stack.ThemeName = FusionChartsTheme.ThemeName.FUSION
            Literal1.Text = column.Render()
        End Sub
    End Class
End Namespace

The .aspx template for the above sample is shown below:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title></title>
  </head>
  <body>
    <script
      type="text/javascript"
      src="//cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"
    ></script>
    <script
      type="text/javascript"
      src="//cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"
    ></script>
    <form id="form1" runat="server">
      <div>
        <asp:Literal ID="Literal1" runat="server"></asp:Literal>
      </div>
      <div>
        <input
          type="button"
          value="Samples"
          onclick="location.href = 'Index.aspx';"
        />
      </div>
    </form>
  </body>
</html>