Google chart load some time and some time not
75 views
Skip to first unread message
Rakesh Karampuri
May 13, 2020, 1:29:39 AM5/13/20
to Google Visualization API
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);
}
}
});
}
Daniel LaLiberte
May 13, 2020, 9:55:33 AM5/13/20
to Google Visualization API
Hi Rakesh,
You should update how you load Google Charts to use the new loader. See instructions at: https://developers.google.com/chart/interactive/docs/basic_load_libs#update-library-loader-code
There is a page of documentation describing a couple different ways to display more than one chart on the same page, at: https://developers.google.com/chart/interactive/docs/basic_multiple_charts
--
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 google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/473c18a6-0a05-4528-ad19-5ebcd0c51b1a%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages