Display HighCharts bar chart using jQuery highcharts plugin in ASP.Net

Last Reply one year ago By dharmendr

Posted one year ago

i try to use high charts to get result from database usig store procedure i use entity farmework and also i add properties

i get result on x axis but now i try to get series

i use this method

[WebMethod]
public static string jqufunc()
{
    string res = "[";
  ProjectdbEntities a = new ProjectdbEntities();

  var b = a.Catg_type;
    foreach (var c in b)
    {

        res += "'" + c.Catg_type1 + "',";
    }
    res = res.Substring(0, res.Length - 1);
    res += "]";
    return res;

}

to fetch result on x axis

then i try this

<script type="text/javascript">

    $(document).ready(function () {

    var webmethod = "WebForm1.aspx/jqufunc";

    $.ajax({
            type: "POST",
            url: webmethod,
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (response) {
                alert(response.d);

                //Start

                chart = new Highcharts.Chart({
       chart: {
                type: 'bar',
                renderTo: 'container',

            }, 
       title: {  
         text: 'Studentinfo'  
       },  

      xAxis: {  
          categories:  eval(response.d)


       },  

       yAxis: {
                title: {
                    text: 'Figures'
                }
            },

       plotOptions: {  
          column: {  
            pointPadding: 0.2,  
            borderWidth: 0  
          }  
        },
    series: [{
        name: 'Pentinum 4',
        data: [1, 0, 4]
    }, {
        name: 'Pentinum 3',
        data: [5, 7, 3]
    }, {
        name: 'Core i7',
        data: [6, 3, 4]
    }] 
      });  

i hard code this series this series not get from database but now i get series from database please check image

chart image. in this image what i want to get 

i get this result from sp

Catg_type        Prog_name  total_students
Management        BBA              3
Finance           BS-AF             4
ComputerScience   BSCS              3
Management         MBA              2
Finance            MBA-Finance      2
ComputerScience    MS-IT             2
Posted one year ago Modified on 10 days ago

Here i have created sample using query. You have to get the list of studentInfos by entity framework.

SQL

CREATE PROCEDURE GetCategoriesChart
AS
BEGIN
	DECLARE @Categories AS TABLE(Catg_type VARCHAR(50),Prog_name VARCHAR(50),total_students INT)
	
	INSERT INTO @Categories VALUES('Management','BBA',3)
	INSERT INTO @Categories VALUES('Finance','BS-AF',2)
	INSERT INTO @Categories VALUES('ComputerScience','BBA',3)
	INSERT INTO @Categories VALUES('Management','BS-AF',2)
	INSERT INTO @Categories VALUES('Finance','BBA',4)	
	INSERT INTO @Categories VALUES('ComputerScience','BS-AF',2)
	INSERT INTO @Categories VALUES('ComputerScience','MS-IT',2)
	INSERT INTO @Categories VALUES('Finance','MS-IT',5)
	INSERT INTO @Categories VALUES('Management','MS-IT',6)
	SELECT * FROM @Categories
END

HTML

<div id="container">
</div>
<div>
    <script src="Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/highcharts.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Services/HighchartService.asmx/StudentAnalysis",
                data: "{}",
                dataType: "json",
                success: function (Result) {
                    Result = Result.d;
                    var uniqueCat = [];
                    var uniqueProgName = [];
                    $.map(Result, function (ele) {
                        if (uniqueCat.indexOf(ele.CatgType) == -1)
                            uniqueCat.push(ele.CatgType);
                        if (uniqueProgName.indexOf(ele.ProgName) == -1)
                            uniqueProgName.push(ele.ProgName);
                    });
                    var seriesData = [];
                    $.each(uniqueProgName, function () {
                        var series = {};
                        var progName = $(this)[0];
                        series.name = progName;
                        var s = $.grep(Result, function (e) {
                            return e.ProgName == progName;
                        });
                        series.data = $.map(s, function (e) { return e.totalStudents });
                        seriesData.push(series);
                    });
                    DreawChart(uniqueCat, seriesData);
                },
                error: function (Result) {
                    alert("Error");
                }
            });
        });

        function DreawChart(series, seriesData) {
            $('#container').highcharts({
                chart: {
                    type: 'bar',
                    renderTo: 'container'
                },
                title: {
                    text: 'Studentinfo'
                }, xAxis: {
                    categories: eval(series)
                },
                yAxis: {
                    title: {
                        text: 'Figures'
                    }
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: JSON.parse(JSON.stringify(seriesData))
            });
        }
    </script>
</div>

Code

public class Category
{
    public string CatgType { get; set; }
    public string ProgName { get; set; }
    public int totalStudents { get; set; }
}

[WebMethod]
public List<Category> FruitAnalysis()
{
    List<Category> studentInfos = new List<Category>();
    DataSet ds = new DataSet();
    using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[1].ConnectionString))
    {
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = "GetCategoriesChart";
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Connection = con;
            using (SqlDataAdapter da = new SqlDataAdapter(cmd))
            {
                da.Fill(ds, "Studentinfo");
            }
        }
    }
    if (ds != null)
    {
        if (ds.Tables.Count > 0)
        {
            if (ds.Tables["Studentinfo"].Rows.Count > 0)
            {
                foreach (DataRow dr in ds.Tables["Studentinfo"].Rows)
                {
                    studentInfos.Add(new Category
                    {
                        CatgType = dr["Catg_type"].ToString(),
                        ProgName = dr["Prog_name"].ToString(),
                        totalStudents = Convert.ToInt32(dr["total_students"])
                    });
                }
            }
        }
    }
    return studentInfos;
}

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html