Cannot set dimensions for a resizable donut chart - javascript

I'm using kendo-ui to draw a donut chart like in this example
but I want it to resize when the container div resizes.
Not trouble if you don't set size or sizeHole since it ill automatic scale to fit the div.
Now I want my donut to be thin (outter radius slight greater than inner radius).
If I try to set the size to 25 pixels the donut now don't fills all my div and wort only the sizeHole resizes.
seriesDefaults: {
type: "donut",
size: 25,
...
If I try to set the sizehole to 250 it ill no more resizes
seriesDefaults: {
type: "donut",
sizeHole: 250,
...
If I try to set both attibutes ill affect each other and at the donut don't resizes at all
What I really need is to fix the donut dimensions to some % of the container, lets say size to 50% and sizeHole to 5% and let user drag/rezise the browser and keep the size/sizeHole/Container size aspect ratio.
I tried something using
$(window).resize(Resize(element));
...
function Resize(element) {
var minContainerSize = element[0].clientHeight;
if (minContainerSize > element[0].clientWidth || minContainerSize == 0)
minContainerSize = element[0].clientwidth;
return function () {
var chart = element.data("kendoChart");
var pieSeries = chart.options.seriesDefaults;
pieSeries.size = minContainerSize * 0.13;
//pieSeries.holeSize = minContainerSize * 0.299;
chart.refresh();
}
};
But it not worked out since I ill need to get the container size AFTER the resize event ends to get the new container size.
I can try to implement something like this after resize solution
but code is turning in a mess fast.
There's any nice (unknow for me) property to simple set the donut "thickness" in as percentual or proportional to the whole size (in a way it keeps resizing) or any workaroud not involving setTimeout?

I think you should be using holeSize not sizeHole.
http://www.telerik.com/forums/donut-chart-set-inner-and-outer-radius

Related

Highcharts Gantt - Set max height and scrollbar on yAxis

I'm doing a project using Highcharts Gantt, and I'm having a little trouble mastering it at the moment, especially the management of its height and Y axis.
Here Sandbox : https://codesandbox.io/s/nice-microservice-fuv76?file=/src/GanttMain.jsx:334-352
Let me explain:
What I want to do is set a maximum height and use scrollablePlotArea to make the y-axis scroll, while keeping the X-axis header.
The problem is: if I define a minHeight in scrollablePlotArea, the Y axis cuts the events until the minimum height defined (see sandbox), if I increase minHeight, it will cut less events, but the number is dynamic, so impossible to put a fixed value...
My question is: How to define a maximum height, while keeping a Y scroll that displays all events, While not changing the line height?
I tried several possibilities with the documentation, but nothing works...
I hope I made myself understood...
Thank you very much for your help.
This problem is a bug in Highcharts Gantt and it is similar to this issue: https://github.com/highcharts/highcharts/issues/13884
As a workaround you can dynamically set minHeight for scrollable plot area, example:
let allowChartUpdate = true;
Highcharts.ganttChart('container', {
chart: {
animation: false,
scrollablePlotArea: {
minHeight: 450
},
events: {
render: function() {
if (allowChartUpdate) {
allowChartUpdate = false;
this.update({
chart: {
scrollablePlotArea: {
minHeight: ...
}
}
});
allowChartUpdate = true;
}
}
}
},
...
});
Live demo: http://jsfiddle.net/BlackLabel/ywt2cmkn/
API Reference: https://api.highcharts.com/gantt/chart.events.render

Highstock/chart - On resize, don't crop chart

How to keep the chart from cropping on resize, but instead just change its viewport?
I find it a a bit hard to explain, so please let me know if more explanation is needed.
The chart on the first screenshot look nice, they have a 'normal spacing between them and the bars are not cropped. This one has a 1000px width.
Chart box wide
On the second screenshot, the chart is only 300px wide, and the candlesticks become 'cropped'..
Chart box cropped
Instead I would like to only change the viewport, so that the bars are never cropped and are always te same size.. Only the date-range (Viewport) changes.. You see more bars on a wider chart, but it doesn't meen the bars itself should grow or shrink.
I tried it with simple algoritme, but its very prone to error.
let parentW = this._elementRef.nativeElement.parentNode.clientWidth,
data = this.chart.xAxis[0].series[0].data,
barW = 10,
barsToShow = Math.ceil(parentW / barW),
firstBar = (data[data.length - barsToShow] || data[0]),
lastBar = data[data.length - 1];
this.chart.xAxis[0].setExtremes(firstBar.x, lastBar.x, redraw);
I couldn't find any setting in the Highcharts doc and google didn't help much either. Many thanks
Desired behaviour can be achieved with the changing data grouping groupPixelWidth property.
When the chart has smaller width than, e.g. 300px, groupPixelWdith can be set to a higher value.
responsive: {
rules: [{
chartOptions: {
plotOptions: {
series: {
dataGrouping: {
groupPixelWidth: 30
}
}
}
},
condition: {
maxWidth: 300
}
}]
}
example: http://jsfiddle.net/b894z8ug/1/

adjust responsive size of iframe with jquery

Hello I'm trying to adjust the size of youtube videos in my web. I want them to be responsive that I'm using jquery to do that. I have done it successfully but the thing is I want the height of youtube video to be decreased. Right now, it's too big. When I try to do it, the responsiveness feature is removed. Can you check how I can decrease the size of the video and keep the responsiveness?
<script>
function update_iframe_size(){
var parent_id = $("iframe").parent().attr("id");
if (parent_id == "main_video") {
var parent_class = $("iframe").parent().attr("class");
var parent_width = $("iframe").parent().width();
console.log(parent_class);
var width = $("iframe").css("width"); // $("iframe").width();
var height = $("iframe").css("height");
var ratio = parseInt(height)/parseInt(width);
var new_height = parseInt(parent_width) * ratio
$("iframe").css("width", parent_width);
$("iframe").css("height", new_height);
}
}
update_iframe_size()
$(window).bind("resize", function(){
// alert("reized");
update_iframe_size();
});
</script>
I tried to decrease the height that I did $("iframe").css("height", new_height*0.7);
but then the height is set to the one I want. However responsiveness gets messed up.
Refer following link: iFrame always take height and width 100% depends on parent div/element which is position relative.
http://jsfiddle.net/masau/7wrhm/

how to make a div match a dynamically created google chart height

I have a page that dynamically loads a google timeline chart onto a div. The timeline increases in height as you add items on to it. If the chart is smaller than the div, it will be visible with empty space at the bottom. If the chart is larger, it will show scrollbars on the side.
What I would like is for the container div to always show the full chart or, another way, I would like the container div height to dynamically match the height of the chart.
I have tried to approximate the average size of each chart line and then adjust the div height when I load the chart with:
$("#gantt_chart").height(data['num_contents']*46);
But, although that somehow works, it's far from perfect because the approximation on height starts to accumulate with each additional line and the empty space at the bottom of the div increases which is not an elegant solution at all.
How would I ensure that the container div always shows the full chart?
I hope this is clear enough.
Many thanks.
The chart determines its height by either checking the height option passed into the draw call, or by checking the container height if the height option is not specified. I would suggest using the option instead of changing the div height via jQuery. I find the best method for dynamically calculating the chart height is to take the height of a row (typically 41px) times the number of rows, plus some padding for the top and bottom:
var height = data.getNumberOfRows() * 41 + 30;
Though in the doc they have shown to adjust height of div from where we are specifying the id of timeline but I recommend you to have set the height from the internal method.
// set the height for padding(padding height)
var pH = 40;
// get total height of rows (row height)
var rH = dataTable.getNumberOfRows() * 15;
// total chart height (chart height)
var cH = rH + pH;
// Now set this chart height to the timeline via option object
// apart from height, other attributes are just optional
var options = {
height: chartHeight,
colors: ['#339900', '#e6e600', '#B00000'],
tooltip: {
isHtml: true
},
timeline: {
colorByRowLabel: false
},
avoidOverlappingGridLines: true
};
Been trying to do the same thing myself. The top answer wasn’t exactly right and caused an inner scroll bar to appear at times.
Here’s what worked for me:
var barLabelFontSize = 12; //default font size for bar labels
try{barLabelFontSize = options.timeline.barLabelStyle.fontSize; //bar height is dependent on the bar label's font size that you set...
}catch(e){}
var barHeight = barLabelFontSize * 1.196; //found in google api as: this.PU = 1.916 * this.UF.fontSize;
var barMargin = barLabelFontSize * 0.75; //found in google api as: this.Rfa = .75 * this.UF.fontSize;
var rowHeight = barHeight + barMargin * 2; //found in google api as: b.height = 2 * this.Rfa + this.PU (+additional complication for grouped bars, if anyone wants to try work that out it was: b.height = 2 * this.Rfa + this.PU * a.SI.length + this.Qfa * (a.SI.length - 1); (where Qfa is 0.583 * font size, and a.SI.length is the number of grouped bars displayed on the row)
var chartAreaHeight = rowHeight * dataTable.getNumberOfRows();
var axisHeight = 24; //worked out by querying: document.getElementById('timelineChart') getElementsByTagName('svg')[0].getBBox().height;
var whiteSpaceHeight = 28; //trail-and-error to find how much whitespace was required to stop a scroll bar appearing, 27 works too, but I rounded up to play it safe
var chartHeight = chartAreaHeight + axisHeight + whiteSpaceHeight;
You can also reverse engineer this to set the height of the bars using the bar label font size.

how to change size of raphael icons?

how I can change the width and the height of icons from free Raphael icons ?
I tried to use attr, tried to use % , like this var paper = Raphael("canvas", 100%, 100%);.
I need to do this: if I change the size of the parent block, the size of my icon changes too.
upd: i tried use "scale" and "transform", but icon resize from centre and not fit into the parent correctly
According to the Raphael.js documentation
var el = paper.rect(10, 20, 300, 200);
// translate 100, 100, rotate 45°, translate -100, 0
el.transform("t100,100r45t-100,0");
// if you want you can append or prepend transformations
el.transform("...t50,50");
el.transform("s2...");
// or even wrap
el.transform("t50,50...t-50-50");
// to reset transformation call method with empty string
el.transform("");
// to get current value call it without parameters
console.log(el.transform());
Check this Fiddle:
Demonstration of all the transformations
var icon = paper.rect(100,200,100,100);
var anim = Raphael.animation({
"10%":{transform:'t100,0'}, //transform on x-axis
"20%":{transform:'...t0,100'},//transform on y-axis
"30%":{transform:'...t-100,0'},//transform on x-axis(negative)
"40%":{transform:'...t0,-100'},//transform on y-axis(negative)
"50%":{transform:'...t200,200'},//transform diagonally
"60%":{transform:'...t-100,-100'},//transform diagonally(negative)
"70%":{transform:'...s1,1.5'},//scale y-axis
"80%":{transform:'...s1.5,1'},//scale x-axis
"90%":{transform:'...s2'},//scale in both direction
"100%":{transform:'...r45'},//rotate
},5000);
icon.animate(anim.delay(1000));
So in your case you'll have to do this:
var somename = paper.path("path coordinates").transform('s2,3');
where 2 is for width & 3 is for height.

Categories