Create Report By JSON Using DataBase

Downoad the dll for highcharts from this link .. http://www.highcharts.com/download

Introduction

I will explain how to create a report in JSON format using highcharts library. It's fully responsive, that's why I prefer it. Firstly, I have created Employee table in database.

After that, we are moving in C#..

C# Code

Create a separate class or aspx page as per your comfort.
  1. public class tblentity {  
  2.     public string Department {  
  3.         get;  
  4.         set;  
  5.     }  
  6.     public int Employee {  
  7.         get;  
  8.         set;  
  9.     }  
  10. }  

Create connection string and define web.config.

  1. <connectionStrings>  
  2.     <add name="Conn" connectionString="Data Source=YourServer;Initial Catalog=dbname;User ID=xxxx;Password=xxxxx" providerName="System.Data.SqlClient" />   
  3. </connectionStrings>  

After that, create a web method in aspx page.

  1. [WebMethod]  
  2. public static List < tblentity > abc() {  
  3.     List < tblentity > listinfo = new List < tblentity > ();  
  4.     DataSet ds = new DataSet();  
  5.     try {  
  6.         SqlConnection sql = new SqlConnection(ConfigurationManager.ConnectionStrings["Conn"].ConnectionString);  
  7.         SqlCommand cmd = new SqlCommand("select DeptName,count(ename) as Employee from Employes group by DeptName", sql);  
  8.         SqlDataAdapter adp = new SqlDataAdapter(cmd);  
  9.         adp.Fill(ds);  
  10.     } catch (Exception ex) {  
  11.         throw ex;  
  12.     }  
  13.     if (ds != null) {  
  14.         if (ds.Tables.Count > 0) {  
  15.             if (ds.Tables[0].Rows.Count > 0) {  
  16.                 foreach(DataRow dr in ds.Tables[0].Rows) {  
  17.                     listinfo.Add(new tblentity {  
  18.                         Department = dr["DeptName"].ToString(),  
  19.                             Employee = Convert.ToInt32(dr["Employee"]),  
  20.                     });  
  21.                 }  
  22.             }  
  23.         }  
  24.     }  
  25.     return listinfo;  
  26. }  

And HTML part here. You can design it according to your creativity. Add references to some CSS and JavaScript files in the HTML portion.

  1. <script src="js/highcharts.js" type="text/javascript"></script>  
  2. <script src="js/modules/exporting.js" type="text/javascript"></script>  
  3. <script src="api/js/jquery-1.11.3.min.js" type="text/javascript"></script>  
  4. <div id="idd1">  
  5. </div>  
Output
Next Recommended Reading
Introduction To JSON