How to implement stacked bar chart using high charts in ASP.NET

Question

0.00/5 (No votes)

See more:

, +

I have a table with following records
Where Status A for All Applicaion,V for Valid Applicaion
and I for Invalid Applicaion

HTML

<pre><table>
        <tr>
            <td>
                StateName
            </td>

            <td>
                AppType

            </td>
            <td>
                Count

            </td>
            <td>
                AppStatus

            </td>

        </tr>
        <tr>
            <td>UP</td>
            <td>IND</td>
            <td>10</td>
            <td>V</td>
        </tr>
        <tr>
            <td>UP</td>
            <td>IND</td>
            <td>20</td>
            <td>I</td>
        </tr>
        <tr>
            <td>UP</td>
            <td>IND</td>
            <td>30</td>
            <td>A</td>
        </tr>
        <tr>
            <td>UP</td>
            <td>INF</td>
            <td>5</td>
            <td>V</td>
        </tr>
        <tr>
            <td>UP</td>
            <td>INF</td>
            <td>15</td>
            <td>I</td>
        </tr>
        <tr>
            <td>UP</td>
            <td>INF</td>
            <td>20</td>
            <td>A</td>
        </tr>
        <tr>
            <td>UP</td>
            <td>MIN</td>
            <td>6</td>
            <td>V</td>
        </tr>
        <tr>
            <td>UP</td>
            <td>MIN</td>
            <td>16</td>
            <td>I</td>
        </tr>
        <tr>
            <td>UP</td>
            <td>MIN</td>
            <td>22</td>
            <td>A</td>
        </tr>
        <tr>
            <td>MP</td>
            <td>IND</td>
            <td>10</td>
            <td>V</td>
        </tr>
        <tr>
            <td>MP</td>
            <td>IND</td>
            <td>20</td>
            <td>I</td>
        </tr>
        <tr>
            <td>MP</td>
            <td>IND</td>
            <td>30</td>
            <td>A</td>
        </tr>
        <tr>
            <td>MP</td>
            <td>INF</td>
            <td>5</td>
            <td>V</td>
        </tr>
        <tr>
            <td>MP</td>
            <td>INF</td>
            <td>15</td>
            <td>I</td>
        </tr>
        <tr>
            <td>MP</td>
            <td>INF</td>
            <td>20</td>
            <td>A</td>
        </tr>
        <tr>
            <td>MP</td>
            <td>MIN</td>
            <td>100</td>
            <td>V</td>
        </tr>
        <tr>
            <td>MP</td>
            <td>MIN</td>
            <td>100</td>
            <td>I</td>
        </tr>
        <tr>
            <td>MP</td>
            <td>MIN</td>
            <td>200</td>
            <td>A</td>
        </tr>
    </table>

I want to make high charts like following
Basic bar | Highcharts[^]

What I have tried:

In c#

C#

private void GetMainChartStateWiseAppCountForAll()
   {

   public StringBuilder Str_StateWiseAppCountINDA = new StringBuilder();   //IND all
   public StringBuilder Str_StateWiseAppCountINFA = new StringBuilder();   //INF all
   public StringBuilder Str_StateWiseAppCountMINA = new StringBuilder();   //MIN all

   public StringBuilder Str_StateWiseAppCountINDV = new StringBuilder();   //IND valid
   public StringBuilder Str_StateWiseAppCountINFV = new StringBuilder();   //INF valid
   public StringBuilder Str_StateWiseAppCountMINV = new StringBuilder();   //MIN valid

   public StringBuilder Str_StateWiseAppCountINDI = new StringBuilder();   //IND invalid
   public StringBuilder Str_StateWiseAppCountINFI = new StringBuilder();   //INF invalid
   public StringBuilder Str_StateWiseAppCountMINI = new StringBuilder();   //MIN invalid

   public string Str_StateWiseAppCountINDColor = "rgb(255, 144, 80)";      //for IND stack color
   public string Str_StateWiseAppCountINFColor = "rgb(9, 78, 127)";        //for INF stack color
   public string Str_StateWiseAppCountMINColor = "rgb(9, 78, 0)";      //for MIN stack color
   public StringBuilder Str_Category = new StringBuilder();            //FOR XAXIS CATEGORY ARRAY
       try
       {
           StateWiseAppCountForAll obj_stateWiseAppCount = new StateWiseAppCountForAll();

           List<StateWiseAppCountForAll> list_tempStateWiseAppCountBLL = null;
           list_tempStateWiseAppCountBLL = obj_stateWiseAppCount.GetAll();
           if (list_tempStateWiseAppCountBLL != null)
           {
               List<string> tempString = new List<string>();
               for (int i = 0; i < list_tempStateWiseAppCountBLL.Count; i++)
               {
                   if(tempString.Contains(list_tempStateWiseAppCountBLL[i].categories))
                   tempString.Add(list_tempStateWiseAppCountBLL[i].categories);
               }



               StringBuilder sb = new StringBuilder();
               sb.Append("<script>");
               sb.Append("var testArray = new Array;");
               foreach (string str in tempString)
               {
                   sb.Append("testArray.push('" + str + "');");
               }
               sb.Append("</script>");
               ClientScript.RegisterStartupScript(this.GetType(), "TestArrayScript", sb.ToString());


               Str_StateWiseAppCountINDA.Append(new JavaScriptSerializer().Serialize(list_tempStateWiseAppCountBLL.Where(c => c.AppTypeCode == Convert.ToInt32(ApplicationTypeOption.IND) && c.Flage == 'A').ToList()));
               if (Str_StateWiseAppCountINDA.ToString() == "")
                   Str_StateWiseAppCountINDA.Append("''");
               Str_StateWiseAppCountINFA.Append(new JavaScriptSerializer().Serialize(list_tempStateWiseAppCountBLL.Where(c => c.AppTypeCode == Convert.ToInt32(ApplicationTypeOption.INF) && c.Flage == 'A').ToList()));
               if (Str_StateWiseAppCountINFA.ToString() == "")
                   Str_StateWiseAppCountINFA.Append("''");
               Str_StateWiseAppCountMINA.Append(new JavaScriptSerializer().Serialize(list_tempStateWiseAppCountBLL.Where(c => c.AppTypeCode == Convert.ToInt32(ApplicationTypeOption.MIN) && c.Flage == 'A').ToList()));
               if (Str_StateWiseAppCountMINA.ToString() == "")
                   Str_StateWiseAppCountMINA.Append("''");




               Str_StateWiseAppCountINDV.Append(new JavaScriptSerializer().Serialize(list_tempStateWiseAppCountBLL.Where(c => c.AppTypeCode == Convert.ToInt32(ApplicationTypeOption.IND) && c.Flage == 'V').ToList()));
               if (Str_StateWiseAppCountINDV.ToString() == "")
                   Str_StateWiseAppCountINDV.Append("''");
               Str_StateWiseAppCountINFV.Append(new JavaScriptSerializer().Serialize(list_tempStateWiseAppCountBLL.Where(c => c.AppTypeCode == Convert.ToInt32(ApplicationTypeOption.INF) && c.Flage == 'V').ToList()));
               if (Str_StateWiseAppCountINFV.ToString() == "")
                   Str_StateWiseAppCountINFV.Append("''");
               Str_StateWiseAppCountMINV.Append(new JavaScriptSerializer().Serialize(list_tempStateWiseAppCountBLL.Where(c => c.AppTypeCode == Convert.ToInt32(ApplicationTypeOption.MIN) && c.Flage == 'V').ToList()));
               if (Str_StateWiseAppCountMINV.ToString() == "")
                   Str_StateWiseAppCountMINV.Append("''");




               Str_StateWiseAppCountINDI.Append(new JavaScriptSerializer().Serialize(list_tempStateWiseAppCountBLL.Where(c => c.AppTypeCode == Convert.ToInt32(ApplicationTypeOption.IND) && c.Flage == 'I').ToList()));
               if (Str_StateWiseAppCountINDI.ToString() == "")
                   Str_StateWiseAppCountINDI.Append("''");
               Str_StateWiseAppCountINFI.Append(new JavaScriptSerializer().Serialize(list_tempStateWiseAppCountBLL.Where(c => c.AppTypeCode == Convert.ToInt32(ApplicationTypeOption.INF) && c.Flage == 'I').ToList()));
               if (Str_StateWiseAppCountINFI.ToString() == "")
                   Str_StateWiseAppCountINFI.Append("''");
               Str_StateWiseAppCountMINI.Append(new JavaScriptSerializer().Serialize(list_tempStateWiseAppCountBLL.Where(c => c.AppTypeCode == Convert.ToInt32(ApplicationTypeOption.MIN) && c.Flage == 'I').ToList()));
               if (Str_StateWiseAppCountMINI.ToString() == "")
                   Str_StateWiseAppCountMINI.Append("''");
           }
       }
       catch (Exception ex)
       {
       }
   }

In aspx page

ASP.NET

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script src="jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="../../../css/Chart/bootstrap.min.css" />
    <link href="jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="keen-dashboards.css" rel="stylesheet" type="text/css" />

    <script src="HighChart/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="bootstrap.min.js"></script>
    <script type="text/javascript" src="Scripts/holder.js"></script>
    <script type="text/javascript">
        Holder.add_theme("white", { background: "#fff", foreground: "#a7a7a7", size: 10 });
    </script>
    <script src="highcharts.js" type="text/javascript"></script>
    <script src="highcharts-more.js" type="text/javascript"></script>
    <script src="highcharts-3d.js" type="text/javascript"></script>
    <script src="exporting.js" type="text/javascript"></script>

    <script src="drilldown.js" type="text/javascript"></script>
    <script src="data.js" type="text/javascript"></script>
    <script src="jquery-ui.min.js" type="text/javascript"></script>

   
    <script type="text/javascript">
        $(document).ready(function () {
            Highcharts.setOptions(
                   {
                      colors: ['#094e7f ', '#D92525', '#63A01F', '#FCB711', '#FD5E1E', '#6460AA', '#677300', '#CC004C', '#005391', '#8A1525', '#3C4C00', '#0E3D59']
                    });
            
            MainChartStateWiseAppCountHori();
        });     

        function MainChartStateWiseAppCountHori() {
            if (testArray)
            {
                // do something with testArray
        
                var cat = [];
                var data=testArray  ;
                //                alert(data);
                data.forEach(function(item) {
                    // alert(item);
                    cat.push(item);

                });
            }


            Highcharts.chart('MainChartStateWiseAppCount', {
                chart: {
                    type: 'bar',
                    
                }, //chart
                    
                title: {
                    align: 'center',
                    text: 'State Wise Application Count For New NOC',
                    style: '{ "color": "#214900" }'


                } //title
                   , xAxis: {
                       type:'categories',
                       categories:cat,
                       title: {
                           text: 'States Name'
                       }
                   
                   } //xAxis
                   ,
                yAxis: {
                    min: 0,
                    //                    type: 'category',
                    title: {
                        text: 'Total Application'
                    },
                   
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold', color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                }//yAxis
                    , 
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -40,
                    y: 80,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor:
                        Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
                    shadow: true
                },
                tooltip: {
                    animation: true,
                    shadow: true,
                    
                    headerFormat: '', pointFormat: '{point.FullName}<br/>{series.name}: {point.y}<br/>Total: {point.stackTotal}'
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    },
                   
                    series: {
                        animation: {
                            duration: 2000
                        },
                        stacking:'normal'
                    }
                }                   
                ,series: [                  

                                    {       name: 'Industrial',color:'<%= Str_StateWiseAppCountINDColor.ToString() %>', 
                                        data: <%= Str_StateWiseAppCountINDA.ToString() %>
                                        ,stack:'ALL'  

                                    }
                                            
                                            ,{
                                                name: 'Infrastructure',  color:'<%= Str_StateWiseAppCountINFColor.ToString() %>', 
                                                data: <%= Str_StateWiseAppCountINFA.ToString() %>  
                                                ,stack:'ALL'      
                                            } 
                                            
                                            
                                            ,{
                                                name: 'Mining',  color:'<%= Str_StateWiseAppCountMINColor.ToString() %>',
                                                data: <%= Str_StateWiseAppCountMINA.ToString() %>
                                                ,stack:'ALL' 
                                            }   
                                            
                                            
                                            
                                            ,   {       name: 'BeforeExpire',color:'<%= Str_StateWiseAppCountINDColor.ToString() %>', 
                                                data: <%= Str_StateWiseAppCountINDV.ToString() %>
                                                ,stack:'BeforeExpire'     

                                            }
                                            
                                            ,{
                                                name: 'BeforeExpire',  color:'<%= Str_StateWiseAppCountINFColor.ToString() %>', 
                                                data: <%= Str_StateWiseAppCountINFV.ToString() %>  
                                                ,stack:'BeforeExpire'     
                                            } 
                                            
                                            
                                            ,{
                                                name: 'BeforeExpire',  color:'<%= Str_StateWiseAppCountMINColor.ToString() %>',
                                                data: <%= Str_StateWiseAppCountMINV.ToString() %>
                                                ,stack:'BeforeExpire'     
                                            }    
                                            
                                            
                                            
                                              
                                            ,   {       name: 'AfterExpire',color:'<%= Str_StateWiseAppCountINDColor.ToString() %>', 
                                                data: <%= Str_StateWiseAppCountINDI.ToString() %>
                                                ,stack:'AfterExpire'     

                                            }
                                            
                                            ,{
                                                name: 'AfterExpire',  color:'<%= Str_StateWiseAppCountINFColor.ToString() %>', 
                                                data: <%= Str_StateWiseAppCountINFI.ToString() %>  
                                                ,stack:'AfterExpire'     
                                            } 
                                            
                                            
                                            ,{
                                                name: 'AfterExpire',  color:'<%= Str_StateWiseAppCountMINColor.ToString() %>',
                                                data: <%= Str_StateWiseAppCountMINI.ToString() %>
                                                ,stack:'AfterExpire'     
                                            }                                                          
                                                  
                ]
                                                    
            });

        }

    </script>
</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> 
    <table width="100%" style="line-height: 25px">       
        <tr>
            <td colspan="2">
                <div id="MainChartStateWiseAppCount">
                </div>
            </td>
        </tr>
    </table>   
</asp:Content>

Posted 15-Jan-20 17:35pm

Member 7909353

Updated 19-Jan-20 20:12pm

Add a Solution

Comments

Richard Deeming 16-Jan-20 11:31am

You seem to have forgotten to ask a question.

You've told us what you want to do, and you've shown us what you've tried; but you haven't told us what the problem is, or where you're stuck.

Member 7909353 16-Jan-20 22:02pm

It shows high charts column type ,I want stacked bar chart

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 7909353 · Accepted Answer · 2020-01-19T20:13:00

In .aspx

  <script type="text/javascript">
        $(document).ready(function () {
            GetStateWiseAppCountForAll();
           
        });

 function GetStateWiseAppCountForAll() {

            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "WebService.asmx/GetStateWiseAppCountForAll",
                data: "{}",
                dataType: "json",
                success: OnSuccess_StateWiseAppCountForAll,
                error: OnErrorCall_StateWiseAppCountForAll
            });
        }
<pre>  function OnSuccess_StateWiseAppCountForAll(Result) {
            Result = Result.d;
            var series = [];

            var categories = [];
            var INDA = [];
            var INFA = [];
            var MINA = [];

            var INDV = [];
            var INFV = [];
            var MINV = [];

            var INDI = [];
            var INFI = [];
            var MINI = [];

            for (var i in Result) {
                categories.push(Result[i].categories);
                INDA.push(Result[i].INDA);
                INFA.push(Result[i].INFA);
                MINA.push(Result[i].MINA);

                INDV.push(Result[i].INDV);
                INFV.push(Result[i].INFV);
                MINV.push(Result[i].MINV);

                INDI.push(Result[i].INDI);
                INFI.push(Result[i].INFI);
                MINI.push(Result[i].MINI);
            }
            
           

            series.push({
                name: 'Industrial',
                color: '<%= Str_StateWiseAppCountINDColor.ToString() %>',
                data: INDA
                , stack: 'All'
            },
                               {
                                   name: 'Infrastructure',
                                   color: '<%= Str_StateWiseAppCountINFColor.ToString() %>',
                                   data: INFA
                                   , stack: 'All'
                               },
                               {
                                   name: 'Mining',
                                   color: '<%= Str_StateWiseAppCountMINColor.ToString() %>',
                                   data: MINA
                                   , stack: 'All'
                               }
                               ,
                               {
                                   name: 'Industrial Before Expire',
                                   color: '<%= Str_StateWiseAppCountINDColor.ToString() %>',
                                   data: INDV,
                                   stack: 'Valid Data'
                               }
                               ,
                               {
                                   name: 'Infrastructure Before Expire',
                                   color: '<%= Str_StateWiseAppCountINFColor.ToString() %>',
                                   data: INFV,
                                   stack: 'Valid Data'
                               }
                               ,
                               {
                                   name: 'Mining Before Expire',
                                   color: '<%= Str_StateWiseAppCountMINColor.ToString() %>',
                                   data: MINV,
                                   stack: 'Valid Data'
                               }

                                ,
                               {
                                   name: 'Industrial After Expire',
                                   color: '<%= Str_StateWiseAppCountINDColor.ToString() %>',
                                   data: INDI,
                                   stack: 'Invalid Data'
                               }
                                ,
                               {
                                   name: 'Infrastructure After Expire',
                                   color: '<%= Str_StateWiseAppCountINFColor.ToString() %>',
                                   data: INFI,
                                   stack: 'Invalid Data'
                               }
                                ,
                               {
                                   name: 'Mining After Expire',
                                   color: '<%= Str_StateWiseAppCountMINColor.ToString() %>',
                                   data: MINI,
                                   stack: 'Invalid Data'
                               }
                   );
                               BindChart(categories, series);
            
                           }
<pre> function BindChart(categories, series) {

                               var chart = {
                                   type: 'bar'
                                   , height: 1400
                               };
                               var title = {
                                   text: 'State Wise Application Count For New NOC'
                               };
                               var subtitle = {
                                   text: 'subtitle'
                               };
                               var xAxis = {
                                   
                                   categories: categories,
                                   title: {
                                       text: 'State Name'
                                   }
                               };
                               var yAxis = {
                                   min: 0,
                                   title: {
                                       text: 'Total Application',
                                       align: 'high'
                                   },
                                   labels: {
                                       overflow: 'justify'
                                   }
                               };
                               var tooltip = {
                                   //valueSuffix: ' millions',
                                   animation: true,
                                   shadow: true,
                                   //headerFormat: '{series.name}<br/>',
                                   pointFormat: '{point.FullName}<br/>{series.name}: {point.y}<br/>Total: {point.stackTotal}'
                               };
                               var plotOptions = {
                                   bar: {
                                       pointPadding: 0.1,
                                       borderRadius: 1,
                                       stacking: 'normal',
                                       dataLabels: {
                                           enabled: true
                                       }
                                   },
                                   series: {
                                       stacking: 'normal'
                                   }
                               };
                              

                               var legend = { align: 'right', x: 5, verticalAlign: 'bottom', y: 20, floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', borderColor: '#CCC', borderWidth: 1, shadow: false };
                               var credits = {
                                   enabled: false
                               };
                              
                               
                               var series = series;
                               var json = {};
                               json.chart = chart;
                               json.title = title;
                               json.subtitle = subtitle;
                               json.tooltip = tooltip;
                               json.xAxis = xAxis;
                               json.yAxis = yAxis;
                               json.series = series;
                               json.plotOptions = plotOptions;
                               json.legend = legend;
                               json.credits = credits;
                               $('#container2').highcharts(json);
                           }

function OnErrorCall_StateWiseAppCountForAll(response) {
alert("Whoops something went wrong!");

}