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.

public class tblentity {
public string Department {
get;
set;
}
public int Employee {
get;
set;
}
}

Create connection string and define web.config.

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

After that, create a web method in aspx page.

[WebMethod]
public static List < tblentity > abc() {
List < tblentity > listinfo = new List < tblentity > ();
DataSet ds = new DataSet();
try {
SqlConnection sql = new SqlConnection(ConfigurationManager.ConnectionStrings["Conn"].ConnectionString);
SqlCommand cmd = new SqlCommand("select DeptName,count(ename) as Employee from Employes group by DeptName", sql);
SqlDataAdapter adp = new SqlDataAdapter(cmd);
adp.Fill(ds);
} catch (Exception ex) {
throw ex;
}
if (ds != null) {
if (ds.Tables.Count > 0) {
if (ds.Tables[0].Rows.Count > 0) {
foreach(DataRow dr in ds.Tables[0].Rows) {
listinfo.Add(new tblentity {
Department = dr["DeptName"].ToString(),
Employee = Convert.ToInt32(dr["Employee"]),
});
}
}
}
}
return listinfo;
}

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

<script src="js/highcharts.js" type="text/javascript"></script>
<script src="js/modules/exporting.js" type="text/javascript"></script>
<script src="api/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<div id="idd1">
</div>

Output