18 Answers, 1 is accepted
By default the Chart should fit the available space in the container. However, if the widget is initially hidden it would use its default dimensions. In that case I would suggest calling the redraw() method for the chart after it is displayed.
In case the behavior persists please send us a dojo sample where the behavior is observed so we can examine it locally.
Regards,
Viktor Tachev
Progress Telerik
Rank 1
Dear Viktor,
Thanks for your response. How do I perform the redraw method in asp.net core?
This is my current code:
<div id="gauge-container"> @(Html.Kendo().RadialGauge() .Name("gauge") .Pointer(pointer => pointer.Value(69).Color("black")) .Scale(scale => scale .MinorUnit(5) //5 .StartAngle(-60) .EndAngle(240) .Max(100) .RangeSize(50) .Labels(labels => labels .Position(GaugeRadialScaleLabelsPosition.Outside).Format("{0}%").Color("black") //.Border(1, "black", ChartDashType.Solid) ) .Ranges(ranges => { ranges.Add().From(0).To(20).Color("green"); ranges.Add().From(20).To(40).Color("#EE7600"); ranges.Add().From(40).To(100).Color("#cc0000"); }) ) )</div><style> #gauge-container { text-align: center; margin: auto; padding-top: 27px; } #gauge { width: 500px; height: 330px; } #gauge svg { left: 0 !important; }</style>
I am looking forward to your reply.
In order to get reference of the widget you can use its Name. The JavaScript would look similar to the following:
var gauge = $("#gauge").data("kendoRadialGauge");gauge.redraw();Regards,
Viktor Tachev
Progress Telerik
Rank 1
Dear Viktor,
Thanks for your reply. I will paste it in my JS! Do I need to remove some of the CSS code I have above?
I have a dojo example here: https://dojo.telerik.com/UluCUqev
ONLY: I have no clue how to convert this:
@(Html.Kendo().RadialGauge() .Name("gauge") .Pointer(pointer => pointer.Value(69).Color("black")) .Scale(scale => scale .MinorUnit(5) //5 .StartAngle(-60) .EndAngle(240) .Max(100) .RangeSize(50) .Labels(labels => labels .Position(GaugeRadialScaleLabelsPosition.Outside).Format("{0}%").Color("black") //.Border(1, "black", ChartDashType.Solid) ) .Ranges(ranges => { ranges.Add().From(0).To(20).Color("green"); ranges.Add().From(20).To(40).Color("#EE7600"); ranges.Add().From(40).To(100).Color("#cc0000"); }) ))to the format so it works in the fiddle.
Kind regards
I modified the dojo using the options of the Gauge that you have. Also, I defined the width and height of the gauge-container element so that the widget can resize correctly.
Give the sample a try and let me know how it works for you.
Regards,
Viktor Tachev
Progress Telerik
Rank 1
Dear Viktor,
thanks for your reply, there are still some errors:
- When it is loading. The first 2 seconds it loads out of the box and after it jumps in box.
- By resizing the canvas the gauge gets a weird triangle form instead of a half circle.
Could those be because of the css? So yes, can you try to change it correctly? In the documentation there is that css provided..
Kind regards,
Chili
The delay is added intentionally to show how the widget is resized. If you remove the setTimeout in the code the Gauge will be resized without delay.
About the ranges forming a triangle. The width of the range indicators can be configured via the rangeSize option. In order to make the range indicators narrower I would suggest decreasing the rangeSize value or removing the option altogether.
The updated dojo below reflects the described modifications:
Regards,
Viktor Tachev
Progress Telerik
Rank 1
Hi Viktor,
I have changed my rangesize a bit. Also, when I set my box to example 500 x 500px and I hit reload. The gauge wont spread full in the box. It stays it same position. (yes i have out commented the setTimeout).
https://dojo.telerik.com/UluCUqev/11
Kind regards.
The widget is resized to take the available width and height of its container. In the latest example the #gauge-container element has width and height set to 200 pixels. This us why the RadialGauge is resized to that dimensions. If the #gauge-container div is configured to take all available space of its parent the resizing logic would work as expected.
Check out the updated dojo for reference:
Regards,
Viktor Tachev
Progress Telerik
Rank 1
Hey Viktor,
When I copied the code from the latest dojo you've sent. It still wont work 100%...
In my own example I have a grid that creates 2 boxes of equal width and height. By resizing the boxes will get bigger/smaller. All the charts will be looped. Only still with the gauge the boxes get messed up and the other charts are pushed out of their boxes.
Now I have this as css (changed the width and height from the #gauge from the dojo):
#gauge-container { width: 100%; height: 100%; text-align: center; margin: auto; } #gauge { width: auto; height: auto; }
How can I make it work so that every chart will display normal? (gauge is causing the problem).
I want this to work for Mobile...
Hopefully this is able to work
Kind regards.
Could you please create a dojo example with the scenario that you have and the exact issue that you are facing? Calling the redraw method after the resizing, as my colleague suggested, should work correctly.
Looking forward to your reply with the dojo example.
Regards,
Konstantin Dikov
Progress Telerik
Rank 1
Dear admins,
Here is in full detail what problem I am facing and what I want:
I loop through a number. By looping I create boxes and in those boxes are the charts. Now do I have a grid with the css property of:
grid-template-columns: repeat(2, auto);
This will create 2 boxes next to eachother till the loop is finished. Since the boxes arent square by resizing I made something in Javascript so by resizing the boxes still get equal width and height (also on onload). If I have for example in chrome Mobile S selected, I should get 2 boxes with equal width and height (153 by 153px). Now when I implement the gauge for example, the gauge will override the width and height of the box where it is in. Because of this I will mostly of the time only see 1 box(the one with the gauge) or it looks horrible. By commenting out the gauge and just showing the other charts(scatterbar and bar), they wont affect the box. But, they instead get very small of dont display anything.
What I want:
1. To make the gauge appear normal and won't override the w&h of the box.
2. To display the others charts properly even on mobile S version.
I have mad a Dojo example where I've tried my best to show what's wrong
https://dojo.telerik.com/UMiBuKoS
Hopefully you can give me some information to solve this.
Kind regards.
When percentage value is used for width/height of the elements, all their wrapping containers should have either percentage value or explicit width/height. With that in mind, you could try setting the percentage width/height to the parent element of the Gauge as well:
setTimeout(function() { $("#gauge").parent().css({ width: "100%", height: "100%" }); var gauge = $("#gauge").css({ width: "100%", height: "100%" }).data("kendoRadialGauge"); gauge.redraw(); $("#chart").parent().css({ width: "100%", height: "100%" }); var CART = $("#chart").css({ width: "100%", height: "100%" }).data("kendoRadialGauge"); CART.redraw();});Please have in mind that the Gauge could not change the width/height of the parent elements and it is responsible for its won elements only.
Regards,
Konstantin Dikov
Progress Telerik
Rank 1
Hi,
Long time ago, but I have made the gauges fit in the container!
Only now the other charts are going out of their boxes(bar, scatter). For the gauges I used flexbox with subtext so the gauge will fill up the remainig space (https://codepen.io/bjaeken/pen/WLMbMo). The picture is an example how it looks now. I tried to add chartarea height (this works). But the height is a fixed number, and I want it to be changing when the screen resizes. (Yes I am using for all my charts the resize and refresh functions)
As you can see. it is only going out of the box at the bottom. I also use the codepen css and the css mentioned in the earlier posts. I hope there is an solution that the charts will stay in their boxes in a small resolution.
Kind regards
Please create a dojo example with your current implementation, so we can inspect it and see if we can suggest anything from the perspective of the Chart widget to resolve the problem:
Regards,
Konstantin Dikov
Progress Telerik
Rank 1
Hello,
I have tried my best to clone my project. As you can see in the dojo the graph is getting its own height. (the border stops at a certain point.) When I use .Height(number) the graph will get that height. But it will be fixed then.
I can refer to the dojo I have posted earlier. As you see, the right chart is going out of its box (border bottom disappears and stops at 8%). Keep in mind. the gauge is working(even on resize). I desire to get the chart being full displayed. without having fixed heights. I tried to make a example of what I have now. But since the code will be used later I have to keep it as small as possible.
dojo2 In this dojo the height is 250px for now. By resizing the box will increase and descrease (I am doing this with JS and can't undo this). Only the chart will keep its own height.
This is the problem I am facing.
My desired result:
Let the chart stay in the given height and width even when there is subtext underneath it or not. By my gauges for example, the subtext stays at its positions and the gauge fils up the remaining space
Hopefully this is clear.
Kind regards
Rank 1
Hello, after some days I managed to get it! I removed the class k-chart every chart has. And added flex-grow: 2. Only, how can I remove the k-chart class and add the style? I can't simply target the id nor the name since they change all the time. Also, can I post above be removed?
Thanks in advance.
Rank 1
Hi again,
I have got the stuff above working.