I am trying to get the my Kendo UI Chart title positioned to the right of the chart. Is this possible? I see in the docs it says "top" or "bottom" but has anyone figured out a way to put the titles to the right of the chart?
This is not a good solution, but you cat do it through padding:
title: {
text: "Title",
padding: {
top: 10,
left: -100
}}
Related
When I use the chartarea of the Kendochart, it defines the size of the outer area and as result the legend of the chart doesn't show fully.
How can we set a fix size only for the pie chart and not the are that contains both the legend and the chart?
tried chartarea, css k-chart sizing or even .k-chart svn, padding, css width
1)
$("#chart").kendoChart({
chartArea: {
width: 200,
height: 200
},
....
this changes the area that also contains the legends and not only the chart
2)
<style>
.k-chart {
height: 250px;
width: 250px;
}
</style>
this resizes the area too
3)
seriesDefaults: {
labels: {
visible: false,
background: "transparent",
template: "#= category #: #= value#"
},
padding: 50
},
also tried using padding to seriesDeaults. This makes the charts smaller still when I have two same width divs with charts with different legends, their size is not the same. I need my charts to have the exact same size and position in the chartArea.
fix width of pie chart only
When you zoom in AmCharts scroll bar, "Show all" button appears and overlays with link to AmCharts website. Is there a way to force AmCharts link or "Show all" button to be shown in left corner?
Found nothing in docs.
It's possible to hide "Show all" button by setting chart's zoomOutText property to empty string:
var chart = AmCharts.makeChart('chartdiv', {
type: 'serial',
zoomOutText: ''
...
});
and place your own custom button anywhere you wish:
HTML
<div class="container">
<div id="chartdiv"></div>
<button class="show-all-button">Show all</button>
</div>
CSS
.container {
position: relative;
...
}
#chartdiv {
position: relative;
width: 100%;
height: 100%;
}
.show-all-button {
position: absolute;
top: 15px;
left: 15px;
...
}
To make the button working add the following click event handler:
var showAllButton = document.querySelector('.show-all-button');
showAllButton.addEventListener('click', function() {
chart.zoomOut();
});
This approach is useful when you need to add custom controls over your chart.
Indeed, there are no config options to move the "Show all" button.
However, you can set the position of branding link using creditsPosition
I.e.:
AmCharts.makeChart("chartdiv", {
"type": "serial",
"creditsPosition": "bottom-left",
...
});
I have a bar chart that is not accepting the padding that should be placed around the plotArea as specified.
The expectation is to have a graph that has a few pixels between the bars and the axis lines. Everything is set up and renders as expected except the padding.
Here is a fiddle of what I have so far
http://jsfiddle.net/itanex/KdfUv/
plotArea: {
background: "none",
padding: {
left: 2,
bottom: 2
}
},
The arrows point to the padding that I want to apply between the axis lines and the graph bars
Okay, the works, but not so as you expect:
http://jsfiddle.net/fool/KdfUv/7/
plotArea: {
background: "yellow",
padding: 10
},
I just copypasted the code from the tutorial:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rect-tutorial/
The problem is that the style setting for canvas{} isn't taken in account.
I clearly know where the canvas is and that it SHOULD work because:
A) I've already done it, but I can't get a working copy of the code
B) Firebug tells me that there IS a canvas... So why it doesn't work?
My final goal is to distinguish the stage visually (by a border or a proper background color)
Thank you!
Well, alternatively you can draw a border with background color inside KineticJS by using a Kinetic.Rect to distinguish the stage visually:
var border = new Kinetic.Rect({
width: stage.getWidth(),
height: stage.getHeight(),
stroke: 'black',
strokeWidth: 4, //Border Size in Pixels
fill: '#00FF00' //Background Color
});
jsfiddle
The only tiny issue with this is that you'll get 1 Extra Kinetic Node inside your canvas. If you wanna keep the solution outside the canvas, than style your #container to be the same width and height as your stage/canvas, and then wrap the #container inside another <div> and give that <div> the original styling you had on #container. Like this:
HTML:
<div id="containerWrapper">
<div id="container"></div>
</div>
CSS:
#containerWrapper {
/*#container's old styles here*/
}
#container {
width: widthOfStage;
height: heightOfStage;
border: 4px solid #000;
background:#00FF00;
}
2nd example jsfiddle
It seems Pager functionality is currently disabled for treegrid. But I would like to add some custom icons like export icon, refresh to the top pagination as shown below. Are there any other alternatives to achieve this functionality for treegrid as well. Thanks in advance...
First of all I would recommend you to read the answer which describe how to add toppager to the grid. You can do the same with tree grid.
The id of the toppager will be constructed from the grid id. If the grid id for example is "treegrid", then the id of the toppager will be "treegrid_toppager". The pager will hold tree parts: left, center and right. Because the toppager of the tree grid will be always empty you can save the place on the pager if you remove or hide the center part:
$('#treegrid_toppager_center').hide();
The next improvement in position of the texts in the navigator bar you can archive if you would include the text inside of <span> element which CSS styles you can define yourself. For example
$grid.jqGrid('navGrid', '#treegrid_toppager',
{add: false, edit: false, del: false, search: false,
refreshtext: '<span class="ui-pg-text">Refresh</span>'});
$grid.jqGrid('navButtonAdd', '#treegrid_toppager', {
caption: '<span class="ui-pg-text">Columns</span>',
buttonicon: "ui-icon-wrench",
onClickButton: function () {
this.jqGrid("columnChooser");
}
});
and
.ui-jqgrid-toppager .navtable .ui-pg-div .ui-pg-text {
position: relative;
top: 1px;
padding-right: 3px;
float: left;
}
Additionally I find better to include one more additional CSS definition
.ui-jqgrid-toppager .navtable {
padding-top: 1px;
padding-bottom: 0px;
}
which can a little improve the position of the buttons in the toppager.
The results you can see on the following demo: