Bubble Chart in ZingChart library: Making Bubble size scale independent of y-axis value - bubble-chart

I have been trying to plot a bubble chart using zingchart library. I did not find any option by which we can make bubble radius value independent of y-axis scale. For example in googlecharts bubble radius does not depend on y-axis scale (observe that in given example fertility rate is in single digits where as population(bubble size) is in millions). If we try the same example on zingchart, chart will be flooded since bubble size considers y-axis scale. How to achieve this feature in zingchart?


I'm on the team here at ZingChart. There is an attribute you can use to adjust the bubble radius that is not dependent on "scale-y":{}. Here is some code that will be helpful.
{
"type":"bubble",
"plot":{
"max-size":200 */the "max-size": attribute accepts numeric values and will adjust the radius of the bubbles independently from the y axis values/*
},
"scale-y":{
"values":"0:20:5",
},
"series":[
{
"values":[[1,15,4],
[2,4,2],
[5,10,1],
[6,7,3],
[3,6,2],
[7,15,1],
[8,2,4],
[1,7,3],
[2,12,3],
[4,4,4],
[5,1,2],
[6,3,1],
[8,16,2]]
},
{
"values":[[3,5,1],
[2,17,2],
[8,8,3],
[4,6,2],
[7,3,4],
[2,12,1],
[1,4,1],
[6,2,2],
[4,10,3],
[6,14,2],
[2,6,2]]
},
{
"values":[[3,11,4],
[6,7,4],
[8,14,3],
[3,2,3],
[5,5,2],
[7,10,2],
[2,1,1],
[7,4,1],
[6,16,2],
[1,8,3],
[5,14,1]]
}
]
}

Related

how to prevent [circle] body from sliding into 0px gaps between static bodies

So I have this body that is a circle collider
and it has sometimes a big velocity
the problem is that the tiled map of the boundaries is made of small tiles
and at high velocity the body goes through it
here is my config of all bodies:
const config = {
inertia: Infinity, // do not spin
friction: 0, // X*100% stop on hit
frictionAir: 0, // X*100% slow on move
restitution: 0.5, // bounce X*100% on hit
collisionFilter: this.level.getCollisionFilter(), // default collision filter
isStatic
}
...
getCollisionFilter (key = null) {
switch (key) {
case 'fly':
return {
category: 0x0008,
mask: 0xFFFFFFF1,
group: -1
}
case 'items':
return {
category: 0x0004,
mask: 0xFFFFFFF1,
group: -1
}
case 'woda':
return {
category: 0x0002,
mask: 0xFFFFFFFF,
group: -1
}
default:
return {
category: 0x0001,
mask: 0xFFFFFFFF,
group: 0
}
}
}
```
woda means water if it's of any relevance
this is between the default and woda

The problem is that matter.js you are using has no continuous collision detection. It has been a feature request for a few years. Now that doesn't mean there is nothing you can do. There is some code in the issue description itself which is probably the cheapest way of fixing issue with going through rectangular boundaries:
It detects if a body is outside the world bounds and then reverses the velocity and translates the body back
Alternatively, this post gives a few ideas.
If you want to implement something yourself, I'll try to explain continuous collision detection algorithm.
Basically, for each moving object in your scene you have to calculate moment of next collision within the fraction of the frame 0<t0<1, then advance positions to this moment t0 within the frame, update velocities due to collision and proceed further to the next collision t0<t1<1, until you reach time of tn=1 (end of frame), making sure you don't get stuck in a the middle of the frame due to rounding of calculation or "cornered" objects. For spherical colliders, that is usually done by using capsule vs capsule (for pairs of objects) intersection and capsule vs box for the boundaries.
You can also cheat by having multiple hidden frames at a slower speed:
take highest object velocity
take smallest object collider radius
divide highest velocity by smallest radius of your colliders and get 'slowdown scale' rounded it to an integer
slow down all the objects in the scene by that integer 'slowdown scale' and update scene 'slowdown scale' times, without redrawing the screen
redraw the screen only once with result of 'slowdown scale' updates and you should get same positions as without slowdown, but respecting collisions
Good luck colliding!

Sizing Node Relative to Label in cytoscape

So I'm aware you can use a function to compute a css property in Cytoscape.js e.g.
cytoscape.stylesheet()
.selector('node')
.css({
'width': function(ele) {
return 12;
})
I'm also aware of the special value 'label' that can be the value of the property e.g.
cytoscape.stylesheet()
.selector('node')
.css({
'width': 'label'
})
What I'm wondering is is there any particular property I could use to scale the label by some factor, e.g. what I want is something like
cytoscape.stylesheet()
.selector('node')
.css({
'width': function(ele) {
return labelWidth * 1.5; //Where to get labelWidth from
})
Specially I want the ability to be able to calculate the height and width of an ellipse so that the label is completely contained within the ellipse (which can be computed using some math e.g. Ellipse bounding a rectangle).
But I haven't been able to find a way to get the labelWidth. I did manage to do it using rscratch but only if the node actually got rendered twice (e.g. multiple .selectors), any proper way to get the label width and height from a given element (or at least a way to calculate how it'll be rendered?).

If you want to do more sophisticated sizing, your calculations are going to have to be more sophisticated.
Options :
(1) Calculate the dimensions of the text yourself using a div.
(2) Use the auto sizing, and then adjust the size based on the current size.
(1) is cleaner than (2).
It doesn't make sense for Cytoscape.js to expose rendered calculated values for you in the stylesheet. Those values are calculated from the stylesheet, creating a dependency cycle.

If you just want the label inside your node, you could just set the padding attribute to make more space around the text.

Circle layout with custom center coordinates

I'm building a dynamic graph with cytoscape.js over a world map generated with jVectorMap.
Starting with coordinates in LAT / LON format from json data, I can convert them in point.x / point.y over the generated map with:
var nodePoint = theMap.latLngToPoint(node.data.lat, node.data.lon)
and then I can add the new node in the graph with:
cy.add({
group: "nodes",
position: { x: nodePoint.x, y: nodePoint.y },
style: {
'background-color': node.color
},
data: {
id: node.id,
name: node.label,
customData: node.data,
}
})
This part works, but when json returns multiple nodes with the same coordinates, I would like to spread these nodes around the point with the common LAT / LON information.
I'm able to identify these nodes and apply a dedicated layout to them, but the resulting layount is located in the center of the screen / div of graph.
What I want to know is if there is a simple way to apply a Circle Layout with specific center point.
(I would like to avoid implementing the solution that I'm evaluating... i.e to build a bounding box around the center point and see what happens, (with the bounding box size that grows along with node number in the same point))

In the Wine and cheese example included in the documentation they use the bounding box to force a concentric layout around a selected node ( http://js.cytoscape.org/demos/cde4db55e581d10405f5/ ).
While you indicate you would like to avoid this solution it seems a straightforward solution. The implementation in the example is rather elegant.

Chartist donut chart labels misplaced

When I draw a simple donut chart and increase the font sizes of the labels they get unevenly placed.
Tried to compensate with the settings but that just make one of the labels even more misplaced. Is this a bug or can it be fixed?
{
donut: true,
labelOffset: -5
}
http://jsfiddle.net/gx55mo6b/2/

Sencha Touch Chart: Scroll bars with in chart panel and setting bar width

I am working on a mobile application and using sencha touch charts. By default horizontal bar chart is fitting exactly into screen. If there are more number of bars,then bars are appearing very thin and looking odd. I want to fix bar width to have uniform look and feel irrespective of number of bars being displayed. No matter even user need to scroll down to see entire chart. I have tried below option in series configuration, but it did not work.
style : {
size : 30
}
Please help me.
Thanks,
Nag.

am able to change the bar width by setting barWidth option in touchcharts-debug.js by refering to the following link
http://docs.sencha.com/touch-charts/1-0/source/Bar.html
but the axis labels are not rendering properly labels are fitting into screen

I tried this code in my interactions to render the labels, it's working fine
{
type: 'panzoom',
showOverflowArrows: false,
//axes: ['bottom'],
axes: {
bottom: false,
left: {
startZoom: 2
}
}
}