Telerik Forums
Kendo UI for jQuery Forum
4 answers
177 views

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?

 

Mike
Top achievements
Rank 1
 answered on 06 Jan 2016
4 answers
209 views

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

Chris
Top achievements
Rank 1
 answered on 06 Jan 2016
6 answers
188 views

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

Alex Gyoshev
Telerik team
 answered on 06 Jan 2016
2 answers
169 views
Is there any way (or plans) to do Column Validation? It seems very inefficient to always have to setup the Validation for every cell individually. 
Wayne Hiller
Top achievements
Rank 1
Veteran
Iron
 answered on 06 Jan 2016
6 answers
1.5K+ views
There is an example named "Example - set dataSource as an existing kendo.data.TreeListDataSource instance" in the document at "http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist".

I tried the example and got nothing. I then traced the code of the kendo.treelist.js file and found no pageable property in it.

I'm wondering whether TreeList support pagination. Thanks.
Nayana
Top achievements
Rank 1
 answered on 06 Jan 2016
3 answers
286 views

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.

Iliana Dyankova
Telerik team
 answered on 06 Jan 2016
5 answers
527 views
Hi,

How can I have the legend labels continue to have horizontal orientation and wrapping when using:

legend: {
    position: "custom",
    offsetX: 30,
    offsetX: 200
}

                
If the position is set to one of the other options, such as "bottom", the labels appear horizontally. But, they switch to vertical when using custom.
Iliana Dyankova
Telerik team
 answered on 06 Jan 2016
13 answers
1.3K+ views

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!
Adam
Top achievements
Rank 1
 answered on 06 Jan 2016
1 answer
101 views
Scrollbar is not visible in IE11 using Detail template  with angular js
Pavlina
Telerik team
 answered on 05 Jan 2016
1 answer
143 views
How to preserve aspect ratio for a chart in a pdf when exporting ? I rotated the labels by 90 . When I reduce the size of the chart ( so that multiple charts can fit in a page)  , the labels on the chart is becoming fuzzy . Please advice.
T. Tsonev
Telerik team
 answered on 05 Jan 2016
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?