Develop Reference

Heatmap.js Just want a red blob not multiple colours on the datapoint

I have created a heatmap and I just want my data point to be one colour instead of multiple colors like the standard one is, I'm not sure how to change the configuration of all the data points to do this.
I basically just want the colour in the middle to be the colour of the entire circle.
https://www.patrick-wied.at/static/heatmapjs/example-heatmap-googlemaps.html
On that website you will see an example of a heatmap and the data points all have blue bits around the outside I literally just want to make my points so they are just the colour in the middle of the data point.
For example the point in Florida I just want that entire circle to be red because it is red in the middle, instead of having the blue/yellow/green bits.

You just need to define the gradient in the heatmap and also set the blur value to cero:
For example:
var config = {
container: document.querySelector('.heatmap'),
blur: 0,
gradient: {
'1': 'red',
'0': 'white',
},
};
var heatmapInstance = h337.create(config);

KinetikJS Keep bounds while dragging an object

Heyhey,
while learning JS and using KineticJS I am stuck with a little problem.
As Iam not able to get my own code into a fiddle right now lets take this example:
http://jsfiddle.net/m1erickson/n5xMs/
If we make the white rect also draggable:
var white = new Kinetic.Rect({
x: 20,
y: 20,
width: 300,
height: 300,
fill: 'white',
stroke: 'black',
strokeWidth: 2,
draggable: true
});
the dragBoundFunc won´t work correctly anymore if the white rect is moved around. While debugging this with coda2, I found that when the white rect is dragged around, that the x and y attrs do not change.
Why is that so? How do I manage to make the dragBoundFunc work for moving parent-shapes?
thanks in advance for your help.

First of all:
I found that when the white rect is dragged around, that the x and y attrs do not change.
No, they don't, because they're defined statically. If you wanted changing values, you'd want to get the updated values within the dragBoundFunc. It might be as simple as calculating them the same way they are now, but inside that function.
How do I manage to make the dragBoundFunc work for moving parent-shapes?
In your example the white rectangle isn't a parent of anything, it's just a shape drawn on the same stage as the orange rectangle. What you want to do is make the white shape background and the orange rectangle both children of the same node, and drag that. The most direct way to do this here would be to make the layer itself draggable, e.g.:
var layer = new Kinetic.Layer({draggable: true});
But how you do this is arbitrary. The white and orange boxes might also be children of another Kinetic.Container, for example.

Add a background image to a connector in jsPlumb

I'm wondering if it is possible to add a background image to a connector.
My objective is to create something like this:
This way I could have an animated images in the background symbolizing the direction and type of the connection.

AFAIK it is not possible since the connection is made up of SVG object which itself acts as background image. You can try dashstyle option while tweaking paint-style and gradients to obtain appropriate arrow as shown in image. For more refer: API DOC
Sample Code:
jsPlumb.Defaults.PaintStyle = {
lineWidth: 4,
strokeStyle: 'rgba(123, 123, 123, 1)',
gradient:{
stops:[[0,"green"], [1,"red"]]
},
dashstyle: "7"
};
Result:
Note: Remember to use jsPlumb.setRenderMode(jsPlumb.SVG) since dashstyle doesn't work with jsPlumb.CANVAS (by default it is SVG)

Raphael.js map default fill colors

I am trying to familiarize myself with raphael.js. I want to create a USA map that already has default colors for each state and those colors stay there.
Here is what I came up with.
If you look at AK, I'm getting the default color loaded, but if I highlight another state, the default color for AK disappears. I want AK - and other states - to stay the same color.
Specifically, I don't know what is clearing out my AK full color. I think part of this statement is clearing out the fill cover when I mouseover a different state:
for (var state in aus) {
//aus[state].color = Raphael.getColor();
(function (st, state) {
st[0].style.cursor = "pointer";
st[0].onmouseover = function () {
current && aus[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");
st.animate({fill: st.color, stroke: "#ccc"}, 500);
st.toFront();
R.safari();
document.getElementById(state).style.display = "block";
current = state;
};
})(aus[state], state);
}
Any ideas where I might be going wrong?

It's been a while since I worked with Raphael.js but I think this is the line resetting your state:
current && aus[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");
Try replacing #333 with st.color or whatever that state's color is. If my assumptions are correct that would be something like aus['AK']??? You might have to capture the previous state's color. Let me know if that doesn't work and I can take a closer look.
Good Luck.

Drop your SVG of the USA into..
this
You can optionally remove OR LEAVE IN the mouseover code which is also generated.

Bryan Allo touches on part of my problem, but ultimately it is the animation code that is causing problems. I never figured out how to animate to similar color hue and ditched the following code completely: st.animate({fill: st.color, stroke: "#ccc"}, 500);
The end result is a site that lets users create their own presidential race predictions by state. Here it is.

Setting the background color of a Dojo gauge

I'm creating some Dojo 1.8 GlossySemiCircularGauge at runtime via javascript and I'm trying to set the background color of the gauge. I'm looking to set the color outside the gauge, not the gauge it self. I'm creating the gauge with syntax like this:
glossyCircular = new dojox.gauges.GlossySemiCircularGauge({
textIndicatorColor: '#FFFFFF',
background: "[0, 255, 0, 0]",
id: NewID,
Max: 20,
value: newValue,
noChange: "true",
width: wid,
textIndicatorPrecision: "2",
color: '#101030',
height: hei
}, dojo.byId(NewID));
Since the gauge is drawn with SVG, it doesn't work to set the background color of the container div. Is there a way around this?

The correct format for background is:
background: { color: "rgba(0,0,0,0)"}
Set the alpha channel to zero, so it will get transparent and you can adjust the background color via parent <div>.
See and play with a working example at jsFiddle: http://jsfiddle.net/phusick/E9YNM/
EDIT: I added dojo/domReady! to the example, so now it works not only in my browser.
EDIT2: background: [0,0,0,0] works as well, so just get rid of those quotation marks to have array instead of a string.