background:
Because of the recent projects to generate reports, after several rounds of selection, we chose Baidu as a report of echarts base class library. Baidu echarts Introduction Please refer to http://echarts.baidu.com/ although echarts powerful, beautiful interface,
But using very cumbersome. Reference herein spark 116 "is written Echarts Reviews summary " based on the further encapsulated JS. Making it more versatile.
(1) Solution layout
FIG overall solution is as follows (VS2010 + .NET4.0).
The only explanation is that Javascript folder JS library, which is juqery jquery-1.8.3 library. echarts is Baidu echarts library. MyEcharts.js is modified on the basis of "spark" code on a custom library.
WapCharts.js custom JS libraries.
(2) establishment of a database
Report data is usually obtained from the database, here we use the desktop version of Microsoft SQLCE a database. Open table lists, wherein the following data
(3) read and write data
bin folder introduction System.Data.SqlServerCe.dll. You can then read MSSQL similar databases, to read and write to the database of CE.
Among them, we need to pay attention to the wording CE database connection, because CE database is a local database, so you can direct the development of specific address sdf with Data Source.
string con = @"Data Source='" + System.Web.HttpContext.Current.Server.MapPath("~/app_data/chartdb.sdf") + "'";
The following code shows how to obtain the pie data.
public void GetPie(HttpContext context)
{
string sql = @" select categoryname as name, count(*) as count from lists group by categoryname";
ds = GetData(sql);
lists = new List<object>();
foreach (DataRow dr in ds.Tables[0].Rows)
{
var obj = new { name = dr["name"], value = dr["count"] };
lists.Add(obj);
}
jsS = new JavaScriptSerializer();
result = jsS.Serialize(lists);
context.Response.Write(result);
}
public DataSet GetData(string sql)
{
ds = new DataSet();
da = new SqlCeDataAdapter(sql, con);
da.Fill(ds);
return ds;
}
In the above code, the use of
jsS = new JavaScriptSerializer();
For the data sequence number JSON.
If this view handler.ashx, by passing different parameters cmd, you can return different JSON data
(4) generating a report pie (pie chart)
echarts need a container to store data, typically would be a div, so, we define a div
<div id="echart" style="width:100%; height:400px;"></div>
We need JQuery's ready event, call the database data, and callback function, call DrawPie production pie chart.
DrawPie first parameter is the callback value and the second parameter is the div id.
The ajax async is set to false because of the need synchronous calls.
<script type="text/javascript">
$(document).ready(
function () {
$.ajax({
url: "ajax/Handler.ashx",
data:{cmd:"pie"},
cache: false,
async: false,
dataType: 'json',
success: function (data) {
if (data) {
DrawPie(data,"echart");
}
},
error: function (msg) {
alert("系统发生错误");
}
});
});
</script>
This completes the generation of pie report.
(5) generating a graphical bar (histogram)
To generate an image bar, as long as the modifications to the 2: (1) ajax passing parameters to cmd bar. (2) the callback return DrawBar.
<div id="echart" style="width:100%; height:400px;"></div>
<script type="text/javascript">
$(document).ready(
function () {
$.ajax({
url: "ajax/Handler.ashx",
data: { cmd: "bar" },
cache: false,
async: false,
dataType: 'json',
success: function (data) {
if (data) {DrawBar(data, "echart");
}
},
error:function (MSG) {
Alert ( "system error");
}
});
});
</script>
(6) operating results
You can download the source code, run see the results (one bar.aspx page, a page is pie.aspx)
(7) subsequent
This has been completed graphic design, or by calling DrawBar DrawPie method, you can produce a report, you can further be packaged into a user control, ease of use
(8) Source Codes
Click here to download the source code for this article
http://files.cnblogs.com/files/mqingqing123/echartsDemo.rar