I am trying to use RGraph library to manipulate a vertical progress bar, but I'm stuck because after creating the progress bar I can't manipulate its properties, here's the code I have been using:
window.onload = function ()
{
// Create the object. The arguments are: The canvas ID, the indicated value and the maximum value.
var myProgress = new RGraph.VProgress('myProgress', 60, 100)
// Configure the chart to look as you want.
.Set('chart.colors', ['blue'])
.Set('chart.tickmarks',['true'])
.Set('chart.tickmarks.color',['white'])
.Set('chart.title',"Nivel")
// Now call the .Draw() method to draw the chart.
.Draw();
}
and after that I try to read the value property using a click on a button,but it says undefined:
function myFunction()
{
var valor= myProgress.value;
alert(valor);
}
How can I access the properties of an object created in another function? My idea is to change the level of the progress bar according to a control put in the webpage.
Thanks in advance for any help supplied.
myProgress is scoped within your onload handler, thus it can't be seen by other functions out of that scope.
var myProgress;
window.onload = function() {
myProgress = new RGraph.VProgress('myProgress', 60, 100)
// ...
};
Related
I would like to fetch data for example from this website: https://www.highcharts.com/stock/demo/lazy-loading
To get the data with high resolution, I have to set the min max to small value and then I have to go over the complete diagram.
It is possible to get data from the website with "Highcharts.charts[0].series[0]"
But I didn't find a possibility to programable changing the navigators, to get other data ranges.
Is it possible to move the navigator to a specific position?
You can use Axis.setExtremes function for this.
Live demo: http://jsfiddle.net/kkulig/am3cgo5w/
API reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
Thank you for your answear. Here is my code if somebody needs:
I saw, that the redraw event will be called 5 times till the diagram is finishd redrawn
counter = 1
// Get chart
chart = $('#highcharts-graph').highcharts()
// add event
Highcharts.addEvent(chart, 'redraw', function (e) {
console.log(counter);
counter = counter+1;
if(counter>5){
console.log('finish loaded')
function2()
}
})
var newSelectedMin = 0
var newSelectedMax = 10
chart.xAxis[0].setExtremes(newSelectedMin, newSelectedMax);
I'm trying to create custom zoom in/out buttons and I've got it working except for the most important part, the zooming..
I've created a map chart like this:
$scope.chart = new Highcharts.Map(config);
Then I have two functions which run whenever you click on zoom in or out:
highcharts.zoomIn = function() {
$scope.chart.mapZoom(0.5);
};
highcharts.zoomOut = function() {
$scope.chart.mapZoom(2);
};
Setting the mapZoom of the chart doesn't give me an error nor does it do anything. I tried calling $scope.chart.redraw() afterwards but it didn't help either. Also saw that it already calls the redraw function in the source code of the mapZoom function.
I can't find any information on how to do this so what exactly am I doing wrong here?
So I have this chart built out and it works except it keeps throwing the error Cannot read property 'chart' of undefined. I am reloading the chart on window resize so that the html labels reload in correct positions.
It's a double donut chart and shows/hides content based on the selected slice.
Any help would be greatly appreciated.
First of all, you define var chart variable in createChart function, so it always will be undefined - use only one definition (the one on top), later just assign chart to that variable. Anyway, I see two solutions:
use setTimeout() in resize event, to render chart with a delay. Not a reliable solution, because user can play around with width of the browser and something may be broken again
wrap initReflow method to check if chart exists, like this:
(function(H, HA) {
H.wrap(H.Chart.prototype.initReflow = function () {
var chart = this,
reflow = function (e) {
if(chart && chart.options) {
chart.reflow(e);
}
};
HA.addEvent(window, 'resize', reflow);
HA.addEvent(chart, 'destroy', function () {
HA.removeEvent(window, 'resize', reflow);
});
});
})(Highcharts, HighchartsAdapter)
Working demo: https://jsfiddle.net/dpsn9gx8/7/
Edit:
Since Highcharts 4.1.10 Highcharts adapter is built-in, so remove it and use Highcharts: https://jsfiddle.net/dpsn9gx8/11/
I am using cocos2d-js v3.0 and I am trying to use the this.sprite object in the EventListener. However I get that the this.sprite is undefined.
If I create the var sprite in the init function and just pass sprite it works fine. But when I create the var sprite outside the init function and use this.sprite I get the undefined.
var roomMap = cc.Layer.extend({
sprite:null
ctor:function(){
this._super();
this.init();
},
init: function () {
this._super();
//create tile map
this.mainMap = cc.TMXTiledMap.create(res.Main_tmx);
var cache = cc.spriteFrameCache;
cache.addSpriteFrames(res.player_plist, res.player_png);
this.sprite = new cc.Sprite.create("#player-stand-f-0");
this.sprite.setPosition(new cc.Point(300,300));
this.addChild(this.sprite);
var listener = cc.EventListener.create({
event: cc.EventListener.MOUSE,
onMouseUp: function (event){
var sprite_action = cc.MoveTo(2,cc.p(event.getLocationX(),event.getLocationY()));
console.log(this.sprite);
//this.sprite.runAction(sprite_action);
//this.addChild(sprite_action);
}
});
cc.eventManager.addListener(listener, this.sprite);
This is more a javascript problem I am having.
It's happening because this, inside the event listener, is referring to the event listener itself, and not the layer.
Try this:
var target = event.getCurrentTarget();
console.log(target);
console.log(target.sprite);
This should give you a clear idea of what's going on: if you are clicking the sprite object, then target should equal to sprite (and hence target.sprite will be undefined), if you are clicking the layer, then target will be the layer, and target.sprite will be what you expected.
I reccomend taking a look at this article for further understanding of the new event manager in cocos2d v3.
first, i think this line is wrong
this.sprite = new cc.Sprite.create("#player-stand-f-0");
"new" is unnecessary
when you said "outside the init function", i don't know where it is.
because the ctor function will be called first, once you didn't create it before using, it will be undefined. you can try
sprite:cc.Sprite.create("player-stand-f-0")
I have a page which has several <canvas> elements.
I am passing the canvas ID and an array of data to a function which then grabs the canvas info and passes the data onto a draw() function which in turn processes the given data and draws the results onto the canvas. So far, so good.
Example data arrays;
$(function() {
setup($("#canvas-1"), [[110,110,100],
[180,180,50],
[220,280,80]]);
setup($("#canvas-2"), [[110,110,100],
[180,180,50],
[220,280,80]]);
});
setup function;
function setup(canvas, data) {
ctx = canvas[0].getContext('2d');
var i = data.length;
var dimensions = {
w : canvas.innerWidth(),
h : canvas.innerHeight()
};
draw(dimensions, data, i);
}
This works perfectly. draw() runs and each canvas is populated.
However - I need to animate the canvas. As soon as I replace line 8 of the above example;
draw(dimensions, data, i);
with
setInterval( function() { draw(dimensions, data, i); }, 33 );
It stops working and only draws the last canvas (with the others remaining blank).
I'm new to both javascript and canvas so sorry if this is an obvious one, still feeling my way around. Guidance in the right direction much appreciated! Thanks.
The problem has to do with how closures work. Closures don't receive a copy of the data, they receive an active reference to it. So when the function is run later, it references a live copy of i and such -- which have moved on since you set up the call.
You can fix it like this:
drawLater(dimensions, data, i);
...with this defined elsewhere:
function drawLater(dimensions, data, i) {
setInterval(function() { draw(dimensions, data, i); }, 33 );
}
That works because the closure holds a reference to the arguments to drawLater, rather than to the variables in your loop.
Separately: Shouldn't you be passing the canvas or its ID into that somewhere?
How does draw() know which canvas to use? My guess from your code is that you're using the global variable ctx which will get overwritten with every call to setup(). So you need to change draw() and add the canvas to use as the first parameter.
JavaScript variables are function scoped, not block scoped. Also you need to declare ctx with var to make it local and then pass it to the draw function.
I think you should be able to make it work if you try the following :
setInterval( 'draw(dimensions, data, i);', 33 );
Hope this helps :)