I cannot aggregated remote data into a pie chart. It works just fine for local data if I use the following html.
<div id="ReportPOC">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
<script type="text/javascript">
function createChart() {
var data = [
{
"Name": "Inbound GoodMail",
"MessageCount": 1394,
"Date": "2015-10-05"
},
{
"Name": "Outbound GoodMail",
"MessageCount": 724,
"Date": "2015-10-05"
},
{
"Name": "Outbound GoodMail",
"MessageCount": 504,
"Date": "2015-10-06"
},
{
"Name": "Inbound GoodMail",
"MessageCount": 256,
"Date": "2015-10-06"
}
];
var dataSourcePie = new kendo.data.DataSource({
transport: {
read: {
url: '@Url.Action("ReportData", "Home")',
dataType: "json"
}
},
group: {
field: "Name",
aggregates: [
{ field: "MessageCount", aggregate: "sum" }
]
}
});
dataSourcePie.fetch().then(function () {
var pieD = [];
var view = dataSourcePie.view();
for (var idx = 0; idx < view.length; idx++) {
pieD.push({
Name: view[idx].value,
MessageCount: view[idx].aggregates.MessageCount.sum
});
}
$("#chart").kendoChart({
dataSource: pieD,
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: \n #= value#"
}
},
series: [{
type: "pie",
field: "MessageCount",
aggregate: "sum",
categoryField: "Name"
}],
});
});
}
$(document).ready(createChart);
</script>
</div>
The pie chart show 2 sections where Inbound GoodMail is 1650 and Outbound GoodMail is 1228. If I change my dataSource to make a remote call to an Action in my Controller, the data doesn't aggregate.
var dataSourcePie = new kendo.data.DataSource({
transport: {
read: {
url: '@Url.Action("ReportData", "Home")',
dataType: "json"
}
},
group: {
field: "Name",
aggregates: [
{ field: "MessageCount", aggregate: "sum" }
]
}
});
The json returned is the same, but now I get a pie chart where Inbound GoodMail is 256 and Outbound GoodMail is 504. The view object returned from dataSourcePiew.view() does not have the correct aggregates. What am I doing wrong?
Does the filter popup support a multi level hierarchy - as it seems to flatten such a hierarchy into 2 levels All, and then list of all members (as opposed to how other tools might display?)
FYI In my case its an organisational hierarchy
Thanks
Chris
Hi. I’m trying to use kendoEditor inside a View in a SPA.
When this View is shown for the first time the kendoEditors are built in its init(), and they render perfectly. Then, if I exit the view and try to load it again, this error appears in the console:
Uncaught TypeError: Cannot use 'in' operator to search for 'getSelection' in undefined kendo.web.min.js?version=1:35
I tried to do a refresh() of the editor in the show() of the view, but it doesn’t even get to enter it.
That’s in chrome.
In IE/Edge it breaks when loading the View for the first time: it renders (and the kendoEditors inside it), but the view that was previously loaded in that container is still there, below the new.
is there any solution?
Thanks
I have an Angular app that draws multiple charts. I am trying to set the chart options in code using the k-options directive. Below are my options for the stackedBarCode.
vm.stackedBarChartOptions = { //dataSource: new kendo.data.DataSource({ // transport: { // type: 'json', // read: function (options) { // var request = new ShipmentManagementRequest(11736); // request.Carriers = vm.shipmentManagementRequest.Carriers; // request.RequestType = "CarMix"; // shipmentService.getMixChartData(request) // .then(function(result) { // options.success(result.data); // console.log("Original Read Called"); // }).catch(function(error) { // options.error(error); // }); // } //}, //group: [ // { field: "category" } //], //sort: { // field: "date", // dir: "asc" //}, //schema: { // model: { // fields: { // date: { // type: "date" // } // } // } //} //}), theme: 'Office365', seriesDefaults: { stack: { type: "100%" } }, series: [ { field: 'percent', name: '#= group.value #', } ], categoryAxis: { field: "date", labels: { format: "MMM-yy" } }, legend: { position: "bottom", visible: false }, valueAxis: { line: { visible: false }, labels: { rotation: "auto" } }, tooltip: { visible: true, template: "#= series.name #: #= kendo.format('{0:p2}',value) #" }, render: function(e) { vm.setChartOptions(e); }}Since each chart has a different set of data being used for the graph I cannot set a single datasource in the options. I am trying to set the datasource in the code as shown below.
var chartDataEl = $('#' + myChart.chartData.htmlID).data('kendoChart'); if (myChart.chartData.chartOptions === 'stackedBarChartOptions') { chartDataEl.dataSource = new kendo.data.DataSource({ transport: { type: 'json', read: function (options) { var request = new ShipmentManagementRequest(11736); request.Carriers = vm.shipmentManagementRequest.Carriers; request.RequestType = options.data.htmlId; shipmentService.getMixChartData(request) .then(function (result) { options.success(result.data); var chart = options.data.chart; chart.refresh(); chart.redraw(); }).catch(function (error) { options.error(error); }); } }, group: [ { field: "category" } ], sort: { field: "date", dir: "asc" }, schema: { model: { fields: { date: { type: "date" } } } } });}else{/* set data source for other chart types */}This works for other chart types (i.e. pie, standard bar, line), but when I perform the refresh for the stacked bar the horizontal axis loads the date information from the response but no bars are drawn. See attached. What is happening that is preventing the data from displaying since it works on the other chart types.
legend: { position: "custom", offsetX: 30, offsetX: 200}Hi Guys,
I have notice in Microsoft Edge browser RTM version that when using Kendo DatePicker MVC helper the initial default value is not properly set.
And this looks to be related to the input type="date" instead of type="text" that the Kendo MVC helper outputs as per fiddle http://jsfiddle.net/silviunex/2p7wprnk/9/
I'm currently using Kendo DatePicker control initialized with MVC helpers and default values set throughout a big project.
I would like to know if there is any fix available for this issue?
Cheers!