I'm facing shieldUI wicket integration and I'm trying to get base 64 image dfom a shieldUi chart using this tutorial: https://www.shieldui.com/documentation/javascript.chart/exporting
I tried to run the code below:
function render_image_box(chart_id) {
var result = false;
var svg_chart = $("#" + chart_id);
if (svg_chart) {
var chart = svg_chart.swidget();
if (chart != null) {
chart.exportToImage();
result = true;
}
}
// setTimeout(find_image_source, 100) // wait before continuing
return chart;
}
in both the $(document).ready(..) and $(window).load(...) functions and the load event raised from the library (https://www.shieldui.com/documentation/javascript.chart/events/load) as well.
In none of these function chart is rendered yet, so the svg_chart.swidget() returns null.
Is there any other event to use to accomplish my goal or any other way to get the image source?
Thanks in advance,
Laura
You can access the chart instance using .swidget() only after you have initialized it with the .shieldChart() constructor.
To make your code work, you should also turn off animation for the chart, because right after you initialize it, the rendering will not be over and there will be no image contents.
Here is a complete JSBin to get you started...
Related
This is my code which filters my dataset to one year, when I move my html slider I'd like to update the value. I have a variable year=1979 but when I input it into the function it doesn't work.
var yearData = data.filter(function(element) {return element.YEAR == "year"});
I think I'm missing something, can anyone point me in the right direction?
My fiddle: http://jsfiddle.net/vyab4kcf/6/
Your code that render the chart is called only once time at the request.
You need to store the data of the request and then do the same instructions that you already do in the callback.
So :
var request_data;
d3.csv('http://...', function(error, data){
// store the data
request_data = data;
// Run update for the first request
update("1979");
});
// Listen to slider changes
d3.select("#sexYear").on("input", function() {
update(this.value);
});
function update(sexYear) {
// Chart rendering code
// Do your filters on request_data here
}
I work with Openlayers 2.x and I have zoomstart event
map.events.register('zoomstart', map, function(e) {
// 1. OpenLayers.Event.stop(event);
// 2. return ;
// 3. e.preventDefault();
}
});
My way (1,2,3) not working and event does not stop and change zoom level. Can anybody help me?
The zoom event is triggered by the zoomBarUp function in PanZoomBar control, see: http://trac.osgeo.org/openlayers/browser/trunk/openlayers/lib/OpenLayers/Control/PanZoomBar.js and the line
this.map.zoomTo(zoomLevel);
One way to prevent zoom for zoom levels above 13 would be to override this function, which you can do by adding your own version, either in a standalone js file or by using prototype within you OpenLayers init function, ie, after OpenLayers has loaded.
OpenLayers.Control.PanZoomBar.prototype.zoomBarUp = function(evt){
//copy here the code from the actual function
if (!OpenLayers.Event.isLeftClick(evt) && evt.type !== "touchend") {
return;
}
//rest of code .....
//put in your check for zoom level here before calling this.map.zoomTo(zoomLevel);
if(this.map.zoom<13){
this.map.zoomTo(zoomLevel);
this.mouseDragStart = null;
this.zoomStart = null;
this.deltaY = 0;
OpenLayers.Event.stop(evt);
}};
There may be a more elegant way, but this should work.
dhtmlxscheduler timeline when I use filtering
scheduler.filter_timeline = scheduler.filter_month = scheduler.filter_day = scheduler.filter_week = function(id, event) {
// display event only if its type is set to true in filters obj
if (rules[event.user_id]) {
return true;
}
// default, do not display event
return false;
};
drag animation (drawing a Node/session) doesn't work.
if you look at the DHTMLX_scheduler samples you will see create a new event doesn't work properly.
/samples/09_api/09_filtering_events.html
I am using Trace Skin . Every thing is working well. even light box is loading . the main problem is when I use this statement filter_timeline then Timeline drawing stop draw event.(It can also create it but the it is like transparent)
It is not a bug in scheduler itself, but badly written sample
In code of sample, update next line
CODE: SELECT ALL
if (filters[event.type]) {
as
CODE: SELECT ALL
if (filters[event.type] || event.type==scheduler.undefined) {
When event just created it doesn't have the type defined yet, so it was filtered out with previous logic
The title explains it all...
I need to perform a custom action when I know a user has finished resizing, but from what I can find in the Kendo UI documentation there is no event for this accessible to me other that 'resize' which I cannot use as is.
Perhaps i just missed the event?
if not:
Is there a way to use the 'resize' event to determine that a user has stopped resizing?
So here's my answer thus far:
Mine differs slightly due to architectural needs, but here's a general solution
var isResizing = false;
var wndw = $(element).kendoWindow({
// .....
resize: OnResize,
// .....
}).data('kendoWindow');
function onResize() {
isResizing = true;
}
$('body').on('mouseup', '.k-window', function() {
if(isResizing){
// **Your 'Stopped' code here**
isResizing = false;
}
});
Have you considered using underscore.js debounce? I have used it successfully to only trigger then change after the resize events have stopped coming for a certain period (in the case below 300ms). This does add a small delay to captureing the end, but if like me you just want to store the final size then that works fine. Here is the version of the code above but using underscore debounce:
var wndw = $(element).kendoWindow({
// .....
resize: _.debounce( this.hasResized, 300)
// .....
}).data('kendoWindow');
//This is called at the end of a resize operation (using _.debounce)
function hasResized (args) {
// ** Your code here **
};
Hope that helps.
EDIT - URL to see the issue http://syndex.me
I am dynamically resizing images bigger than the browser to equal the size of the browser.
This was no easy feat as we had to wait for the images to load first in order to check first if the image was bigger than the window.
We got to this stage (which works):
var maxxxHeight = $(window).height();
$(".theImage").children('img').each(function() {
$(this).load( function() { // only if images can be loaded dynamically
handleImageLoad(this);
});
handleImageLoad(this);
});
function handleImageLoad(img)
{
var $img = $(img), // declare local and cache jQuery for the argument
myHeight = $img.height();
if ( myHeight > maxxxHeight ){
$img.height(maxxxHeight);
$img.next().text("Browser " + maxxxHeight + " image height " + myHeight);
};
}
The thing is, the page is an infinite scroll (I'm using this)
I know that you are not able to attach 'live' to 'each' as 'live' deals with events, and 'each' is not an event.
I've looked at things like the livequery plugin and using the ajaxComplete function.
With livequery i changed
$(".theImage").children('img').each(function() {
to
$(".theImage").children('img').livequery(function(){
But that didnt work.
ajaxComplete seemed to do nothing so i'm guessing the inifinte scroll i'm using is not ajax based. (surely it is though?)
Thanks
Use delegate:
$(".theImage").delegate('img', function() {
$(this).load( function() { // only if images can be loaded dynamically
handleImageLoad(this);
});
handleImageLoad(this);
});
The problem is that your infinite scroll plugin does not provide the callback functionality. Once your pictures are loaded there is no way to affect them.
I have tried to modify your plugin, so that it will serve your needs, please see http://jsfiddle.net/R8yLZ/
Scroll down the JS section till you see a bunch of comments.
This looks really complicated, and I probably don't get it at all, but I'll try anyway :-)
$("img", ".theImage").bind("load", function() {
var winH = $(window).height();
var imgH = $(this).height();
if (winH < imgH) {
$(this).height(winH);
$(this).next().text("Browser " + winH + " image height " + imgH);
}
});