FAQ Database Discussion Community


Mouse Hover or Click Event in Line Chart

javascript,kendo-ui,kendo-chart
When user hovers the mouse on the #chart, then second data is drawn. However I would like to know when user hovers the mouse on the first data line by itself not #chart then second data line is drawn. function createChart() { $("#chart") .kendoChart({ xAxis: {}, yAxis: {}, seriesDefaults: {type:...

Event does not fire up in Kendo

javascript,kendo-ui,kendo-chart
The mouse hover event does not fire up. I could not able to figure that out function createChart() { $("#chart") .kendoChart({ xAxis: {}, yAxis: {}, seriesDefaults: {type: "scatterLine" }, series: [{data: stats2}], }) } // the following part does not fire up var isHover = false; $("#chart").hover( function () {...

Click on y (value Axis) title label (text)

javascript,kendo-ui,kendo-chart
I have implemented the following code which allows user to click on y axis itself (value Axis, numeric axis) with using axisLabelClick event. chart.bind("axisLabelClick", clickEvent); chart.options.axisLabelClick = clickEvent; function clickEvent (e) { if (e.axis.type = "numeric") { if (!self.isClick) { self.isClick= true; } else { self.isClick= false; } } }...

Bar graph Stack data on the top of each other

javascript,kendo-ui,kendo-chart
I am using this chart implementation. However, it disperse my data rather than stack on the top of each other. I want to stack my first array on 1970, the second one on 1975. In other words, I would like to have two stacked bar rather than have five. I...

Change Corresponding Bar Stack Color

javascript,kendo-ui,kendo-chart
Currently I have the following implementation which assumes all items are different; in other words, there are no common/grouped objects in the dataset. It works fine. However, I would like to know what if there are two common/grouped objects in the dataset, is there a way to change the corresponding...

Data Event Binding on Chart

javascript,kendo-ui,kendo-chart
As a default, chart shows data for 2001-2002 ; I would like to know when user hover the mouse on the chart it will show data for 2002-2003. Once mouser is out of the chart then it should go back to default stage. //The first data comes from 2001-2002 var...

Cursor clickable icon appear when mouse over event happened

javascript,kendo-ui,kendo-chart
I have the following implementation. When user clicks on the y axis title label, then message pop up. However, there is no indication for the first time user that shows y axis label clickable. Therefore I would like to know how to implement cursor clickable icon (hand icon) when mouse...

Hover event on kendo chart

kendo-ui,kendo-chart
I am using kenod box plot in my project. Is there any way i can get a hover event when the user hovers over the box plot chart? Not the(onserieshover)event ,but on simply hover on chart area? Help needed...

Loading Animation Image Implementation

javascript,kendo-ui,kendo-chart
I have the following implementation, it works and functional. However I would like to add a loading animation with setup a 4 seconds. requestStart: function () { kendo.ui.progress($("#loading"), true); }, requestEnd: function () { kendo.ui.progress($("#loading"), false); } CURRENT IMPLEMENTATION I have came across the following fiddle, however I could not...

Method Trigger in Kendo

javascript,kendo-ui,kendo-chart
I have the dummy data in the following jsfiddle : http://jsfiddle.net/epvg86qu/18/ and when user clicks on the line, then it calls DetailChart_Click() method draws other data series (stats,stats2), viceversa. However when I try to implement this functionality (seriesClick) in my actual project, it only calls DetailChart_Click() method once when it...

Updating a Kendo Chart series' data with a variable causes the redraw to draw the column off the chart

javascript,kendo-chart
I am attempting to create an interactive Kendo Chart. There are three series: CAPITAL, FUEL, and OM. Each series has three data values: PROPANE, DIESEL, and ELECTRIC. What I am attempting to do is wire up a text box on change to update the PROPANE => CAPITAL value of the...

Add new line in Tooltip

javascript,kendo-ui,kendo-chart
I have the following project : http://jsfiddle.net/3yhbyy2g/70/ I would like to know how to show tooltip with multiple lines rather than one line. tooltip:{visible:true,template: "x : #=kendo.format('{0:n0}', (Math.abs(dataItem.x)))#, y : #=kendo.format('{0:n0}', (Math.abs(dataItem.y)))#, k : #=kendo.format('{0:n0}', (Math.abs(dataItem.k)))# "} ...

Kendo Bar Chart With Multiple Vertical Axis

javascript,jquery,kendo-ui,kendo-chart
I have a chart where I would like to display two vertical axis: value and percentages for alcohol & drugs in a given month. Graph is showing columns for drug and alcohol by linking them to value field but it is not displaying percentages. I want the graph to show...

Allowing screen reader to read Kendo UI Chart data

c#,kendo-ui,screen-readers,kendo-chart,wcag
The website I'm developing needs to comply with the WCAG 2.0 guidelines, meaning a person should be able to access all information on the site using a screen reader. Since it's a BI dashboard making heavy use of Kendo Charts it failed the test. I need a way for screen...

Chart Area and Legend Area automatically updates

javascript,kendo-ui,kendo-chart
I have a chart and implemented seriesClick event. When User clicks it loads dataA, when user click again it loads dataB. It is fully implemented and it is functional. However my question is how to fix chart area and legend area. Legend length differs in dataA and dataB, therefore when...

Legend Duplication

javascript,kendo-ui,kendo-chart
I have the following implementation and it is functional. I wonder how I could able to fix duplicate of legend in my current implementation. Please watch fname="NY" for (var i=0;i<e.series.data.length;i++){ if (e.series.data[i].valueColor != "" && e.series.data[i].fname != "") { color = e.series.data[i].valueColor, legendName=e.series.data[i].fname } } FIDDLE...

Displaying data object in wrong category

javascript,kendo-ui,kendo-chart
I have the following implementation: http://jsfiddle.net/c1dfuj1s/3/ I have two catgeories : 1970 and 1975. My question is that even though I am adding a data to 1975, but it adds to 1970. { "series": "item6", "category": "1975", "value": 105 }, ...

Legend and Bar Chart Colors do not match

javascript,kendo-ui,kendo-chart
I have the following implementation and I used colorField to assign colors. However, even though I color the bar stack objects properly, but this color does not match with legend color. I thought it should be binded somehow, how should I fix it? I have used colorField, because I want...

Assigning DataSource from Modal Controller

javascript,kendo-ui,kendo-chart
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: {...

Mouse over event and cursor pointer on the line series

javascript,kendo-ui,kendo-chart
I have the following implementation and it is functional. When user clicks on the line series, then it loads another data. I want to give an impression to the first time user that line series clickable with implementing mouse over event and cursor: pointer. var isHover=false; function onClick (e) {...

Multiple objects handling in ToolTip

javascript,kendo-ui,kendo-dataviz,kendo-chart
If I have 3 objects in my array, Kendo UI does not show any tooltips. However, if I have only two objects in the array, it works fine. Here is the code: $("#chart").kendoChart({ xAxis: {}, yAxis: {}, seriesDefaults: {type: "scatterLine" }, series: [{data: stats}], tooltip:{visible:true} }); Here is the fiddle...

Highlight clicked bar series

javascript,kendo-ui,kendo-chart
Is there any built in method in kendo when user clicks on the bar chart item, then it will highlight all corresponding items? For example in the following fiddle, there are five items. If I click item1 in the first bar (1970), it should highlight item1 in second bar (1975)....

Multi-Color Line

javascript,kendo-ui,telerik,kendo-chart
In the data, there is a object property called clr which is actually contains color information of corresponding object. I would like to draw a single line with multiple colors. However so far, I could not able to make it work. Here is a small sample of my dataset. {x:...

MouseOver with Cursor Pointer on Y Axis

javascript,kendo-ui,kendo-chart
The following implementation shows mouseover event with cursor pointer on y axis title label. It works and functional. However, I want to implement mouseover event with cursor pointer on y axis (numeric axis) as well. CURRENT IMPLEMENTATION...

Chart Shared Tooltip Title

kendo-ui,kendo-asp.net-mvc,kendo-chart,kendo-tooltip
So I have a chart which has a shared tooltip across multiple series. This is a time-based series, with categories of each hour in a day. I'm able to correctly format the labels in the chart just fine. The issue I have is that I can't seem to change the...

Series Hover to Highlight Border Color

javascript,kendo-ui,kendo-chart
I have the following implementation which actually highlight paired objects on the stacked bar chart. However, I would like to know whether or not there is a way to implement more pronounced highlight effect. For example make bar paired bar stacks border black when hover the mouse. seriesHover: function (e)...

Legend Label Customizaton not working in Model Controller

javascript,kendo-ui,kendo-chart
Based on the following implementation, I could able to customize legend labels, it works when I put in my viewcontroller series: [{ field: "value", name :"#= group.items[0].fname || group.items[1].fname#" }], However, when I put in my model view controller, then it does not work. chart.setDataSource(theDataSource); chart.options.series.name = "#= group.items[0].fname ||...

How to use kendo chart data in Tooltip Template?

kendo-ui,kendo-chart
I'm relatively new in kendo chart. I have a chart as following; @(Html.Kendo().Chart<PlodWareWeb.Models.TotalDrilledBySize>() .Name("totalDrilledBySizeChart") .Title("Total Drilled By Size") .ChartArea(chartArea => chartArea.Background("transparent").Height(350)) .DataSource(dataSource => dataSource.Read(read => read.Action("GetTotalDrilledBySizeChartData", "Home"))) .Legend(legend => legend.Visible(false)) .Series(series => { series.Column(model => model.TotalDrilled, model => model.GroupName); })...

Custom Legend Label

javascript,kendo-ui,kendo-chart
I have the following implementation, it works and functional. However I would like to assign fname attribute as a legend, not series attribute. I believe that I need to work on the following line of code, but I could not able to figure out yet. var label = new kendo.drawing.Text(e.series.name,...

Legend.labels.template implementation

javascript,kendo-ui,kendo-chart
My implementation has been working fine until I have added legend.labels.template = "# dataItem.fName # "; I want to format legend to make it same with tooltip. legend:{ visible:true, labels: { template: "#= dataItem.fname #" } }, Here is JSFIDDLE. In this fiddle, when you commented out legend.label.templates, then it...

Multiple Series Line Color

javascript,kendo-ui,kendo-chart
I have following implementation. It is implemented and functional. http://dojo.telerik.com/uCIhu However, I would like to know is it possible to change line color when grade is data[i]<60 make it red, data[i]>=60 make it blue. $("#chart").kendoChart({ series: [{ name: "Grading", color: function(point){return point.value<60 ? "red" : "blue"; }, width: 1, size:...

Kendo UI AngularJS Pie Chart seriesClick function does not change variables

angularjs,kendo-ui,kendo-dataviz,kendo-chart
In KendoUI AngularJS demo, telerik shows a seriesHover action that I thought was pretty cool. I needed an onClick action rather than hover over, thankfully it was as simple as changing the tag from k-series-hover to k-series-click. I got it do show an alert or log a message in console...

Disable Tooltip Gradient

javascript,kendo-ui,kendo-chart
I would like to pass multiple parameters to the Tooltip, and I wrote the following code as a placeholder. However, my Tooltip background color does not uniform, there is gradient. How could I disable ? chart.options.tooltip.template = "Name : AnyName<br> First Value: Any Value 1 <br> Second Value: Any Value...

Loading Image Animation only once

javascript,kendo-ui,kendo-chart
I have the following implementation and it is fully functional. I need to show loading animation image first time only, my current implementation it shows loading animation all the time. var theDataSource = new kendo.data.DataSource({ transport: { read: function (op) { setTimeout(function () { op.success(data); }, 4000); } }, group:...

OnsenUI and Kendo pie chart issue

json,kendo-ui,onsen-ui,kendo-chart
I am using Kendo pie chart in onsenui framework and it works great if i use function createChart() { $("#chart").kendoChart({ title: { position: "bottom", text: "Share of Internet Population Growth, 2007 - 2012" }, legend: { visible: false }, chartArea: { background: "" }, seriesDefaults: { labels: { visible: true,...

Showing data by percentage on Pie Charts in MVC

asp.net-mvc,kendo-dataviz,kendo-ui-mvc,kendo-chart
In my MVC5 application I have table lets's say it's name is Student and every student belonging to a Team. I want to show students according to their teams by percentage. For this reason I also created a ViewModel in order to join Student entity with Team entity. So, how...

Value Axis Title Click Event

javascript,kendo-ui,kendo-chart
I have came across the following example while I have been looking for click event options. The following example shows when user click on category or numeric axis, it fires up an event. However I would like to know is there an event when user clicks on the title of...

Bar Stack Category Column

javascript,kendo-ui,kendo-chart
I have the following implementation: http://jsfiddle.net/7dhb4jh0/1/ Even though I have data for men and women category, all data displayed in one column. Women category is missing. { "series": "item5", "category": "Men", "value": 54 }, { "series": "item7", "category": "Women", "value": 50 }, ...

Transforming a JavaScript array of objects

javascript,jquery,underscore.js,kendo-chart
I have the following two JavaScript arrays: var grades = [ { name: "A", color: "#00FF00" }, { name: "B", color: "#88CC00" }, { name: "C", color: "#AAAA00" }, { name: "D", color: "#CC8800" }, { name: "F", color: "#FF0000" }]; var studentGrades = [ { Student: "James", Class: "Math",...

Changing the Start point in Stack Bar Chart

javascript,kendo-ui,kendo-chart
I have came across the following implementation. http://jsfiddle.net/ao617j2j/1/ As a default stack bar chart starts from 0, however, what if I want to start from +200. Is it possible? categoryAxis: { categories: ["First Stock", "Second Stock", "Third Stock", "Fourth Stock", "Fifth Stock"], axisCrossingValues: [0, 0, 10, 10], }, ...

Kendo Scatter Chart - Reverse Dates in xAxis?

kendo-ui,kendo-dataviz,kendo-chart
I'm building a page with a Kendo scatter chart of data over time. The only catch is that the client wants the most recent data to the left. I've sorted the input datasource by date descending, but that seems to be blithely ignored, with the chart stubbornly plotting the data...

Category Axis Interaction

javascript,kendo-ui,kendo-chart
I have the following implementation. http://jsfiddle.net/ao617j2j/ I would like to know when a user clicks on the categoryAxis label, it should hide/unhide corresponding bar stack. categoryAxis: { categories: ["First Stock", "Second Stock", "Third Stock", "Fourth Stock", "Fifth Stock"], }, ...