I use flotr2, I wrote a test here.
http://jsfiddle.net/yKqXM/
If I want to show label on each bar stack, should I use "marker" type? and how do I use it.
I am new to flotr2, could you give me an good study article or docs, so I can study it.
Sorry if this question is stupid, but I am frustrated of looking for the example.
Matt
Yup, you can use the 'markers' attribute. You can actually just place this fragment after the bars type (you can use both at once):
markers: {
show: true,
position: 'ct',
},
However, there is a small problem with this. Flotr2 doesn't respect the stacked positions for markers, so the marker labels will end up in the wrong position.
To get around this, create some dummy data sets which are the summation of the stacks, and move the 'bars' and 'markers' to be directly specified on the separate data sources. The bit after the data is listed is just the "default" mode for each data source.
There are many quite useful opts for markers. See the library source.
Flotr.addType('markers', {
options: {
show: false, // => setting to true will show markers, false will hide
lineWidth: 1, // => line width of the rectangle around the marker
color: '#000000', // => text color
fill: false, // => fill or not the marekers' rectangles
fillColor: "#FFFFFF", // => fill color
fillOpacity: 0.4, // => fill opacity
stroke: false, // => draw the rectangle around the markers
position: 'ct', // => the markers position (vertical align: b, m, t, horizontal align: l, c, r)
verticalMargin: 0, // => the margin between the point and the text.
labelFormatter: Flotr.defaultMarkerFormatter,
fontSize: Flotr.defaultOptions.fontSize,
stacked: false, // => true if markers should be stacked
stackingType: 'b', // => define staching behavior, (b- bars like, a - area like) (see Issue 125 for details)
horizontal: false // => true if markers should be horizontal (For now only in a case on horizontal stacked bars, stacks should be calculated horizontaly)
}
Related
Is it possible to configure this to display a vertical tree instead of a horizontal tree? What I mean by vertical is something similar to Windows Explorer.
We have some users that would prefer to work with it that way.
The dagre layout extension has a github page with some useful default values for the layout:
var defaults = {
nodeSep: undefined, // the separation between adjacent nodes in the same rank
edgeSep: undefined, // the separation between adjacent edges in the same rank
rankSep: undefined, // the separation between adjacent nodes in the same rank
rankDir: undefined // 'TB' for top to bottom flow, 'LR' for left to right,
ranker: undefined, // Type of algorithm to assign a rank to each node in the input graph. Possible values: 'network-simplex', 'tight-tree' or 'longest-path'
minLen: function( edge ){ return 1; }, // number of ranks to keep between the source and target of the edge
edgeWeight: function( edge ){ return 1; }, // higher weight edges are generally made shorter and straighter than lower weight edges
// general layout options
fit: true, // whether to fit to viewport
padding: 30, // fit padding
spacingFactor: undefined, // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up
nodeDimensionsIncludeLabels: false, // whether labels should be included in determining the space used by a node
animate: false, // whether to transition the node positions
animateFilter: function( node, i ){ return true; }, // whether to animate specific nodes when animation is on; non-animated nodes immediately go to their final positions
animationDuration: 500, // duration of animation in ms if enabled
animationEasing: undefined, // easing of animation if enabled
boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
transform: function( node, pos ){ return pos; }, // a function that applies a transform to the final node position
ready: function(){}, // on layoutready
stop: function(){} // on layoutstop
}
The important part here is the rankDir, you can define LR there :)
In cytoscape I'd like to create nodes that are circular, with the diameter depending on the node label (the label is centered in the node). I've set the following:
style: {
'shape': 'ellipse',
'width': 'label'
}
How do I get the height to depend on the width value? Setting 'height': 'label' sets the height to the height of the label.
If you can use a fixed-width font, then #BeerBaron's answer is best.
Alternatively, use the stylesheet you have in the OP:
style: {
'shape': 'ellipse',
'width': 'label',
'height': 'data(height)'
}
Update node heights as a step post-init, e.g.
cy.nodes().forEach(function( n ){ n.data('height', n.width()); });
You should probably preset data.height for each node to some default value at init to ease debugging (e.g. when you add new nodes later).
Depending on label lenght and font, you can set width and height in the javascript part that is appending nodes to the graph, and leave the rest of the style to the initialization of the engine.
For example:
cy.add({
group: 'nodes',
style: {
height: (10*label.lenght),
width: (10*label.lenght),
}
})
I have a problem with titanium 3.5.0. When I want to position my ui element based on previous element in the layout with some methods like getWidth or getTop I'm getting Nan and in the console I'm getting a warning that says:
Invalid dimension value (nan) requested. Making the dimension undefined instead.
I have scrollview and I want to arrange my item into it so what I did
this is my scrollview code
var scrollView = Ti.UI.createScrollView({
contentWidth: 'auto',
contentHeight: 'auto',
backgroundColor:'#fff',
showVerticalScrollIndicator: false,
showHorizontalScrollIndicator: false,
height:"100%",
width: "100%",
top:36.6
});
and the scrollableview code
var view = Ti.UI.createView({
backgroundColor:'#fff',
borderRadius: 0,
height: 2000,
width: Ti.UI.FILL
});
and then I started adding my ui element in the view
var type =Ti.UI.createLabel({
text:"Type",
color:label_color,
right:207,
left:label_p_l,
font:{ fontFamily: customfont,fontSize:17},
top:37.5
});
var p_name=Ti.UI.createLabel({
text:"Property Name",
color:label_color,
left:label_p_l,
font:{ fontFamily: customfont,fontSize:17},
top:type.getTop()+label_h+32
});
so now it's working perfectly because type has a numeric value and even I added three more element in this way and every things works perfectly after that
I have added the 4th element like this and now when I started to get Nan.
var space_Slider = Titanium.UI.createSlider({
top:space.getTop()+space.getHeight()+15,
min:0,
max:1000,
value:0,
height:4,
backgroundColor:"#fff",
leftTrackImage:'/images/slider_color.png',
rightTrackImage:'/images/slider_color.png',
thumbImage:'/images/slider.png',
});
now the space.getTop() starts returning Nan
Any ideas how to solve this problem?
That happens because you've specified width / top not as numeric data type, but as string. "100%", "15dp" etc
getWidth() returns numeric data types IFF you pass numeric to width parameter when constructing the element or invoking setter method.
Furthermore, if you don't specify width / top parameters during construction of the elements they will not return anything.
To get the dimensions of the element you need to add them to some container / parent view and postlayout all elements. After this is done you can ask for dimensions like this:
element.size.width
I have a bar chart and i want each bar to render in different color. So i tried using thems,
sample code is:
Ext.define('Ext.chart.theme.FancyTheme',{
extend : 'Ext.chart.theme.Base',
constructor : function(config){
this.callParent([Ext.apply({
colors : ['#9CC5C9','#D5544F','#D5544F','#5288DB']
},config)])
}
});
and my chart code is:
var tc = Ext.create('Ext.chart.Chart',{
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate : true,
insetPadding : 20,
theme: 'FancyTheme',
But all the bar colors are changing to same color i.e, to '#9cc5c9' in above example.
But i want bars to render in differnt colors as mentioned in theme. One more thing i dont want to use render function to render coloirs.
So wat is the soln to get different colors. Can anyone help me out!!
Sorry, but using a renderer is the correct solution. The colors property is used for successive series in a chart, such as multiple areas in the same plot space.
I don't understand why you don't want to use a renderer, but here's all you would need to do:
renderer: function(sprite, record, attr, index, store) {
var colors = ['#9CC5C9','#D5544F','#D5544F','#5288DB'];
return Ext.apply(attr, {
fill: colors[index % colors.length]
});
}
You can also extend Ext.chart.series.Bar. For example:
Ext.define('Ext.chart.series.MyBar', {
extend: 'Ext.chart.series.Bar',
//type: 'mybar',
alias: 'series.mybar',
getPaths: function() {
this.callParent(arguments);
var items = this.items,
i, iLen = items.length,
colors = this.colorArrayStyle,
colorsLength = colors && colors.length || 0;
for (var i = 0; i < iLen; ++i) {
items[i].attr.fill = colors[i % colorsLength];
}
}
});
Then in series you should use mybar instead of bar.
In the Sencha Touch Charts 2 beta distribution, the Drawing guide example code has an example of a Sprite listening for touch start. The code given fails to draw any sprites, because it fails to insert a canvas onto the DOM. However this can be fixed by replacing this:
//add the component to the panel
Ext.create('Ext.chart.Panel', {
fullscreen: true,
title: 'Yellow Circle',
items: drawComponent
});
with this:
//add the component to the panel
Ext.create('Ext.chart.Panel', {
fullscreen: true,
title: 'Yellow Circle',
chart: drawComponent
});
Now, I'd really like to get the event handling to work. The example code continues with:
// Add a circle sprite
var myCircle = drawComponent.surface.add({
type: 'circle',
x: 100,
y: 100,
radius: 100,
fill: '#cc5'
});
// Now do stuff with the sprite, like changing its properties:
myCircle.setAttributes({
fill: '#ccc'
}, true);
// Remember always to refresh the image
drawComponent.surface.renderFrame();
// or animate an attribute on the sprite
// no need to refresh the image when adding animations.
myCircle.fx.start({
fill: '#555'
});
// Add a touch listener to the sprite
myCircle.addListener('touchstart', function() {
alert('touchstarted!');
});
but that final alert never happens on touch. Any ideas?
drawComponent.addListener('touchstart'... works fine, but is of course not localised to the circle sprite.
--- after more investigation ---
I think the answer is simply that event handling on sprites his not implemented yet. e.g. in touch-charts/src/draw/engine/Canvas.js we have in the definition of Ext.draw.engine.Canvas,
getSpriteForEvent: function(e) {
return null; //TODO!!!
},
OK - time to change the question from 'how?' to 'when?':
'When will Sencha Touch support Sprite event handling?"