Following the Telerik Kendo Area Chart example found here: http://demos.telerik.com/kendo-ui/dataviz/area-charts/index.html
I've been trying to apply the 'smooth' effect to my chart, but with no luck.
seriesDefaults: {
type: "area",
stack:false,
area: {
line: {
style: "smooth"
}
}
},
Maybe I'm going blind, but I can't see what's wrong.. I've tried a myriad of different options and included all of the css styles for example in the jsFiddle:
http://jsfiddle.net/markive/u33m6/
Any idea what I am doing wrong?
Related
I need some help with how Kendo Chart tool.
I am trying to plot a line graph with bookings on particular date. I have a booking on a particular day and can see the circular plot. If i hover on it i can see the tool tip which contains the summary of the booking. I want this tooltip to always be visible/open. At the moment it only happens on mouse over.
function createChart() {
$("#chart").kendoChart(data);
var tooltip = $("#chart").kendoTooltip({
width: 120,
position: "top",
visibe: true
}).data("kendoTooltip");
}
I am using Kendo for the first time and am very confused now. Any help will be much appreciated.
You can always show the tooltips or labels without having to hover over them by mouse, by using setting the visible of the series labels to true as follows:
seriesDefaults: {
type: "line",
labels: {
visible: true
}
}
You can check and see a demo example here: http://demos.telerik.com/kendo-ui/line-charts/local-data-binding
I have jqplot donut chart where I want to add chart labels in the center part. Also want to add scrolling for labels in the middle of graph. So only 1-2 labels in the center will be visible and rest will be visible when user scrolls.
Please have a look attached image. As per my knowledge, we can't add labels in the center of chart. Is there any way to do this? Appreciate your help.
My current code is as below:
<script type="text/javascript">
var _chart5_plot_properties;
_chart5_plot_properties = {
title: " ",
"seriesDefaults":{
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
sliceMargin: 0,
innerDiameter: 220,
startAngle: -90,
barPadding: 0,
padding: 3,
}
},
grid: {
shadow: false,
drawBorder: false,
shadowColor: "transparent"
},
highlighter: {
show: true,
tooltipLocation: "sw",
useAxesFormatters:false
}
}
plot2 = $.jqplot("chart2", chart_data, _chart5_plot_properties);
I couldn't find an option for this in jqPlot.
Though, jqPlot has 8 options to position the legend, but it does not have the center option. jqPlot Legend Locations
But after tweaking it a bit, I could accomplish it using jQuery. Since we need to require jQuery to render/draw jqPlot charts, so I thought of using jQuery rather than pure Javascript.
I have used two functions defineDimensionsForLegendTable(parentContainerID, dimensions) and fixLegendsToCenter(parentContainerID)
Other important things that you should not miss out while using these functions
Make sure you include the jquery.jqplot.js, jqplot.pieRenderer.js, jqplot.donutRenderer.js, jquery.jqplot.css files (or the minified versions - .min.js)
Set placement to outsideGrid in legendOptions
legend: { show:true, placement: 'outsideGrid' }
Give a higher z-index to the legend-table
#chart2 .jqplot-table-legend{
z-index: 99999;
}
Find the working fiddle here - jqPlot Donut Chart with legend in the center
Note: If the chart does not show up in Google Chrome, try opening it in Firefox or some other browser.
Remove the console.log lines from the code ;-)
You can use Foundation or Bootstrap to beautify the scrollbar. :-)
Hope it helps :-)
I have craete KendoChart pie with legend.
For some reason legend by default is interactive and by clicking on legend items chart enables/disables pieces of the pie.
I didn't find any way to disable this behavior: http://docs.telerik.com/kendo-ui/api/dataviz/chart
Could it be disabled?
I needed to do the same thing and after some research found out in the Kendo UI documentation the following solution:
- hook to the legendItemClick and legendItemHover events of the chart
- in the handler call e.preventDefault();
Here is the code I used (MVVM-style):
In HTML:
data-bind="events: { legendItemClick: disableEvent, legendItemHover: disableEvent } "
In the ViewModel:
disableEvent: function(e) {
e.preventDefault();
}
Here is the article - http://docs.telerik.com/kendo-ui/api/dataviz/chart
Use the code Below
legend: {
position: "bottom",
visible: false
},
I am sure this is a stupid question, but I'm just not seeing it.
I have a page with many Kendo charts. One of these appears where the bars go from left to right. The others appear where the bars go from bottom to top. What on earth is the property that controls this? I simply don't see it. I wan them all to be vertical in nature.
The single chart that is going from left to right is also the only chart that has its series predefined ([x,y,z] rather than using dataSource). It also is the only stacked chart I have. Maybe something there causes this?
The "bar" type sets the bars horizontal:
$("#chart").kendoChart({
seriesDefaults: {
type: "bar"
}
});
And the "column" type sets the bars vertical:
$("#chart").kendoChart({
seriesDefaults: {
type: "column"
}
});
http://jsfiddle.net/Jn4tT/
var data= [ {"a":2, "b":5,"c":3 },
{"a":5, "b":15,"c":7 },
{"a":1, "b":5,"c":7 } ];
chart1.addAxis("a");
chart1.addAxis("b");
chart1.addAxis("c");
chart1.addSeries("min", {data: data[0]}, { fill: "blue" });
chart1.addSeries("max", {data: data[1] }, { fill: "blue" });
chart1.addSeries("Answered", {data: data[2]}, { fill: "blue" });
var tip = new Tooltip(chart1, "default", {
text: function(o){
console.log(o); //no axis to the current data point
}
});
chart1.render();
I can get the chart to render if I remove the addAxis above, but no matter how I add axis, on a spider type chart, it throws a "can't find axis" error.
Without the axis, it doesn't look like I can set custom tooltips (only want to show the data point, not the series and axis title). And it doesn't look like I have control of the axis labels, fonts, maxlabelsize, etc.
This may be added as a feature in future versions of dojo, but currently after a lot of fighting with it. I cracked open the library and added custom code to handle this and a lot of other things. Basically, just opening the spider.js and common.js files used in generating the spider diagrams. Was able to wrap the labels in my own class's. And also inserted a title attribute for each with the desired label. Using an external tooltip library, I now have a lot of control over the tooltips in spider diagrams.