I have implemented **two google** charts on my page
Data getting from server-side using ajax call
Sometimes the first chart shows and second disappear , some time second
chart shows the first disappears.
I have sharing my code
public JsonResult GetClientCountByMonth()
{
try
{
var clientCountByMonth = iClient.GetClientCountByMonth(new
ClientCountGetByMonth() {
UserID = WebSecurity.CurrentUserId,UtcDate =
DateTime.UtcNow }).ToList();
var clientGainLossByMonth =
iClient.GetClientGainLossByMonth(new ClientGainLossGetByMonth() { UserID =
WebSecurity.CurrentUserId, UtcDate = DateTime.UtcNow }).ToList();
var jsonResult = Json(new { StatusCode = "Valid",
clientCountByMonth = clientCountByMonth, clientGainLossByMonth =
clientGainLossByMonth }, JsonRequestBehavior.AllowGet);
jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
}
catch (Exception ex)
{
Utility.WriteLog(string.Format("Error while get client
count by month detail (User - ClientController - GetClientCountByMonth) \n
User : {0} \n UserID : {1} \n Error : {2} ", WebSecurity.CurrentUserName,
WebSecurity.CurrentUserId, ex.ToString()));
return Json(new { StatusCode = "Invalid", ErrorMessage =
Utility.ErrorMessage }, JsonRequestBehavior.AllowGet);
}
}
=>Js Code
google.load("visualization", "1", {
packages: ["corechart", "bar", "line"]
});
google.setOnLoadCallback(loadClientCharts);
function loadClientCharts()
{
$.ajax({
url: "/User/Client/GetClientCountByMonth",
dataType: 'json',
success: function (data) {
if (data.StatusCode == "Valid") {
//Client Gain and Loss
var e_ClientGainLossMonthly = new google.visualization.DataTable;
e_ClientGainLossMonthly.addColumn("string", "Month"),
e_ClientGainLossMonthly.addColumn("number", "Loss");
e_ClientGainLossMonthly.addColumn("number", "Gain");
$.each(data.clientGainLossByMonth, function () {
e_ClientGainLossMonthly.addRows([[{
v: this.Month, f: this.Month
}, this.Loss, this.Gain]]);
});
var b = {
title: "",
focusTarget: "category",
fontName: 'Poppins',
fontSize: '12',
colors: ['#FF0000', '#5188BF'],
hAxis: {
title: "Months",
format: "string",
slantedText: true,
slantedTextAngle: 45
},
vAxis: {
title: "Count"
}
};
new
google.visualization.ColumnChart(document.getElementById("OverViewGraphClientGainLoss")).draw(e_ClientGainLossMonthly,
b);
//New Client Chart
var e_ClientCountMonthly = new google.visualization.DataTable;
e_ClientCountMonthly.addColumn("string", "Month"),
e_ClientCountMonthly.addColumn("number", "Clients");
$.each(data.clientCountByMonth, function () {
e_ClientCountMonthly.addRows([[{
v: this.Month, f: this.Month
}, this.ClientCount]]);
});
var a = {
title: "",
focusTarget: "category",
fontName: 'Poppins',
fontSize: '12',
colors: ['#5188BF', '#7DAE5E', '#ff9900'],
hAxis: {
title: "Months",
format: "string",
slantedText: true,
slantedTextAngle: 45
},
vAxis: {
title: "Count"
}
};
new
google.visualization.ColumnChart(document.getElementById("OverViewGraphNewClient")).draw(e_ClientCountMonthly,
a);
} else {
notifyFailAlert(data.ErrorMessage);
}
}
});
}
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/473c18a6-0a05-4528-ad19-5ebcd0c51b1a%40googlegroups.com.
