Is there any way to resize highcharts rendered image after window resize?
I have set up a fiddle file here.
events: {
load: function() {
var img = this.renderer.image('http://www.highcharts.com/demo/gfx/skies.jpg', (200),30,200,300);
img.add();
}
}
Click on the window restore down button, then you will see the image is not at the correct place. Can someone help me with this?
try using the redraw event to re-size the image
Fiddle Demo Here that should give you a start,
make sure you have a reference for the image var img; so you can remove it and added with the redraw event
Related
I'm using zoomcharts geomap in a div in my page. While I place the cursor over the map and scroll, then the map will zoom. I want to disable the zoom functionality and I want to scroll the page if I scroll while cursor is over the map.
I tried to disabled the zoom using the zoomcharts documentation below.
Interaction: {
zooming: {
enabled: false
}
}
This helps to disable the zoom only but I want the page to scroll. any idea on how to do the same?
You can do it like this:
chart = new GeoChart(options);
setTimeout(function(){
chart._impl._map.scrollWheelZoom.disable();
}, 100);
I have a Kendo ui chart which displays a column chart from a dynamic data source. But occassionally, the chart opens half the size of the available space. When I click on some links or change the date, it resizes itself. Any idea why its causing it?
In the datasource change event, its showing the container div's width as 0 when it shows this behaviour. I can give more details if needed
I tried the refresh method as given in one of the answers but its not of help
This happens generally when you open a chart in a animated window before it is finished expanding.
My suggestion is to redraw the chart when you are sure everything is loaded and fully opened.
$("#myChart").data("kendoChart").redraw();
If you have not disabled animations you may want to do that before this and re-enable them after.
$("#myChart").data("kendoChart").options.transitions = false;
When you have got all the necessary data in the controller you can call a Javascript CallBack function in which you can set the transition to false and then redraw the chart and set transition to true, also you can hide the chart by default and make it visible on Javascript CallBack function
Try this
var chart=$("#chart").data("kendoChart");
//to check the chart exist or not if exist then redraw it..
if(chart)
{
chart.redraw();
}
Thanks
This is what I using for my charts:
if($("#areaChart").data("kendoChart")) {
$("#areaChart svg").width(Number($('.k-content').width()));
$("#areaChart svg").height(Number($('.k-content').height()));
$("#areaChart").data("kendoChart").refresh();
}
Taken from here
Have you checked the resize() Method?
I fixed it by adding a small delay after calling the CreateChart() function as below:
CreateChart(this.id, this.id + " this week", "week", null);
sleep(1000);
its working fine now
$("#divSensingData").kendoChart({
chartArea: {
width: 900,
height: 500
},
i did face same problem after resize kendo chart.
$(window).resize(function () { $("#chart").data("kendoChart").refresh(); });
it's working
I have been trying to put an image with a hyperlink on it into a google apps script ui. I first thought of using createAnchor(), but that only allows text. Then I thought of using a button, but as far as I know you cannot open a new tab/window and redirect in a callback function.
I also tried createHTML(), but the element is not handled by it as yet.
I have seen people overlay transparent buttons over images, but still have same issue in callback.
My research has not found an answer to this. Does anyone have any solutions/examples?
Thanks
This worked for me on Chrome20 and IE9
// Container for box and results
var imageContainer = app.createFlexTable();
// Setup the button
var button = app.createButton("ImageButton");
button.setStyleAttribute("background", "url(dontshowimagehere.JPG) no-repeat");
button.setStyleAttribute("position", "absolute");
button.setStyleAttribute("color", "transparent");
button.setStyleAttribute('zIndex','1');
button.setStyleAttribute("border", "0px solid black");
imageContainer.setWidget(0, 0, button);
// image to click
var image = app.createImage("image.jpg").setId(imageId);
imageContainer.setWidget(1,0, image);
The image has a slight (3px) offset. If important, this looks to fix it http://www.w3schools.com/css/css_positioning.asp (use relative for the flex table and top etc for the image and button)
Did you try a transparent Anchor overlaying the image?
function doGet() {
var app = UiApp.createApplication().setTitle("Image Anchor");
var panel = app.createAbsolutePanel().setWidth('50%').setHeight('50%');
var image = app.createImage().setUrl("https://lh6.googleusercontent.com/-v0Q3gPQz03Q/T_y5gcVw7LI/AAAAAAAAAF8/ol9uup7Xm2g/s512/GooglePlus-512-Red.png").setStyleAttribute("width", "28px").setStyleAttribute("height", "28px");
var anchor = app.createAnchor("?", "https://plus.google.com/u/1/116085534841818923812/posts").setHeight("28px").setWidth("28px").setStyleAttribute("opacity", "0.1").setTarget("blank");
panel.add(image,100,50);
panel.add(anchor,100,50);
app.add(panel);
return app.close();
}
app.createAbsolutePanel()
.add(app.createImage('https://www.google.com/images/logos/google_logo_41.png'))
.add(app.createAnchor('','https://www.google.co.uk/intl/en/about/')
.setStyleAttributes({position:'absolute',top:'0px',left:'0px',width:'201px',height:'47px',opacity:'0'}))
This is a tested one. It works fine.
It doesn't work with positioning the image (as 'absolute').
It doesn't work with .setHorizontalAlignment(UiApp.HorizontalAlignment.CENTER)
I don't believe this is possible with the widgets available. I would suggest altering your UI's design to utilize an Anchor widget instead.
Use HTML Box if you are coding directly on your page. Click "Edit" to edit your page and go to "Insert>HTML Box" in your menu. It will accept javascript too! There are a few caveats - when using javascript, HTML Box will not accept links...too bad, but too many exploits there.
If you are coding in apps script, you could try to place the image on a panel and use absolute panel and position your link over your image. Another method could be to use the .setStyleAttribute for CSS styling and utilize the zIndex parameter to place a panel over top of your image....like so:
var panel = app.createSimplePanel();
// add your image to the simple panel or whatever panel you wish to choose in your GUI
var popPanel = app.createSimplePanel()
.setStyleAttribute('top','Y')
.setStyleAttribute('left','X')
.setStyleAttribute('zIndex','1')
.setStyleAttribute('position','fixed');
// add your anchor to the popPanel
app.add(panel).add(popPanel);
Not 100% sure if you can make this panel transparent, but you could try something like:
.setStyleAttribute('background',transparent')
or change the opacity via:
.setStyleAttribute('opacity','.5')
Hopes this gives you a few ideas!
I managed to do it with a single Anchor object and using CSS3.
It works on Chrome, I did not test it in other Browsers.
gui.createAnchor("", false, "$DESTINATION_URL$")
.setStyleAttributes({ "display":"block",
"width":"$IMAGE_WIDTH_IN_PIXEL$",
"height":"$IMAGE_HEIGHT_IN_PIXEL$",
"background":"url($URL_OF_THE_IMAGE$)",
"background-size":"100% 100%",
"background-repeat":"no-repeat" })
Of course you have to replace the $......$ with your data.
Thierry
If you first create all your HTML in a string, you can then replace the content of a page with the HTML you want like this:
var myString = 'the html you want to add, for example you image link and button';
var page = SitesApp.getSite('example.com', 'mysite').getChildByName('targetpage');
var upage = page.setHtmlContent('<div>' + myString + '</div>');
Im using this code to change the src attribute of an image tag (using prototype and scriptaculous):
new Effect.Fade("images",{afterFinish:
function()
{
$("detail").setAttribute("src", "img/02.jpg");
new Effect.Appear("images",{duration:0.8});
}
});
Where "images" is the container (a div) and "detail" is the img tag
The result is the current image fades, appears and then the new image suddenly shows.
My question is, how can i check the new image is fully loaded by the browser to trigger the Effect.Appear after?
Is there another way to do this?
Images have an onload event you can hook up to:
$("detail").onload = function()
{ do_stuff(); } // Remember to do this BEFORE changing the src
In my experience, it is a bit flaky sometimes (at times doesn't seem to get executed). It would be better to pre-load the image and allow this effect only after the full document has loaded (onload instead of dom:load or ready).
Replace
new Effect.Appear("images",{duration:0.8});
with
Event.observe("detail", 'load', function() {
new Effect.Appear("images",{duration:0.8});
Event.stopObserving('detail', 'load');
});
To tell the user that you are loading the image, you could set a css background to the image, with a spinnging circle or whatever suits.
I update the source property of an image. When the image is loaded I want to redraw the border skin to fit the new size of the image.
newImgEdit.addEventListener(Event.COMPLETE, loadImgComplete);
newImgEdit.source = myurl_ressource;
private function loadImgComplete(evt:Event):void {
trace("redraw !!");
//invalidateDisplayList();
this.setStyle("borderSkin", ShapeContainerBorderOn);
var img:Image = evt.currentTarget as Image;
img.removeEventListener(Event.COMPLETE, loadImgComplete);
}
The trace "redraw" seems to happen once the image is loaded but the border still does not get redrawn with the correct height and width.
Do I need to remove the listener or will it be garbage-collected later?
You can manually force a component to update its layout by calling validateNow().