Column and Bar charts

Let's create a Column 2D chart showing the "Most popular programming language".

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the column chart.

The data for the above chart is shown in the table below:

Programming Language	Users
Java	62000
Python	46000
Javascript	38000
C++	31000
C#	27000
PHP	14000
Perl	14000

Now that you have the tabular data ready, let's see how to render the chart.

Render the chart

Create the FirstChart.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 DataTable.
Create an instance of DataModel class.
Add DataSource to the DataModel.
Instantiate Column Chart
Set Chart's width and height
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 System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using FusionCharts.DataEngine;
using FusionCharts.Visualization;

namespace FusionChartsVisualisationWebFormsSamples.Samples
{
    public partial class FirstChart: System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            {
            DataTable ChartData = new DataTable();
            ChartData.Columns.Add("Programming Language", typeof(System.String));
            ChartData.Columns.Add("Users", typeof(System.Double));
            ChartData.Rows.Add("Java",62000);
            ChartData.Rows.Add("Python",46000);
            ChartData.Rows.Add("Javascript",38000);
            ChartData.Rows.Add("C++",31000);
            ChartData.Rows.Add("C#",27000);
            ChartData.Rows.Add("PHP",14000);
            ChartData.Rows.Add("Perl",14000);

            // Create static source with this data table
            StaticSource source = new StaticSource(ChartData);
            // Create instance of DataModel class
            DataModel model = new DataModel();
            // Add DataSource to the DataModel
            model.DataSources.Add(source);
            // Instantiate Column Chart
            Charts.ColumnChart column = new Charts.ColumnChart("first_chart");
            // Set Chart's width and height
            column.Width.Pixel(700);
            column.Height.Pixel(400);
            // Set DataModel instance as the data source of the chart
            column.Data.Source = model;
            // Set Chart Title
            column.Caption.Text = "Most popular programming language";
            // Sset chart sub title
            column.SubCaption.Text = "2017-2018";
            // hide chart Legend
            column.Legend.Show = false;
            // set XAxis Text
            column.XAxis.Text = "Programming Language";
            // Set YAxis title
            column.YAxis.Text = "User";
            column.ThemeName = FusionChartsTheme.ThemeName.FUSION;
            // Render the chart to 'Literal1' literal control
            Literal1.Text = column.Render();
        }
    }
}


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

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

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            If True Then
                Dim ChartData As DataTable = New DataTable()
                ChartData.Columns.Add("Programming Language", GetType(System.String))
                ChartData.Columns.Add("Users", GetType(System.Double))
                ChartData.Rows.Add("Java", 62000)
                ChartData.Rows.Add("Python", 46000)
                ChartData.Rows.Add("Javascript", 38000)
                ChartData.Rows.Add("C++", 31000)
                ChartData.Rows.Add("C#", 27000)
                ChartData.Rows.Add("PHP", 14000)
                ChartData.Rows.Add("Perl", 14000)
                Dim source As StaticSource = New StaticSource(ChartData)
                Dim model As DataModel = New DataModel()
                model.DataSources.Add(source)
                Dim column As Charts.ColumnChart = New Charts.ColumnChart("first_chart")
                column.Width.Pixel(700)
                column.Height.Pixel(400)
                column.Data.Source = model
                column.Caption.Text = "Most popular programming language"
                column.SubCaption.Text = "2017-2018"
                column.Legend.Show = False
                column.XAxis.Text = "Programming Language"
                column.YAxis.Text = "User"
                column.ThemeName = FusionChartsTheme.ThemeName.FUSION
                Literal1.Text = column.Render()
            End If
        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>
           </form>
</body>
</html>

Scroll Column chart

Now, let's learn how to create a Scrollable Column Chart. We will create a chart showcasing sales trends of a company in the Financial Year 2016-17. The data will look as shown below:

Month	Sales
Jan 2016	27400
Feb 2016	29800
Mar 2016	25800
Apr 2016	26800
May 2016	29600
Jun 2016	32600
Jul 2016	31800
Aug 2016	36700
Sep 2016	29700
Oct 2016	31900
Nov 2016	34800
Dec 2016	24800
Jan 2017	26300
Feb 2017	31800
Mar 2017	30900
Apr 2017	33000
May 2017	36200
Jun 2017	32100
Jul 2017	37500
Aug 2017	38500
Sep 2017	35400
Oct 2017	38200
Nov 2017	33300
Dec 2017	38300

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the scroll column chart.

Render the Chart

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

Include the FusionCharts.DataEngine and FusionCharts.Visualization .dll files.
Create DataTable.
Retrieve data using database query.
Set serverName.
Set DataBase name.
Connect with DataBase using a connectionstring.
Create StaticSource using the DataTable.
Create an instance of DataModel class.
Add DataSource to the DataModel.
Instantiate column chart.
Set chart width.
Set chart height.
Set the Scrollable property of the chart to true.
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 ScrollChart : System.Web.UI.Page 
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable ChartData = new DataTable();
            ChartData.Columns.Add("Month", typeof(System.String));
            ChartData.Columns.Add("Revenue", typeof(System.Double));
            ChartData.Rows.Add("Jan 2016", 27400);
            ChartData.Rows.Add("Feb 2016", 29800);
            ChartData.Rows.Add("Mar 2016", 25800);
            ChartData.Rows.Add("Apr 2016", 26800);
            ChartData.Rows.Add("May 2016", 29600);
            ChartData.Rows.Add("Jun 2016", 32600);
            ChartData.Rows.Add("Jul 2016", 31800);
            ChartData.Rows.Add("Aug 2016", 36700);
            ChartData.Rows.Add("Sep 2016", 29700);
            ChartData.Rows.Add("Oct 2016", 31900);
            ChartData.Rows.Add("Nov 2016", 34800);
            ChartData.Rows.Add("Dec 2016", 24800);
            ChartData.Rows.Add("Jan 2017", 26300);
            ChartData.Rows.Add("Feb 2017", 31800);
            ChartData.Rows.Add("Mar 2017", 30900);
            ChartData.Rows.Add("Apr 2017", 33000);
            ChartData.Rows.Add("May 2017", 36200);
            ChartData.Rows.Add("Jun 2017", 32100);
            ChartData.Rows.Add("Jul 2017", 37500);
            ChartData.Rows.Add("Aug 2017", 38500);
            ChartData.Rows.Add("Sep 2017", 35400);
            ChartData.Rows.Add("Oct 2017", 38200);
            ChartData.Rows.Add("Nov 2017", 33300);
            ChartData.Rows.Add("Dec 2017", 38300);
            StaticSource source = new StaticSource(ChartData);
            DataModel model = new DataModel();
            model.DataSources.Add(source);
            Charts.ColumnChart column = new Charts.ColumnChart("scroll_chart_db");
            column.Scrollable = true;
            column.Data.Source = model;
            column.Caption.Text = "Sales Trends";
            column.SubCaption.Text = "2016-2017";
            column.XAxis.Text = "Month";
            column.YAxis.Text = "Revenue";
            column.Width.Pixel(600);
            column.Height.Pixel(500);
            column.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 ScrollChart
        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("Month", GetType(System.String))
            ChartData.Columns.Add("Revenue", GetType(System.Double))
            ChartData.Rows.Add("Jan 2016", 27400)
            ChartData.Rows.Add("Feb 2016", 29800)
            ChartData.Rows.Add("Mar 2016", 25800)
            ChartData.Rows.Add("Apr 2016", 26800)
            ChartData.Rows.Add("May 2016", 29600)
            ChartData.Rows.Add("Jun 2016", 32600)
            ChartData.Rows.Add("Jul 2016", 31800)
            ChartData.Rows.Add("Aug 2016", 36700)
            ChartData.Rows.Add("Sep 2016", 29700)
            ChartData.Rows.Add("Oct 2016", 31900)
            ChartData.Rows.Add("Nov 2016", 34800)
            ChartData.Rows.Add("Dec 2016", 24800)
            ChartData.Rows.Add("Jan 2017", 26300)
            ChartData.Rows.Add("Feb 2017", 31800)
            ChartData.Rows.Add("Mar 2017", 30900)
            ChartData.Rows.Add("Apr 2017", 33000)
            ChartData.Rows.Add("May 2017", 36200)
            ChartData.Rows.Add("Jun 2017", 32100)
            ChartData.Rows.Add("Jul 2017", 37500)
            ChartData.Rows.Add("Aug 2017", 38500)
            ChartData.Rows.Add("Sep 2017", 35400)
            ChartData.Rows.Add("Oct 2017", 38200)
            ChartData.Rows.Add("Nov 2017", 33300)
            ChartData.Rows.Add("Dec 2017", 38300)
            Dim source As StaticSource = New StaticSource(ChartData)
            Dim model As DataModel = New DataModel()
            model.DataSources.Add(source)
            Dim column As Charts.ColumnChart = New Charts.ColumnChart("scroll_chart_db")
            column.Scrollable = True
            column.Data.Source = model
            column.Caption.Text = "Sales Trends"
            column.SubCaption.Text = "2016-2017"
            column.XAxis.Text = "Month"
            column.YAxis.Text = "Revenue"
            column.Width.Pixel(600)
            column.Height.Pixel(500)
            column.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>

Overlapped charts

Now, let's learn how to create an Overlapped Chart. We will create a chart showcasing Major League Baseball Rankings. The data will look as shown below:

Teams	Matches	Wins
Boston Red Sox	88	57
New York Yankees	84	54
Tampa Bay Rays	86	42
Toronto Blue Jays	86	39
Baltimore Orioles	85	24
Cleveland Indians	85	46
Detroit Tigers	88	38
Minnesota Twins	83	35
Chicago White Sox	86	29
Kansas City Royals	86	25

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the overlapped chart.

Render the Chart

Create the OverlappedChart.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 column or bar chart.
Set chart width.
Set chart height.
Set the type of column or bar chart as overlapped.
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 OverlappedChart : System.Web.UI.Page 
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable ChartData = new DataTable();
            ChartData.Columns.Add("Team", typeof(System.String));
            ChartData.Columns.Add("Matches", typeof(System.Double));
            ChartData.Columns.Add("Wins", typeof(System.Double));
            ChartData.Rows.Add("Boston Red Sox", 88, 57);
            ChartData.Rows.Add("New York Yankees", 84, 54);
            ChartData.Rows.Add("Tampa Bay Rays", 86, 42);
            ChartData.Rows.Add("Toronto Blue Jays", 86, 39);
            ChartData.Rows.Add("Baltimore Orioles", 85, 24);
            ChartData.Rows.Add("Cleveland Indians", 85, 46);
            ChartData.Rows.Add("Detroit Tigers", 88, 38);
            ChartData.Rows.Add("Minnesota Twins", 83, 35);
            ChartData.Rows.Add("Chicago White Sox", 86, 29);
            ChartData.Rows.Add("Kansas City Royals", 86, 25);
            StaticSource source = new StaticSource(ChartData);
            DataModel model = new DataModel();
            model.DataSources.Add(source);
            Charts.ColumnChart OverlappedColumn = new Charts.ColumnChart("overlapped_chart_db");
            OverlappedColumn.Overlapped = true;
            OverlappedColumn.Data.Source = model;
            OverlappedColumn.Caption.Text = "Major League Baseball - Season Rankings";
            OverlappedColumn.SubCaption.Text = "Teams in the Lead";
            OverlappedColumn.Caption.Text = "Major league Baseball-Season Rankings";
            OverlappedColumn.SubCaption.Text = "Teams in the lead";
            OverlappedColumn.XAxis.Text = "Position";
            OverlappedColumn.YAxis.Text = "Team";
            OverlappedColumn.Width.Pixel(600);
            OverlappedColumn.Height.Pixel(500);
            OverlappedColumn.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 OverlappedChart
        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("Team", GetType(System.String))
            ChartData.Columns.Add("Matches", GetType(System.Double))
            ChartData.Columns.Add("Wins", GetType(System.Double))
            ChartData.Rows.Add("Boston Red Sox", 88, 57)
            ChartData.Rows.Add("New York Yankees", 84, 54)
            ChartData.Rows.Add("Tampa Bay Rays", 86, 42)
            ChartData.Rows.Add("Toronto Blue Jays", 86, 39)
            ChartData.Rows.Add("Baltimore Orioles", 85, 24)
            ChartData.Rows.Add("Cleveland Indians", 85, 46)
            ChartData.Rows.Add("Detroit Tigers", 88, 38)
            ChartData.Rows.Add("Minnesota Twins", 83, 35)
            ChartData.Rows.Add("Chicago White Sox", 86, 29)
            ChartData.Rows.Add("Kansas City Royals", 86, 25)
            Dim source As StaticSource = New StaticSource(ChartData)
            Dim model As DataModel = New DataModel()
            model.DataSources.Add(source)
            Dim OverlappedColumn As Charts.ColumnChart = New Charts.ColumnChart("overlapped_chart_db")
            OverlappedColumn.Overlapped = True
            OverlappedColumn.Data.Source = model
            OverlappedColumn.Caption.Text = "Major League Baseball - Season Rankings"
            OverlappedColumn.SubCaption.Text = "Teams in the Lead"
            OverlappedColumn.Caption.Text = "Major league Baseball-Season Rankings"
            OverlappedColumn.SubCaption.Text = "Teams in the lead"
            OverlappedColumn.XAxis.Text = "Position"
            OverlappedColumn.YAxis.Text = "Team"
            OverlappedColumn.Width.Pixel(600)
            OverlappedColumn.Height.Pixel(500)
            OverlappedColumn.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>
    </form>
</body>
</html>

Bar Chart

Now, let's learn how to create a bar chart with the same data. The code remains the same as that of the column chart. The only difference is instead of instantiating a column chart you have to instantiate a bar chart. Create a barChart.aspx.cs and refer to the code below:


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

namespace FusionChartsVisualisationWebFormsSamples.Samples
{
    public partial class FirstChart: System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable ChartData = new DataTable();
            ChartData.Columns.Add("Programming Language", typeof(System.String));
            ChartData.Columns.Add("Users", typeof(System.Double));
            ChartData.Rows.Add("Java", 62000);
            ChartData.Rows.Add("Python", 46000);
            ChartData.Rows.Add("Javascript", 38000);
            ChartData.Rows.Add("C++", 31000);
            ChartData.Rows.Add("C#", 27000);
            ChartData.Rows.Add("PHP", 14000);
            ChartData.Rows.Add("Perl", 14000);
            // Create static source with this data table

            StaticSource source = new StaticSource(ChartData);

            // Create instance of DataModel class
            DataModel model = new DataModel();

            // Add DataSource to the DataModel
            model.DataSources.Add(source);

            // Instantiate bar Chart
            Charts.BarChart bar = new Charts.BarChart("bar_chart");

            // Set Chart's width and height
            bar.Width.Pixel(500);
            bar.Height.Pixel(400);

            // Set DataModel instance as the data source of the chart
            bar.Data.Source = model;

            // Set Chart Title
            bar.Caption.Text = "Most popular programming language";
            bar.ThemeName = FusionChartsTheme.ThemeName.FUSION;
            // Render the chart to 'Literal1' literal control
            Literal1.Text = column.Render();
        }
    }
}


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

Namespace FusionChartsVisualisationWebFormsSamples.Samples
    Public Partial Class FirstChart
        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("Programming Language", GetType(System.String))
            ChartData.Columns.Add("Users", GetType(System.Double))
            ChartData.Rows.Add("Java", 62000)
            ChartData.Rows.Add("Python", 46000)
            ChartData.Rows.Add("Javascript", 38000)
            ChartData.Rows.Add("C++", 31000)
            ChartData.Rows.Add("C#", 27000)
            ChartData.Rows.Add("PHP", 14000)
            ChartData.Rows.Add("Perl", 14000)
            Dim source As StaticSource = New StaticSource(ChartData)
            Dim model As DataModel = New DataModel()
            model.DataSources.Add(source)
            Dim bar As Charts.BarChart = New Charts.BarChart("bar_chart")
            bar.Width.Pixel(500)
            bar.Height.Pixel(400)
            bar.Data.Source = model
            bar.Caption.Text = "Most popular programming language"
            bar.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>

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the bar chart.

Column and Bar charts

Render the chart

Scroll Column chart

Render the Chart

Overlapped charts

Render the Chart

Bar Chart

Hi, I am Debargho. I wrote this article.

Explore

Integrations

Developers

Pricing

Resources

Company