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);
Related
I am new to telerik kendo chart I have created a string that is being returned from an ashx page. I want the x Axis to be the date has in the month and year and for each date there will be two box going up to the number.
Is it the way I am sending the string back from the ashx page?
ASHX.CS Page
string JSON = sb.ToString();
context.Response.ContentType = "text/json";
context.Response.Write(JSON);
[
{
"Date":"2/2018"
"Images":"199956"
"ImagesDownloads":"540903"
},
{
"Date":"3/2018"
"Images":"226606"
"ImagesDownloads":"635068"
}
]
In my JS page
var DataSource = new kendo.data.DataSource({
transport: {
read: {
url: function() {
return "/URI";
},
dataType: "json"
}
},
group: {
field: "Date"
},
sort: {
field: "Date",
dir: "asc"
},
schema: {
model: {
fields: {
date: {
type: "date"
}
}
}
}
});
function createChart() {
$("#chart1").kendoChart({
dataSource: DataSource,
legend: {
position: "bottom"
},
series:
[{
field: "Images",
categoryField: "Date",
name: "Number of Images"
}, {
field: "ImagesDownloads",
categoryField: "Date",
name: "Number of Images download"
}],
categoryAxis: {
field: 'Date'
},
tooltip: {
visible: true,
shared: true
}
});
}
$(document).ready(function () {
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
Please refer to this demo for grouped data bar chart.
This demo also shows you how Kendo supports date formatting on category axis you may use the API Reference for more information.
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
I have this code for displaying a kendo pie chart:
This is the div where the chart should be created:
<div id="chart100Month" style="width:100%"></div>
This is javascript:
<script type="text/javascript">
function createChartMonth100() {
$("#chart100month").kendoChart({
dataSource: {
transport: {
read: {
url: "/getchartdatabytesttype100",
dataType: "json"
}
},
filter: {
// field: "year", operator: "eq", value: year
},
sort: {
}
},
title: {
text: "test"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "pie"
},
series: [{
type: "pie",
field: "percentage",
categoryField: "type", }],
tooltip: {
visible: true,
format: "N0",
// template: "#= category # - #= kendo.format('{0:P}', percentage)#"
}
});}
$(document).ready(createChartMonth100);
$(document).bind("kendo:skinChange", createChartMonth100);
</script>
This code is largely taken from the examples from telerik websites
The json array that /getchartdatabytesttype100 is:
[{"percentage":0,"type":"hypo"},{"percentage":66.666666666667,"type":"normal"},{"percentage":16.666666666667,"type":"lighthyper"},{"percentage":16.666666666667,"type":"hyper"}]
Chart is not rendered and firebug shows that the get request for the datasource read is not fired.
Any suggestions?
Paolo
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
I am using ajax api calls for getting data from a SQL database as below:
function getJsonData(type, period1, period2, id) {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
type: "GET",
url: createURL(type, period1, period2, id),
dataType: "json",
contentType: "application/json; chartset=utf-8"
}
},
});
return dataSource;
}
Using the above datasource, I am creating a Kendo chart as below:
function stepsChart(container, title, period1, period2) {
var dSource = getJsonData("Summary", period1, period2, "<% = id %>");
$(container).kendoChart({
dataSource: dSource,
seriesColors: ["orangered"],
chartArea: {
background: ""
},
title: {
text:title
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "column",
gap:5
},
series: [{
name: "steps",
field: "steps",
categoryField: "createddate",
aggregate: "sum"
}],
categoryAxis: {
type: "date",
baseUnit: getBaseUnit(period1, period2),
labels: {
rotation: -45,
dateFormats: {
days : getDateFormat(period1, period2),
weeks: getDateFormat(period1, period2),
years: getDateFormat(period1, period2)
},
step: getSteps(period1, period2)
},
majorGridLines: {
visible: false
}
},
valueAxis: {
majorGridLines: {
visible: true
},
labels: {
template: "#= kendo.format('{0}',value/1000)#K"
},
title: {
text: "Steps"
}
}
});
}
I also want to use the data from the above datasource for showing a summary of the information in a div below the chart. But if I add something like
var k = dSource.data;
there will not be any data in k. Is there a way to get the json data in the function which creates the chart?
DataSource.data is a function. I think your code should be:
var k = dSource.data();
That would also return an empty array if the data hasn't already been read, so you might need to do:
dSource.one("change", function () {
var k = dSource.data();
});
dSource.fetch();
because the .fetch() is async.