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.
Related
I wish to create a grid that each row has grid inside it.
Both grids need to be editable and I managed to do so. However, when I try to add a new row to the outer grid, all the data inside it gone.
You can find the demo here: http://dojo.telerik.com/UqURE
Can you please help with this issue?
Thanks!
var outerDataSource= new kendo.data.DataSource({
schema: {
model: {
field1: { type: "string", validation: { required: true } },
field2: { type: "boolean", validation: { required: true } },
field3: { type: "string", validation: { required: true } }
}
}
});
$("#outerGrid").kendoGrid({
dataSource: outerDataSource,
detailInit: onExpansion,
toolbar: ["create"],
columns: [
{ field: "field1", title: "field1" },
{ field: "field2", title: "field2" },
{ field: "field3", title: "field3" },
{ command: ["destroy"], title: " " }],
editable: true
});
function onExpansion(e) {
var insideDataSource= new kendo.data.DataSource({
schema: {
model: {
in1: { type: "string", validation: { required: true } },
in2: { type: "string", validation: { required: true } }
}
},
data: [{
in1: "Click to edit",
in2: "Click to edit"
}]
});
var headers = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: insideDataSource,
width: 90,
toolbar: ["create"],
editable: true,
columns: [
{ field: "in1" },
{ field: "in2" },
{ command: ["destroy"], title: " " }]
});
};
Answer from Telerik:
Please note that operations like paging, sorting, filtering and
editing cause the Grid to rebind and reevaluate all templates inside
it (including the details). That why in order to preserve the child
Grid data between rebinds you should either save it to remove service
(link to documentation here) or add it as navigation property
collection to the parent Grid model (demo is available here).
http://www.telerik.com/forums/hirarchialy-editable-grids
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 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 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.