We Keep Coding

How to properly code Javascript / Ajax for use with Chart.js

I have a controller action in my MVC project that creates a json record with the components needed. This is working. The issue I am having is bringing it into a chart.js canvas. This will be a pie chart that shows all the related countries with a count of each. Json has this info. Originally this was setup to use google visualization but I want to use chart.js. I just started using it. Creating charts with static data is no issue but I am pulling the info from a SQL table and creating a json to read from.
I have tried using the same structure and calling the data: data[] but it doesn't work I have also tried data: getData, which is a var for the ajax function. I am getting the data per the council on refresh.
Here is my controller Action
public ActionResult CustomersByCountry()
{
CustomerEntities _context = new CustomerEntities();
var customerByCountry = (from c in _context.Addresses
group c by c.Country into g
orderby g.Count() descending
select new
{
Country = g.Key,
CountCustomer = g.Count()
}).ToList();
return Json(new { result = customerByCountry }, JsonRequestBehavior.AllowGet);
}
And here is the JavaScript/ajax - which is nested in a document.ready function with the rest of the charts.
EDIT - changed Ajax - Still not working
OrdersByCountry()
function OrdersByCountry() {
$.ajax({
url: '/admin/CustomersByCountry',
method: "GET",
dataType: "json",
error: function (_, err) {
console.log(_, err)
},
success: function (data) {
console.log (data);
var customer = $("#customerByCountryPieChart").get(0).getContext("2d");
console.log(customer)
var cpieChart = new Chart(customer, {
type: 'pie',
data: data,
options: {
responsive: true,
title: {
display: true,
text: "Customers By Country",
}
}
});
}
});
};
Edit - The now working code is below.
I changed it to get states instead of country, just to clear up possible confusion. It made more sense to me to get States rather than Country at this point. This is working - meaning displaying the graph, I still need to work on the labels etc.
OrdersByStates()
function OrdersByStates() {
$.ajax({
url: '#Url.Action("CustomersByStates", "Admin")',
data: JSON,
contentType: "application/json; charset=utf-8",
method: "get",
dataType: "json",
error: function (_, err) {
console.log(_, err)
},
success: function (response) {
console.log(response);
var jsonresult = response
var labels = jsonresult.result.map(function (e) {
return e.State;
});
var data = jsonresult.result.map(function (e) {
return e.CountCustomer;
});;
var ctx = document.getElementById("CustomerByStatePieChart").getContext("2d");
var cpieChart = new Chart(ctx, {
type: 'pie',
data:
{
datasets: [
{
backgroundColor: ["#46BFBD", "#F7464A"],
hoverBackgroundColor: ["#5AD3D1", "#FF5A5E"],
label: "Orders",
data: data,
}]
},
options: {
responsive: true,
title: {
display: true,
text: "Customers By Country",
}
}
});
}
});
};
});

try:
var cpieChart = new Chart(customer, {
type: 'pie',
data: data.result,
options: {
responsive: true,
title: {
display: true,
text: "Customers By Country",
}
}
});
the response from the server "data" var on your request is {result: LIST}

Appropriate js kendo template for website

I use only kendo template in my website and use this js:
kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js
but this file very very large size (2.102 KB). I want Appropriate kendo js file for this sulotion but I dont know:
my codes is:
<script>
function FillSpecificationAttr(attrId) {
var template = kendo.template($("#template").html());
var ID = attrId;
var dataSource = new kendo.data.DataSource({
type: "json",
transport: {
read: {
url: "../AjaxFunctionPages.asmx/ProductSpecAttrList",
type: "POST",
contentType: "application/json; charset=utf-8",
data: {
ID: ID
}
},
destroy: {
url: "../../AjaxFunctionsAdminPages.asmx/TierPriceDelete",
type: "POST",
contentType: "application/json; charset=utf-8",
data: {
ID: ID
}
},
parameterMap: function (data, operation) {
if (operation != "read") {
// web service method parameters need to be send as JSON. The Create, Update and Destroy methods have a "products" parameter.
return JSON.stringify({ ID: data.Id })
}
else if (operation == "destroy") {
}
else {
// web services need default values for every parameter
data = $.extend({ sort: null, filter: null }, data);
return JSON.stringify(data);
}
}
},
schema: {
data: "d.Data"
},
requestStart: function () {
kendo.ui.progress($("#tblConfigProduct"), true);
},
requestEnd: function () {
kendo.ui.progress($("#tblConfigProduct"), false);
},
change: function () {
$("#tblConfigProduct").html(kendo.render(template, this.view()));
}
});
dataSource.read();
};
</script>

I think the template is defined in kendo.core.min.js file which in version 2017.2.504 is only 54KB of size. You will still need jQuery library as a required dependency added in your document.
Demo

Loading js-grid then filtering data

I have data being pulled from a db using php and then passed into javascript to load js-grid. I also have a dropdown populated with php containing the default value selected and stored by the user. My goal is to populate the grid with all data returned, then filter it based on the selected option in the dropdown.
I can't seem to understand how to load then filter data using js-grid.
<script type="text/javascript">var order_json = <?= $order_json ?>; var user_list = <?= $user_list['activeListId'] ?>;</script>
<script type="text/javascript" src="js/main.js"></script>
main.js
$( document ).ready(function() {
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: false,
editing: false,
sorting: true,
paging: false,
pageSize: 30,
noDataContent: "No orders found",
data: order_json,
fields: [
{ name: "OrderId", type: "number", title: "Order ID", visible: false },
{ name: "ListId", type: "number", title: "Order List ID", visible: true},
{ name: "Name", type: "text", title: "Order Name", align: "left"}
],
});
var grid = $("#jsGrid").data("JSGrid");
grid.search({ListId: user_list})
});
I have tried some different approaches and none have worked. Any help would be appreciated.

With js-grid the actual filtering of the data should be implemented by developer.
The filtering could be done on the client-side or server-side. Client-side filtering implemented in loadData method of controller. Server-side filtering is done by a server script that receives filtering parameters, and uses them to retrieve data.
Here is how your controller.loadData method could look like:
loadData: function(filter) {
var d = $.Deferred();
// server-side filtering
$.ajax({
type: "GET",
url: "/items",
data: filter,
dataType: "json"
}).done(function(result) {
// client-side filtering
result = $.grep(result, function(item) {
return item.SomeField === filter.SomeField;
});
d.resolve(result);
})
return d.promise();
}
As for data option, it's used only for static grid data.
Worth to mention that it would be better to provide data to grid with a REST-y service (of course, it can be done with PHP).
Here is the sample project showing how to use js-grid with a REST service on PHP https://github.com/tabalinas/jsgrid-php.

loadData: function (filter) {
criteria = filter;
var data = $.Deferred();
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "/api/advertisements",
dataType: "json"
}).done(function(response){
var res = [];
if(criteria.Title !== "")
{
response.forEach(function(element) {
if(element.Title.indexOf(criteria.Title) > -1){
res.push(element);
response = res;
}
}, this);
}
else res = response;
if(criteria.Content !== "")
{
res= [];
response.forEach(function(element) {
if(element.Content.indexOf(criteria.Content) > -1)
res.push(element);
}, this);
}
else res = response;
data.resolve(res);
});
return data.promise();
},

Whenever filtering is involved the function loadData of the controller is called.
There you can implement the filtering functionality that you want.
Here is an example of a generic filter that checks if the string you 've typed in the filter row is contained in your corresponding rows, works with numbers and other types as well
loadData: function (filter) {
return $.get('your.url.here')
.then(result => result.filter(row => Object.keys(filter).every(col =>
filter[col] === undefined
|| ('' + filter[col]).trim() === ''
|| ('' + row[col]).toLowerCase().includes(('' + filter[col]).trim().toLowerCase())
)))
}
If you're not getting your data from a server you can still use the loadData function as described here: https://github.com/tabalinas/jsgrid/issues/759
If you want to invoke filtering manually you can use the search function as described in the docs: http://js-grid.com/docs/#searchfilter-promise

paging not moving to new data in kendogrid

Please note that at this time I am new to ASP.NET MVC, JavaScript and Kendo. The Kendo grid paging works for the first 500 records returned, but won't allow paging to download more data from the server past 500. Here is my controller:
public ActionResult ExecuteTestRule(string ruleId, string ruleSql, string uwi, List<PdsMatchRuleParam> parameters = null)
{
if (Request.Url != null)
{
var query = PaginationQuery.Parse(Request.QueryString);
var upperLimit = query.FromUpper;
var lowerLimit = query.FromLower;
var dataSource = new MatchDataSource();
List<DataAccess.DbParameter> dbParameters = null;
var generatedSql = dataSource.GenerateQuerySql(ruleId, ruleSql, uwi, parameters, out dbParameters);
var results = dataSource.ExecuteTestRule(ruleId, generatedSql, dbParameters, upperLimit, lowerLimit).Select(u => new { UWI = u });
var response = new Dictionary<string, object>();
response["result"] = results;
response["rowCount"] = MatchDataSource.GetRowCount(generatedSql, dbParameters);
return Json(response, JsonRequestBehavior.AllowGet);
}
return null;
}
Here are the total number of rows available "rowCount" in the controller:
MatchDataSource.GetRowCount(generatedSql, dbParameters)
91637
Here is the Request.QueryString in the controller:
Request.QueryString
{}
[System.Web.HttpValueCollection]: {}
base {System.Collections.Specialized.NameObjectCollectionBase}: {}
AllKeys: {string[0]}
Pressing this button has no effect:
Here is my JavaScript code:
function bindTestRuleResults() {
PageState.Selected.Old.TestRuleResult = PageState.Selected.TestRuleResult;
var dataSource = new kendo.data.DataSource({
pageSize: 500,
data: PageState.Selected.TestRuleResult,
serverPaging: true
});
Grids.TestRuleResultsGrid.setDataSource(dataSource);
PageState.Selected.TestRuleResult = null;
}
function initTestRuleResultsGrid() {
$(IDS.testRuleResultsGrid).kendoGrid({
autoBind: true,
filterable: false,
navigatable: true,
pageable: {
refresh: true,
pageSizes: [10, 50, 100, 500],
buttonCount: 5
},
scrollable: true,
selectable: true,
serverFiltering: false,
serverPaging: true,
serverSorting: true,
sortable: false,
columns: [
{ field: "UWI", title: "UWI", width: "100%", attributes: { tabindex: "1" } }
],
change: function() {
var selectedDataItem = this.dataItem(this.select());
if (PageState.Selected.TestRuleResult !== selectedDataItem.TestRuleResult) {
PageState.Selected.TestRuleResult = selectedDataItem.TestRuleResult;
testRuleResultsSelectionChanged();
}
},
editable: false
});
// Add vertical scroll bars
$(IDS.testRuleResultsGrid + " .k-grid-content").css({
"overflow-y": "scroll"
});
Grids.TestRuleResultsGrid = $(IDS.testRuleResultsGrid).data('kendoGrid');
}
function execTestRule(uwi) {
$.ajax({
type: 'POST',
url: "ExecuteTestRule",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({
ruleId: PageState.Selected.RuleId,
ruleSql: PageState.SqlEditor.RuleSql.getValue(),
uwi: "'" + uwi + "'",
parameters: PageState.RuleParameters
}),
schema: {
errors: function(response) {
return response.error;
},
data: function(response) {
return response.result;
},
total: function(response) {
return response.rowCount;
}
},
success: function(matchedUwiList) {
PageState.TestRuleResult = matchedUwiList.result;
var dataSource = new kendo.data.DataSource({
pageSize: 500,
data: matchedUwiList.result,
serverPaging: true
});
Grids.TestRuleResultsGrid.setDataSource(dataSource);
PageState.Selected.ChildUwi = null;
updateButtonStates();
},
error: function(e) {
var errorObject = JSON.parse(e.xhr.responseText);
var errorMessage = errorObject.Message;
//clear old error message
Grids.TestRuleResultsGrid.clearErrorMessage("error-message");
// add new error message
Grids.TestRuleResultsGrid.addErrorMessage("error-message", errorMessage);
}
});
}
It clearly has serverPaging = true in the data source. What am I missing? Do I need to somehow make pageSize dynamic in my JavaScript code? TIA.
UPDATE:
Thank you for the feedback, #Brett. This is how I've simplified the code as you suggested. How do I remove the success: function outside of the ajax part?
function execTestRule(uwi) {
$.ajax({
type: 'POST',
url: "ExecuteTestRule",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({
ruleId: PageState.Selected.RuleId,
ruleSql: PageState.SqlEditor.RuleSql.getValue(),
uwi: "'" + uwi + "'",
parameters: PageState.RuleParameters
}),
success: function(matchedUwiList) {
PageState.TestRuleResult = matchedUwiList.result;
var dataSource = new kendo.data.DataSource({
schema: {
data: 'results',
total: 'rowCount'
},
pageSize: 500,
serverPaging: true
});
Grids.TestRuleResultsGrid.setDataSource(dataSource);
PageState.Selected.ChildUwi = null;
updateButtonStates();
}
});
}
When the execTestRule function is run, this is the error I'm getting:

You code is confusing to me, but I do see one particular problem. You are not telling the Kendo UI DataSource where your data and row count properties are in the returned object from your controller.
In your controller, you specify that the data is located in the response["results"] property, while the row count is in the response["rowCount"] property. Therefore, your returned object looks like this:
{
results: [...],
rowCount: 91637
}
The Kendo UI DataSource object's schema, by default, expects data to be located in a "data" property and the row count (a.k.a. number of items in data) to be located in the "total" property. Since your object does not conform to convention, you need to tell the data source that your properties are named differently.
var dataSource = new kendo.data.DataSource({
schema: {
data: 'results',
total: 'rowCount'
},
pageSize: 500,
serverPaging: true
});
So, you might say you are doing that already, but look where you defined it. You defined it on the $.ajax() call. That is not correct. The $.ajax() function does not care about schema. The Kendo UI DataSource does.
Kendo UI DataSource API reference
jQuery $.ajax API reference

As #Brett explained, resolved the problem by taking the schema out of the $.ajax() call. Also, started using a transport in the dataSource:
$.widget("myViewGrid", {
// ...
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "{0}/ViewDataById".format(options.controllerUri),
type: "get",
dataType: "json",
data: {
viewId: view.viewId,
Id: options.Id
}
}
},
schema: {
data: "mydata",
total: "total",
model:dataSourceModel
},
pageSize: view.pageSize,
serverPaging: true,
serverSorting: true,
serverFiltering: true
});
// ...
});

$.done() code gets executed before $.when()

In my project I m using 2 versions of JQuery.js, so I resolved the conflict using $.noConflict() for my latest version of JQuery to variable named jq172. Now I have used jq172.when().done()construct to show loading status image until all ajax request are processed completely. The code is as follows.
jq172.when(
DisplayPOXOrderStatistics(fromDate, toDate),
DisplayPOXCompletedOrdersData(fromDate, toDate),
DisplayPOXCompletedOrderPieChart(fromDate, toDate),
DisplayCurrentYearlyTrends())
.done(function (a1,a2,a3,a4)
{
$("#loading").hide();
});
where functions in the jq172.when() are coded as follows,
function DisplayPOXOrderStatistics(fromDate, toDate) {
return $.ajax({
type: "POST",
url: '#Url.Action("DisplayPOXOrderStatistics", "Home")',
dataType: "json",
data: { FromDate: fromDate, ToDate: toDate },
success: function (data) {application code.....}
});
}
function DisplayPOXCompletedOrdersData(fromDate, toDate) {
return $.ajax({
type: "POST",
url: '#Url.Action("DisplayPOXCompletedOrders", "Home")',
data: { FromDate: fromDate, ToDate: toDate },
dataType: "json",
success: function (data) { some code....}
});
}
& rest 2 functions are coded in the same way as above
Now my code in .done() to hide loading image dive should be executed after all 4 ajax call is finished, but currently it gets executed immediately after function call is dispatched. Can anybody figure out the problem in my code.
Thanks in Advance...
Here is the definition of rest 2 functions..
function DisplayPOXCompletedOrderPieChart(fromDate, toDate) {
return $.ajax({
type: "POST",
url: '#Url.Action("POXCompletedOrderPieChart", "Home")',
data: { FromDate: fromDate, ToDate: toDate },
dataType: "json",
success: function (data) {
$('#POXCompletedOrdersPie').empty();
var dataSet = [];
var isDataAvailable = false;
for (var i = 0; i < data.length ; i++) {
var newElement = { label: data[i].Name, data: parseFloat(data[i].ColumnValue), color: Color[i] };
dataSet.push(newElement);
if (newElement.data > 0)
isDataAvailable = true;
}
if (dataSet.length != 0 && isDataAvailable) {
$.plot($("#POXCompletedOrdersPie"), dataSet, {
series: {
pie: {
show: true
}
},
legend: {
show: false
}
});
}
else {
$("#POXCompletedOrdersPie").empty();
$("#POXCompletedOrdersPie").append("<html><p> <b>" + "#Html.Raw(VirtuOxAdvDME.Dashboard_PieChart_POXCompletedOrder_NoData)" + "</b> </p><html>");
}
}
});
}
function DisplayCurrentYearlyTrends() {
$("#DisplayCurrentYear").html($('#selectCurrentYear option:selected').text());
return $.ajax({
url: '#Url.Action("DisplayCurrentYearlyTrends", "Home")',
data: { selectedCurrentYear: $('#selectCurrentYear option:selected').text() },
type: 'POST',
dataType: 'json',
success: function (data) {
var DataValues = [], TickData = [];
var i = undefined;
$.each(data, function (index, item) {
i = (index + 1) * 2;
DataValues.push({ data: [i, item.Value], color: Color[i] });
DataValues.push([i, item.Value]);
TickData.push([i, item.MonthName]);
});
$.plot($("#CurrentYearlyTrendsBar"), [{ data: DataValues, color: "#3D69AA" }],
{
series: { bars: { show: true } },
bars: {
barWidth: 1.5,
align: "center"
},
xaxis: {
ticks: TickData,
axisLabelUseCanvas: true,
labelAngle: -90,
},
yaxis: { axisLabelUseCanvas: true },
grid: { hoverable: true }
});
$("#CurrentYearlyTrendsBar").UseTooltip();
}
});
}

Probably your $.ajax calls (from the old jQuery version) do not return jqXHR objects which implement the Promise interface, a feature that was introduced with v1.5. when would see the objects as plain values then and resolve immediately.
To fix this, use jq172.ajax() instead, or use a (single) up-to-date jQuery and update your legacy code.

this is from the jquery site
in the multiple-Deferreds case where one of the Deferreds is rejected, jQuery.when immediately fires the failCallbacks for its master Deferred. Note that some of the Deferreds may still be unresolved at that point. If you need to perform additional processing for this case, such as canceling any unfinished ajax requests, you can keep references to the underlying jqXHR objects in a closure and inspect/cancel them in the failCallback.
check your ajax calls and make sure no one is getting rejected. You can do this in the
developers console->network tab
generally becomes accessible after pressing F12.