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
Related
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 :-)
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?
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"
}
});
I have a jqplot object that has x-axis tick marks/labels rendered on bottom. Basically, there is a stack of charts, all using the same x-axis. I would like to reclaim the bottom axis area from the middle charts for the plot lines.
How can I dynamically relocate the x-axis to top (i.e., northward)
How to make the x-axis label go away? For this I tried
plotobject.axes.xaxis.showLabel = false;
plotobject.replot();
but that seems to have no visible effect. plotobject is what's returned by the original $.jqplot() call and I am using $.jqplot.DateAxisRenderer for xaxis.renderer. I have access only to the plot object.
Thanks
This simple CSS solution is working for me to put the x-axis labels on top of the chart.
.jqplot-xaxis {
position: relative;
top: -30px;
}
well, the label for each axis (which is the axis title) has it's own renderer, and thus it's own options. I use the plugin one ( http://www.jqplot.com/docs/files/plugins/jqplot-canvasAxisLabelRenderer-js.html ) but also the default has a show: true/false setting. ( http://www.jqplot.com/docs/files/jqplot-axisLabelRenderer-js.html )
it should look something like this:
axes: {
xaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
label: 'Dates',
labelOptions: {
show: true,
fontSize: '10pt'
},
}
}
For putting the x-axis on top, I'm not sure what your problem realy is, but I try to select it with jquery and set it's z-index to something high to bring it on top. Take a look at http://www.jqplot.com/docs/files/jqPlotCssStyling-txt.html for some selection ideas.
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.