I'm using Kendo Pie Chart to render a pie chart in the DOM.Below is the code that has been used..
function showOnPie(data) {
var total = [];
var count = 0;
for (var i = 0, tot = data.roundGraph.length; i < tot; i++) {
count += data.roundGraph[i].total;
}
for (var j = 0, totem = data.roundGraph.length; j < totem; j++) {
total.push([data.roundGraph[j].name, (data.roundGraph[j].total / count) * 100, data.roundGraph[j].id])
}
$scope.pieChartOptions = {
title: {
position: "bottom",
text: "Share of Internet Population Growth, 2007 - 2012"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: \n #= value#%"
}
},
series: [
{
type: "pie",
startAngle: 150,
data: [
{
category: "Asia",
value: 53.8,
color: "#9de219"
}, {
category: "Europe",
value: 16.1,
color: "#90cc38"
}, {
category: "Latin America",
value: 11.3,
color: "#068c35"
}, {
category: "Africa",
value: 9.6,
color: "#006634"
}, {
category: "Middle East",
value: 5.2,
color: "#004d38"
}, {
category: "North America",
value: 3.6,
color: "#033939"
}
]
}
],
tooltip: {
visible: true,
format: "{0}%"
}
};
}
The chart is loading fine but is not responsive in different browser window.
As a solution I tried to refresh the chart on change in window size by doing
$(window).resize(function () {
showOnPie($scope.chartdATA);
});
but didn't find a perfect solution for the responsiveness.
Same goes for the bar chart where the x and y axis are hidden when the browser is minimized.Can anybody sufggest a fix for this issue.All the code has been done in AngularJs.
Hi,
May i know how to add day template via MVVM? I tried but i encounter: Uncaught Error: The month binding is not supported by the Calendar widget"
<div data-role="calendar"
data-bind="value: selectedDate, events: { navigate: onChange },month:
{content:$('#cell-template').html()}"></div>
<script id="cell-template" type="text/x-kendo-template">
<div>
#= data.value #
</div>
</script>
Please advise.
regards,
ch
Hi Team,
I have used Kendo UI Js calender control for my project. i want to show the scheduled events on particular data on calendar control.
ex: if Movie, Play events will happen on some date[12-05-2015,mm-dd-yyyy] , i have to display these events on scheduled date on calendar control.
Here attached my exact template . Let me know, this functionality available in Kendo UI calender control. if possible means , suggest the code to achieve this.
Hi,
For applying translation for calendar, how can we translate the month and week names using messages
kendo.ui.<Widget-name>.prototype.options.messages =
$.extend(true, kendo.ui.<Widget-name>.prototype.options.messages,{"<message-name>": "<translation",//...});
Why I am preferring messages is I already have names translated files in my project, planning to use the same instead of having duplicate sources.
could any one please help me, Thanks in advance.
Regards,
Ramesh
Hi,
I wrote a custom directive that wraps the kendo ui kendo-date-picker directive. The directive adds logic to create a custom footer. In my Jasmine tests, I am unable to trigger a click event on k-i-calendar span, because it is not visible in the DOM. I want to trigger the click to inspect the calendar widget and determine if the custom footer has been applied. Based on the attached screen shot, it appears the kendo-date-picker directive has been compiled because the element has been decorated with new attributes, however, it is missing the wrapping elements that I observe kendo in my application.
1) Is there a way to programatically open the calendar widget without relying on click events?
2) Is the kendo-date-picker widget responsible for wrapping the input element in additional elements?
Thanks
I'm wrapping Kendo controls for an application I'm writing in Aurelia.
I've written wrapper for Kendo Grid which works fine - I've used the "template" property in the grid options which accepts a callback. In this callback I dynamically compile the row template in the context of the row data which allows me to use Aurelia's markup instead of Kendo templates
Example:
<
kendo-grid
read.call
=
"getTimesheets($event)"
sortable.bind
=
"true"
>
<
kendo-grid-col
field
=
"TranDate"
heading
=
"Date"
>
<
kendo-template
>${ $item.TranDate | dateFormat }</
kendo-template
>
</
kendo-grid-col
>
</
kendo-grid
>
I'm trying to do the same with Calendar. I'd like to be able to provide a function which the calendar control will call when it's rendering the tiles on the Month view.
Currently the `month` property on Calendar options only seems to accept a JS object which allows a "content" string/kendo template.
Failing there being a callback, is there some documentation around kendo.template that I can use to write an Aurelia wrapper? I'm trying to dig around in the github repo to find where the kendo.template magic happens - any pointers or advice you could give me would be awesome!
Thanks in advance
I bought this program for this calendar at the bottom
http://www.telerik.com/kendo-ui/calendar
It's so beautiful I have to have it! But I'm stuck here
If my product is installed, how do I open it? How do I use it? Help?
I'm really very technologically savvy but quite befuddled with this one.
​