Html google Chart
================
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
debugger;
$.ajax({
type: "post",
url: "/DealsStatistics/selectcontryreport",
success: function (response) {
debugger;
var reportdata = [];
/*Age Chart*/
var data = google.visualization.arrayToDataTable([
['Task', ''],
['Age 15-25', response.objreportAge.Age15to25],
['Age 26-35', response.objreportAge.Age26to35],
['Age 36-45', response.objreportAge.Age36to45],
['Age 45-56', response.objreportAge.Age46to55],
['Age upto 56', response.objreportAge.Age56]]);
var options = {
title: '',
is3D: true,
legend: 'top',
tooltip: { isHtml: true },
chartArea: {
top: 20,
width: 300,
height: 300
},
slices: { 0: { color: '#0078d7' }, 1: { color: '#80b2da' }, 2: { color: 'red' } }
};
var chart = new google.visualization.PieChart(document.getElementById('idAgechart'));
chart.draw(data, options);
/*Age Chart End*/
/*Gender Chart*/
var data = google.visualization.arrayToDataTable([
['Task', ''],
['Male', response.objreportgender.male],
['Female', response.objreportgender.female]
]);
var options = {
title: '',
is3D: true,
legend: 'top',
tooltip: { isHtml: true },
chartArea: {
top: 20,
width: 250,
height: 300
},
slices: { 0: { color: '#0078d7' }, 1: { color: '#80b2da' }, 2: { color: 'red' } }
};
var chart = new google.visualization.PieChart(document.getElementById('idgenderchart'));
chart.draw(data, options);
/*Gender Chart end*/
/*Location Chart*/
if (response.objreportcountrylist.length > 0) {
reportdata = [['Task', '']];
for (var i = 0; i < response.objreportcountrylist.length; i++) {
reportdata.push([response.objreportcountrylist[i].Country, response.objreportcountrylist[i].Countryper])
}
var data = google.visualization.arrayToDataTable(reportdata);
var options = {
title: '',
is3D: true,
legend: 'top',
tooltip: { isHtml: true },
chartArea: {
top: 20,
width: 250,
height: 300
},
slices: { 0: { color: '#0078d7' }, 1: { color: '#80b2da' }, 2: { color: 'red' } }
};
var chart = new google.visualization.PieChart(document.getElementById('idlocationchart'));
chart.draw(data, options);
}
/*Location end*/
/*Bind Table*/
if (response.objvenderreporttbllist.length > 0) {
reportdata = [['Task', '']];
var Html = '';
var item = 0;
for (var i = 0; i < response.objvenderreporttbllist.length; i++) {
var newdate = new Date(response.objvenderreporttbllist[i].date.match(/\d+/)[0] * 1);
Html = Html + "<tr><td>" + item++ + "</td><td>" + newdate + "</td><td>" + response.objvenderreporttbllist[i].male + "</td><td>" + response.objvenderreporttbllist[i].female + "</td><td>" + response.objvenderreporttbllist[i].total + "</td><td>" + response.objvenderreporttbllist[i].location + "</td></tr>"
}
$("#tbldata").html(Html);
}
/*End Table*/
}
});
}
========
C#
==========
public ActionResult selectcontryreport()
{
int vendorid = 1;
dealstaticsrepot obj = new dealstaticsrepot();
obj = (new vendorReport()).getvendorreport(vendorid);
return Json(obj);
}
================
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
debugger;
$.ajax({
type: "post",
url: "/DealsStatistics/selectcontryreport",
success: function (response) {
debugger;
var reportdata = [];
/*Age Chart*/
var data = google.visualization.arrayToDataTable([
['Task', ''],
['Age 15-25', response.objreportAge.Age15to25],
['Age 26-35', response.objreportAge.Age26to35],
['Age 36-45', response.objreportAge.Age36to45],
['Age 45-56', response.objreportAge.Age46to55],
['Age upto 56', response.objreportAge.Age56]]);
var options = {
title: '',
is3D: true,
legend: 'top',
tooltip: { isHtml: true },
chartArea: {
top: 20,
width: 300,
height: 300
},
slices: { 0: { color: '#0078d7' }, 1: { color: '#80b2da' }, 2: { color: 'red' } }
};
var chart = new google.visualization.PieChart(document.getElementById('idAgechart'));
chart.draw(data, options);
/*Age Chart End*/
/*Gender Chart*/
var data = google.visualization.arrayToDataTable([
['Task', ''],
['Male', response.objreportgender.male],
['Female', response.objreportgender.female]
]);
var options = {
title: '',
is3D: true,
legend: 'top',
tooltip: { isHtml: true },
chartArea: {
top: 20,
width: 250,
height: 300
},
slices: { 0: { color: '#0078d7' }, 1: { color: '#80b2da' }, 2: { color: 'red' } }
};
var chart = new google.visualization.PieChart(document.getElementById('idgenderchart'));
chart.draw(data, options);
/*Gender Chart end*/
/*Location Chart*/
if (response.objreportcountrylist.length > 0) {
reportdata = [['Task', '']];
for (var i = 0; i < response.objreportcountrylist.length; i++) {
reportdata.push([response.objreportcountrylist[i].Country, response.objreportcountrylist[i].Countryper])
}
var data = google.visualization.arrayToDataTable(reportdata);
var options = {
title: '',
is3D: true,
legend: 'top',
tooltip: { isHtml: true },
chartArea: {
top: 20,
width: 250,
height: 300
},
slices: { 0: { color: '#0078d7' }, 1: { color: '#80b2da' }, 2: { color: 'red' } }
};
var chart = new google.visualization.PieChart(document.getElementById('idlocationchart'));
chart.draw(data, options);
}
/*Location end*/
/*Bind Table*/
if (response.objvenderreporttbllist.length > 0) {
reportdata = [['Task', '']];
var Html = '';
var item = 0;
for (var i = 0; i < response.objvenderreporttbllist.length; i++) {
var newdate = new Date(response.objvenderreporttbllist[i].date.match(/\d+/)[0] * 1);
Html = Html + "<tr><td>" + item++ + "</td><td>" + newdate + "</td><td>" + response.objvenderreporttbllist[i].male + "</td><td>" + response.objvenderreporttbllist[i].female + "</td><td>" + response.objvenderreporttbllist[i].total + "</td><td>" + response.objvenderreporttbllist[i].location + "</td></tr>"
}
$("#tbldata").html(Html);
}
/*End Table*/
}
});
}
========
C#
==========
public ActionResult selectcontryreport()
{
int vendorid = 1;
dealstaticsrepot obj = new dealstaticsrepot();
obj = (new vendorReport()).getvendorreport(vendorid);
return Json(obj);
}
No comments:
Post a Comment