I am facing issue with categoryAxis when any one item is missing in the grouping. I have modified the code in below fiddle
http://jsfiddle.net/v8tsQ/9/
I have replaced the javascript as below:-
var dr =
[{
"currency":"AUD",
"paymenttype":"0",
"amount":"10"
},
{
"currency":"AUD",
"paymenttype":"3",
"amount":"11"
},
{
"currency":"CAD",
"paymenttype":"1",
"amount":"24"
},
{
"currency":"CAD",
"paymenttype":"0",
"amount":"23"
},
{
"currency":"CAD",
"paymenttype":"3",
"amount":"22"
}]
var ds = new kendo.data.DataSource({
data: dr,
group: {
field: "paymenttype"
},
sort: [{
field: "paymenttype",
dir: "asc"
}, {
field: "currency",
dir: "asc"
}]
})
$("#chart").kendoChart({
dataSource: ds,
seriesDefaults: {
type: 'column',
labels: {
visible: true,
template: "#=kendo.format('{0:0}', value)#"
}
},
legend: {
visible: true,
position: "bottom"
},
series: [{
field: "amount"
}],
categoryAxis: {
field: "currency"
},
tooltip: {
visible: true,
template: "#= dataItem.currency#"
}
});
Issue :
The CAD currency is showing under AUD for type 1, which does not exists for currency AUD.
Please suggest.
Thanks
Related
I am using KendoUI - Grid component
How can I convert this into Kendo Grid:
For Eg:
I have created kendo grid (table) by using local data. As soon as I click on "Generate chart" button, above table's filter data should create the Kendo pie chart like below...
As I am new to Kendo, can somebody please suggest me the answer?
Code:
var localData = [
{
Id: 1,
userName: "John",
game: "A",
difficultyLevel: "Easy",
startTime: "25-05-2017",
endTime: "26-05-2017",
score: "210"
},
{
Id: 2,
userName: "Sam",
game: "B",
difficultyLevel: "Hard",
startTime: "04-11-2016",
endTime: "01-12-2016",
score: "4800"
},
];
var dataSource = new kendo.data.DataSource({
data: localData,
schema: {
model: {
fields: {
Id: {
type: "number"
},
userName: {
type: "string"
},
userName: {
type: "string"
},
difficultyLevel: {
type: "string"
},
startTime: {
type: "string"
},
endTime: {
type: "string"
},
score: {
type: "number"
},
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
scrollable: true,
height: 300,
sortable: true,
filterable: false,
groupable: true,
pageable: true,
columns: [{
field: "Id",
title: "Id",
filterable: true
}, {
field: "userName",
title: "userName"
}, {
field: "game",
title: "game"
}, {
field: "difficultyLevel",
title: "difficultyLevel"
}, {
field: "startTime",
title: "startTime"
}, {
field: "endTime",
title: "endTime"
}, {
field: "score",
title: "score"
}]
});
JsFiddle
You need to prepare your data to the chart's format. Something like:
$chartContainer.kendoChart({
dataSource: {
data: localData,
schema: {
parse: function(data) {
return data.map(x => {
return {
value: Number(x.score),
category: x.userName
}
});
}
}
},
series: [{
type: "pie",
field: "value",
categoryField: "category"
}],
tooltip: {
visible: true,
template: "#= category #: #= value #"
}
});
Updated Fiddle
var suspendPassVal= document.getElementById("suspendpass20").value;
console.log("suspendPassVal"+suspendPassVal);
var suspendFailVal= document.getElementById("suspendfail20").value;
console.log("suspenFailsVal"+suspendFailVal);
var mdnInvCheckPassVal= document.getElementById("mdnInvCheckpass20").value;
console.log("mdnPassVal"+mdnInvCheckPassVal);
var mdnInvCheckFailVal= document.getElementById("mdnInvCheckfail20").value;
console.log("mdnFailsVal"+mdnInvCheckFailVal);
var tniFuncsPassVal= document.getElementById("tniFuncspass20").value;
console.log("tniPassVal"+tniFuncsPassVal);
var tniFuncsFailVal= document.getElementById("tniFuncsfail20").value;
console.log("tniFailsVal"+tniFuncsFailVal);
var reconnectPassVal= document.getElementById("reconnectpass20").value;
console.log("reconnectPassVal"+reconnectPassVal);
var reconnectFailVal= document.getElementById("reconnectfail20").value;
console.log("reconnectFailsVal"+reconnectFailVal);
var reactivatePassVal= document.getElementById("reactivatepass20").value;
console.log("reactivatePassVal"+reactivatePassVal);
var reactivateFailVal= document.getElementById("reactivatefail20").value;
console.log("reactivateFailsVal"+reactivateFailVal);
function createChart() {
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Module Based statistics"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
name: "Failed",
data: [suspendFailVal, mdnInvCheckFailVal, tniFuncsFailVal, reconnectFailVal, reactivateFailVal],
color: "#ff0000"
},{
name: "Passed",
data: [ suspendPassVal, mdnInvCheckPassVal, tniFuncsPassVal, reconnectPassVal, reactivatePassVal],
color: "#00ff00"
}],
valueAxis: {
max: 10,
majorUnit:1,
line: {
visible: false
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
categories: ['Suspend', 'MDN', 'TNI', 'reconnect', 'reactive'],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
when i hard code the values [1,2,4,3,5] and [2,3,5,6,6] it is giving me the proper aligned graph. but if i go with above given variables, second series of data is taking 10 times.
can anybody help me wi this issue.
I have the following code in my model controller. Even though I have a series of objects in the data, however it does not show/update the bar column on the chart.
I wonder where am I doing wrong or missing?
Model.js
var theDataSource = new kendo.data.DataSource({
data: allData,
group: {
field: "series"
},
sort: {
field: "category",
dir: "asc"
}
});
chart.dataSource = theDataSource;
chart.refresh();
View.js
$("#chart").kendoChart({
title: {
text: "Selection",
color: "white"
},
theme:"Metro",
seriesDefaults: {
type: "column",
stack: true,
},
series: [{
field: "value",
}]
})
Use setDataSource() to set the datasource, this will notify the chart that the datasource has changed.
var theDataSource = new kendo.data.DataSource({
data: allData,
group: {
field: "series"
},
sort: {
field: "category",
dir: "asc"
}
});
chart.setDataSource(theDataSource);
The Filter basically works fine but,
The select does not seem to fire the first selection
this happens every time the filter is reset as well.
I meddled with it for two days now...
here is the Fiddle
<script src="../content/shared/js/products.js"></script>
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: {
mode: "row"
},
pageable: {
input: true,
numeric: false
},
columns: [
{
field: "ProductName",
title: "Product Name",
filterable: {
cell: {
operator: "contains",
showOperators: false
}
}
}, {
field: "Discontinued", title: "Discontinued",
filterable: {
mode: "row",
cell: {
showOperators: false,
template: function (args) {
args.element.kendoDropDownList({
autoBind:false,
dataTextField: "text",
dataValueField: "value",
dataSource: new kendo.data.DataSource({
data: [{ text: "Yes", value: "true" },
{ text: "No", value: "false" }]
}),
index: 0,
optionLabel: {
text: "Filter",
value: ""
},
valuePrimitive: true
})
}
}
}
}
]
});
});
</script>
Kendo UI 2015 Q1 has a lot of bug on it, especially on dropdown family widget like autocomplete, multiselect, dropdown, etc..
Change your kendo library to 2014 or previous version will make it works fine,
check this dojo
I have a grid where each row has a select drop down box in with values.
When an item is selected, how can I make the grid reload to reflect the change?
The reason I want to do this is because the item selected from the drop down effects an amount in another column.
Here is the code for my dropdown:
function shippingModelSelect(container, options)
{
$('<input required data-text-field="modelName" data-value-field="modelId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: [
{
"modelName": "Individual shipping cost",
"modelId": 1
},
{
"modelName": "Based on weight",
"modelId": 2
},
{
"modelName": "Based on value",
"modelId": 3
}
],
close: function()
{
handleChange();
}
});
}
My handle change function:
var gridAlert = $('#gridAlert');
var handleChange = function(input, value) {
if(input && value)
{
detail = 'Product <b>'+input[0].name+'</b> changed to <b>'+value+'</b>';
gridAlert.html('<b>Changes saved!</b><p>'+detail+'</p>');
gridAlert.fadeIn('slow', function(){
setTimeout(function(){
gridAlert.fadeOut();
}, 2000)
});
}
dataSource.sync();
}
And finally my grid setup:
dataSource = new kendo.data.DataSource({
serverPaging: true,
serverSorting: true,
serverFiltering: true,
serverGrouping: true,
serverAggregates: true,
transport: {
read: {
url: ROOT+'products/manage'
},
update: {
url: ROOT+'products/set-product',
type: "POST",
data: function(data)
{
data.dateAdded = kendo.toString(data.dateAdded, 'yyyy-MM-dd hh:ii:ss')
return data;
}
}
},
pageSize: 20,
sort: {
field: 'id',
dir: 'desc'
},
error: function(e) {
alert(e.errorThrown+"\n"+e.status+"\n"+e.xhr.responseText) ;
},
schema: {
data: "data",
total: "rowcount",
model: {
id: "id",
fields: {
id: {
type: 'number',
editable: false
},
SKU: {
type: "string"
},
name: {
type: "string"
},
dateAdded: {
type: "date",
format: "{0:yyyy/MM/dd hh:mm}",
editable: false
},
shippingModel: {
type: "string"
},
shippingModelId: {
type: "number"
},
price: {
type: "number"
}
}
}
}
})
$('#productGrid').kendoGrid({
dataSource: dataSource,
autoBind: true,
columns: [
{
field: "image",
title: "Image",
width: 30,
template: "#= '<img title=\"'+alt+'\" src=\"images/'+image+'\"/>' #"
},
{
field: "SKU",
title: "SKU",
width: 50,
headerTemplate: "<abbr title=\"Stock Keeping Unit - A unique identifier for this product\">SKU</abbr>"
},
{
field: "stockQuantity",
title: "Quantity",
width: 30
},
{
field: "name",
title: "Name",
width: 200
},
{
field: "dateAdded",
title: "Date Added",
width: 80,
template: "#= niceDate #"
},
{
field: "shippingModelId",
title: "Shipping Model",
width: 50,
editor: shippingModelSelect,
template: "#= shippingModel #"
},
{
field: "price",
title: "Price",
width: 80,
//format: "{0:c}",
template: "#= '£'+price.toFixed(2)+'<br /><span class=\"grey\">+£'+shipping+' shipping</span>' #"
}
],
sortable: true,
editable: true,
pageable: {
refresh: true,
pageSizes: [10, 20, 50]
},
scrollable: false,
reorderable: true,
edit: function(e) {
var value;
var numericInput = e.container.find("[data-type='number']");
// Handle numeric
if (numericInput.length > 0)
{
var numeric = numericInput.data("kendoNumericTextBox");
numeric.bind("change", function(e) {
value = this.value();
handleChange(numericInput, value);
});
return;
}
var input = e.container.find(":input");
// Handle checkbox
if (input.is(":checkbox"))
{
value = input.is(":checked");
input.change(function(){
value = input.is(":checked");
handleChange(input, value);
});
}
else
{
// Handle text
value = input.val();
input.keyup(function(){
value = input.val();
});
input.change(function(){
value = input.val();
});
input.blur(function(){
handleChange(input, value);
});
}
}
}
)
You will need to do two things.
Wait for changes to finish syncing
Tell the grid to re-read the datasource
This should do both for you
dataSource.bind("sync", function(e) {
$('#productGrid').data("kendoGrid").dataSource.read();
});
For more info see the datasource sync event and datasource read method on their docs site.