In this example we explain that how to bind dynamic chart in
asp.net.or how to bind bootstrap chart dynamic using JavaScript or jQuery. Or
how to bind ECharts dynamically using JavaScript or jQuery in asp.net.or how to
bind EChart dynamically using Web Method in asp.net.
<script src="custom.min.js"
type="text/javascript"></script>
<script
src="echarts.min.js"
type="text/javascript"></script>
<div class="col-md-4 col-sm-4
col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>
Revenue By Delivery Status</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
<li class="dropdown"><a
href="#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings
1</a> </li>
<li><a href="#">Settings
2</a> </li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a></li>
</ul>
<div class="clearfix">
</div>
</div>
<div class="x_content">
<div id="echart_donut1" style="height: 350px; -webkit-tap-highlight-color: transparent;
user-select: none;
position: relative; background-color: transparent;" _echarts_instance_="ec_1500111693963">
<div style="position: relative; overflow: hidden; height: 350px; cursor: pointer;">
<canvas height="350"
data-zr-dom-id="zr_0"
style="position: absolute; left: 0px;
top: 0px; height:
350px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0,
0);"></canvas>
</div>
</div>
</div>
</div>
</div>
<script
type="text/javascript">
$(function
() {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'DynamicDashboard.aspx/GetOrderRevenueByDeliveryStatus',
data: '{}',
success: function (response) {
GetOrderRevenueByDeliveryStatus(response.d);
},
error: function () {
alert("Error loading data! Please try again.");
}
});
})
function
GetOrderRevenueByDeliveryStatus(dataValues) {
var
arrstatus = [];
var
arrrevenue = [];
var
seriesData = [];
for
(var i = 0; i < dataValues.length; i++) {
arrstatus.push(dataValues[i].OrderStatus);
arrrevenue.push(dataValues[i].Revenue);
seriesData.push({
value:
dataValues[i].Revenue,
name:
dataValues[i].OrderStatus
});
}
echartDonut1.setOption({ legend: {
data: arrstatus
}
});
echartDonut1.setOption({ series: {
name: '',
type: 'pie',
radius: ['35%',
'55%'],
itemStyle: {
normal: {
label: {
show: true
},
labelLine: {
show: true
}
},
emphasis: {
label: {
show: true,
position: 'center',
textStyle: {
fontSize: '14',
fontWeight: 'normal'
}
}
}
}, data: seriesData
}
});
}
</script>
<script
type="text/javascript">
var
echartDonut1 = echarts.init(document.getElementById('echart_donut1'),
theme);
echartDonut1.setOption({
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
calculable: true,
toolbox: {
show: true,
feature: {
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'center',
max: 1548
}
}
},
restore: {
show: true,
title: "Restore"
},
saveAsImage: {
show: true,
title: "Save Image"
}
}
}
});
</script>
Web Method:
[WebMethod]
public static List<OrderRevenueByStatus>
GetOrderRevenueByDeliveryStatus()
{
using
(SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["SWSConnectionString"].ToString()))
{
SqlCommand
cmd = new SqlCommand("select
ISNULL(DeliveryStatus,'X'),sum(TotalAmount)
from ProductOrder group by DeliveryStatus", con);
cmd.CommandType = CommandType.Text;
SqlDataAdapter
da = new SqlDataAdapter();
da.SelectCommand = cmd;
DataTable
dt = new DataTable();
da.Fill(dt);
List<OrderRevenueByStatus> OrderRevenudataList = new List<OrderRevenueByStatus>();
foreach
(DataRow dtrow in
dt.Rows)
{
OrderRevenueByStatus
details = new OrderRevenueByStatus();
details.OrderStatus =
dtrow[0].ToString();
details.Revenue = string.IsNullOrEmpty(Convert.ToString(dtrow[1]))
? 0 : Convert.ToDouble(dtrow[1].ToString().Replace(",", "."));
OrderRevenudataList.Add(details);
}
return
OrderRevenudataList;
}
}
public class
OrderRevenueByStatus
{
public
double Revenue { get;
set; }
public
string OrderStatus { get;
set; }
}
0 comments:
Post a Comment