Is there any way to shorten the axis labels in sencha touch chart. As my axis labels are very long.Is it possible to show axis labels in two rows.
Please help me regarding this,
I am not sure if it is possible to show the label in two rows, but you can format the label using following code:
label : {
renderer : function(val) {
return val;
}
}
May be you want to truncate the label length to 3 characters, and have a legend to display the full forms of abbreviations.
I tried with below code and it working fine for me.
label: {
renderer: function(val) {
if (val.length > 10) {
return val.substring(0, 10) + "...";
}
}
}
Related
I'm loading JSON data from internet, capturing data about items, like name, author and imageurl. Then I want to load them one under the other so I put them into the listview. I only add them once as a custom class, that only holds those variables.
I'm having a problem with those values duplicating and not appearing as they should. For example, it would load first 5 items(out of 20) and it would repeat them over the remaining 15. I don't understand why that's happening, also tried with looping over listview's items array and printing them out and they are all different, also tried doing refresh() on them, but it doesn't seem to change anything at all.
I'm adding a code that I use to create the listview and the piece that I'm using to fill it in.
val lv = listview<Item>{
anchorpaneConstraints {
topAnchor = 0.0
bottomAnchor = 0.0
leftAnchor = 0.0
rightAnchor = 0.0
}
cellFormat {
graphic = cache {
form {
fieldset {
hbox {
spacing = 10.0
println(it.name)
println(it.author)
println(it.imgurl)
println(it.desc)
imageview {
image = Image(it.imgurl)
prefWidth(256.0)
prefHeight(256.0)
}
vbox {
field("Name") {
label(it.name)
}
field("Author") {
label(it.author)
}
field("Description") {
label {
text = it.desc
wrapWidth = 150
}
}
}
}
}
}
}
}
}
val tmpItems = items.clone() as ArrayList<JsonObject>()
val arr = ArrayList<Item>()
for (m in tmpItems) {
arr.add(
Item(
m["name"].toString(),
m["author"].toString(),
m["desc"].toString(),
m["imgUrl"].toString()
)
)
}
lv.items.addAll(arr)
I expected the output to be 20 unique items, as that's what's in the lv.items, but the shown result is 5 unique items repeated over 20 lines.
When using cache you need to specify a unique id for each item, so the framework knows how to retrieve the cached ui elements for the currently displayed item in a given table cell. This is explained in detail in the javadoc for the cache function.
If you have an id field in your item, you can use that for example:
cache(rowItem.id) { }
You could even use the value for the cell, if that's unique:
cache(it) { }
I'm using a XAML-MapControl in a UWP-project.
When you create a MapIcon, the image is floating a fixed offset above the desired location on the map, instead of directly on the map, with a black line connecting the icon with the map, as you can see in this image:
I can't find a way to remove this line, or reduce its size.
And none of the other MapElement-types seem to do what I want, I want the exact behavior of the MapIcon, but without this line.
Is there a way to do that?
Edit:
Here's how I create the MapIcons:
var icon = new MapIcon
{
NormalizedAnchorPoint = new Point(0.5, 1),
Image = image,
Visible = true,
};
MapControl.MapElements.Add(icon);
Edit2:
I tried to set the stylysheet, but it does not work for me, probably because it's only supported in a version newer than the one I target:
MapControl.StyleSheet = MapStyleSheet.ParseFromJson("{ \"version\": \"1.*\", \"settings\": { }, \"elements\": { \"userPoint\": { \"stemAnchorRadiusScale\": 0, \"stemHeightScale\": 0 }}}");
You need to set the stemAnchorRadiusScale and stemHeightScale properties of userPoint to 0 in the map style sheet. See this topic for how to work with style sheets:
https://learn.microsoft.com/en-us/windows/uwp/maps-and-location/elements-of-map-style-sheet.
For example:
{
"version": "1.*",
"settings": {
},
"elements": {
"userPoint": {
"stemAnchorRadiusScale": 0,
"stemHeightScale": 0
}
}
}
I am trying to get a stacked bar chart to transition in the same way as this bar chart - http://www.animatedcreations.net/d3/animatedBarChart_Slide.html
I have been following Mike Bostock's "A bar chart, part 2" example, and things are OK up to transitioning the stacked bars in and out.
My broken example is here - http://www.animatedcreations.net/d3/stackedBarChart7.html
I am reasonably sure the problem is with how I set up the data, as shown below. I am even wondering if the data needs to be transformed to be in columns rather than layers?
Insight much appreciated :) Thanks.
From redraw():
// stack the new data
var stacked = d3.layout.stack()(["act1", "act2","act3","other"].map(function(activity){
return stats.map(function(d) {
return {x:(d.hour), y: +d[activity]};
});
}));
// update x axis
x.domain(stacked[0].map(function(d) { return d.x; }));
var valgroup = graph.selectAll("g.valgroup").data(stacked);
// want the data in d. var rect contains the data AND functions.
// I am guessing this is where it all breaks??
var rect = valgroup.selectAll("rect")
.data((function(d) { return d; }), (function(d) { return d.x; }));
// new data set. slide by hour on x axis.
In this problem, the transitions are clearly the trickiest part, so I prefered to go from the simple bar example you provided and go to the stacked bar chart using Mike Bostock's example.
The principal problem with the stacked implementation you provide is that the information is "reversed" as you would want each bar to be in a different element of the data array, this way you can identify your data by its time stamp.
So, first, let's define some data with an array of values for each element:
function next () {
return {
time: ++t,
value: d3.range(3).map(getRand)
};
}
Then, inside of the redraw() function:
First format the data for the bar stacks:
customData = data.map(function(d){
y0=0
return {value:d.value.map(function(d){return {y0:y0, y1: y0+=d}}), time:d.time}
})
Then create the group for each stack of bar
var state = graph.selectAll(".g")
.data(customData, function(d) { return d.time; });
var stateEnter = state.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x(d.time+1) + ",0)"; });
Then, add the stack of bars of the group:
stateEnter.selectAll("rect")
.data(function(d) { return d.value; })
.enter().append("rect")
.attr("width", barWidth)
.attr("y", function(d) {return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.attr("class", "bar")
.style("fill", function(d,i) { return color(i); });
Move every bar group to update the x values:
state.transition().duration(1000)
.attr("transform", function(d) {console.log(d); return "translate(" + x(d.time) + ",0)"; });
Remove old values
state.exit()
.attr("transform", function(d) {return "translate(" + x(d.time) + ",0)";})
.remove()
Here is a working example.
PS: Next time, please provide jsFiddles so we don't have to go to the source code of your page to provide a solution. Also, try to minimize as much as possible the code of your example (remove axis, useless parsing etc) so we can concentrate on what is wrong. Also, in the process you will often find the problem by yourself as you isolate it.
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.
I am using Sencha Touch charts 1.0.0. From the docs, there is only type='Numeric', no 'percentage' type.
How can I add percentages to left axis? I tried giving the data as percentages ('20%', .. etc) but it didnt work.
in your axis just add this,
{
type: 'Numeric',
fields: ['Data'],
position: 'left',
label: {
renderer: function(v) {
return ((v * 100).toFixed(0)).concat('%');
}
}
}