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]]
}
]
}
How to increase the size of a list bullet? I am using ""\u2023 ABC" and applying style with font size :16. However the bullet size does not scale and only the font size scales.
"\u2023"= unicode for the bullet
Prasad, size of the bullet is also increasing with respect to the font size. But the probelm is the size of the bullet is small compared to the text. Please refer the screenshots I've taken in iPhone simulator with different font size
The above in the above images, each of them has font sizes 16, 30 and 80 respectively. You can see that the arrow size is also increasing with respect to the font size.
And here is a working solution for you.
Here I've used two labels - one for the arrow and other for the city name having a font size 40 and 20 respectively, added them to the tableViewRow. You can change the font size as per your requirement
Here is my code
for(var i = 0 ; i < number_of_cities; i++ ){
var lblArrow = Ti.UI.createLabel({
text : "\u2023",
font : {fontSize : 40},
left : '3%'
});
var lblValue = Ti.UI.createLabel({
text : cityList[i].name,
font : {fontSize : 20},
left : '10%'
});
tblData[i] = Ti.UI.createTableViewRow();
tblData[i].add(lblArrow);
tblData[i].add(lblValue);
}
Please note : I'm not sure that it's a best method, but it will resolve your issue
There are numerous variations of Unicode bullets and a quick visit to
Geometric Shapes is always useful. My personal favorite is "Black Circle" which, as with so much of Unicode, may be many things but a circle it is not.
● is a nice fat bullet — a bullet with attitude. In Hex it is ● and parsed for the purposes of list styling written as "\25AC" in the content value of your li:before tag:
li:before {
content: "\25AC";
etc.
I am working on dojo pie chart. When I feed data to the chart as
[ {y:10}, {y:40}, {y:30}]
I want to see the values displayed on the chart as 10%, 40% and 30%. But the chart displays as 12.5%, 37.5% and 50%. What should I do, to enable the pie chart display the values, which I send as it is?
Any help is appreciated
The solution is simple: set labels as you want them: [{y: 10, text: "10%"}, ...] and so on. You can easily automate it. A sketch:
var items = [10, 40, 30];
addSeries("default", dojo.map(values, function(item){
return {y: item, text: item + "%"};
});
The same way you can add custom tooltips, or some other attributes (e.g., colors).
I am trying to slide a Panel from the bottom, so that it covers the entire viewport, like the Bookmarks panel in iOS Safari. This is similar to the ActionSheet, but fulscreen, and without the dark frame around it.
this.advSearch = Ext.ComponentMgr.create({xtype: 'advanced_search', itemId: 'pnlAdvancedSearch'});
this.advSearch.autoRender = true;
this.advSearch.show({type: 'slide', direction: 'up'});
This sort of works, but the new panel doesn't fill the whole screen, and parts of it appear behind the background panel. I've tried various layouts, including fit, vbox, with varying degrees of ugliness, but the root problem seems to be that the panel doesn't know how tall it needs to be. Maybe because it doesn't have a container?
Any suggestions? Is this even the right approach, or should I try to hack the ActionSheet to expand to fullscreen, and show without the border?
Thanks.
Because your panel is floating (or I presume it is), you will need to give the panel a fixed height in Sencha Touch 1. You are very restricted in that respect. This following code should work:
var sheet = new Ext.Sheet({
html: 'hello',
style: 'color:#fff',
height: window.innerHeight,
stretchX: true
});
// replace this show with your animation
sheet.show();
As you can see, I give it a fixed height of the window and then stretch it on the X axis (y doesn't work).
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
}
}
}