I am using react-native-chart-kit pie chart.
In the data array, instead of writing a number in the population, I am writing “this.state.data” as shown below since I am getting the numbers from an API.
const pieData1 = [
{
name: ': East',
population: this.state.data,
color: '#00664f',
legendFontColor: 'black',
legendFontSize: 12,
},
]
But I get the error "error while updating property "d" of a view managed by RNSVGPath:". Any idea how to solve it please?
Actually the thing is by default chart requires data other than empty.
just maintain some kind assign value in state.
Just typecast your state to Integer using parseInt
const pieData1 = [
{
name: ': East',
population: parseInt(this.state.data), ////
color: '#00664f',
legendFontColor: 'black',
legendFontSize: 12,
},
I confirm this is the fix for the issue.
I experienced same error on PieChart until I realized that property I pass to as a float turned out to be a string.
JavaScript is not strong typed language - hence adding parseFloat resolved the issue.
Related
This looks to be answered many different times but I can't seem to get it working with my implementation. I am trying to format and limit the data in a sap.m.Input element. I currently have the following:
var ef_Amount = new sap.m.Input({
label: 'Amount',
textAlign: sap.ui.core.TextAlign.Right,
value: {
path: '/amount',
type: 'sap.ui.model.type.Currency'
}
});
The first problem is that it kind of breaks the data binding. When I inspect the raw data (with Fiddler) submitted to the server it is an array like this:
"amount": [1234.25,null]
The server is expecting a single number and as such has issues with the array.
When I use the following, the binding works as desired but no formatting is performed.
var ef_Amount = new sap.m.Input({
label: 'Amount',
textAlign: sap.ui.core.TextAlign.Right,
value: '{/amount}'
});
The second problem is that the data entered is not limited to numbers.
I have tried using sap.m.MaskedInput instead but I don't like the usage of the placeholders because I never know the size of the number to be entered.
And lastly, it would be nice if when focus is placed on the input field, that all formatting is removed and re-formatted again when focus lost.
Should I be looking into doing this with jQuery or even raw Javascript instead?
Thank you for looking.
the array output is a normal one according to documentation. So you need to teach your server to acccept this format or preprocess data before submission;
this type is not intended to limit your data input;
good feature, but ui5 does not support this, because the Type object has no idea about control and it's events like "focus" it only deals with data input-output. So you have to implement this functionality on your own via extending the control or something else.
I would suggest using amount and currency separately. It's likely that user should be allowed to enter only valid currency, so you can use a combobox with the suggestions of the available currencies.
So, after much work and assistance from #Andrii, I managed to get it working. The primary issue was that onfocusout broke the updating of the model and the change event from firing. Simply replacing onfocusout with onsapfocusleave took care of the issues.
The final code in the init method of my custom control:
var me = this;
var numberFormat = sap.ui.core.NumberFormat.getCurrencyInstance({maxFractionDigits: 2});
me.addEventDelegate({
onAfterRendering: function() {
// for formatting the figures initially when loaded from the model
me.bindValue({
path: me.getBindingPath('value'),
formatter: function(value) {
return numberFormat.format(value);
}
});
},
onfocusin: function() {
// to remove formatting when the user sets focus to the input field
me.bindValue(me.getBindingPath('value'));
},
onsapfocusleave: function() {
me.bindValue({
path: me.getBindingPath('value'),
formatter: function(value) {
return numberFormat.format(value);
}
});
}
});
I was trying to asynchronously update a Select field via Memory and ObjectStore. This doesn't work. Setting the data to the Memory object before creating the Select element works fine. Updating the Memory object after creating the Select element doesn't work anymore.
Example code:
require([
"dojo/ready",
"dijit/form/Select",
"dojo/store/Memory",
"dojo/store/Observable",
"dojo/data/ObjectStore",
'dojo/domReady!'
], function(ready, Select, Memory, Observable, ObjectStore, dom){
ready(function() {
var mymem = new Memory();
var myobs = new Observable(mymem);
var mystore = new ObjectStore({ objectStore: myobs });
/* updating memory here works :) */
//mymem.setData([ { id: 2, label: 'qwertz2' }, { id: 3, label: 'qwertz3' } ]);
var s = new Select({
store: mystore
}, 'appsAdminQueueContainer');
s.startup();
/* updating memory here doesn't work :( */
mymem.setData([ { id: 2, label: 'qwertz2' }, { id: 3, label: 'qwertz3' } ]);
});
}
);
Real working example: https://jsfiddle.net/mirQ/ra0dqb63/5/
Is this a bug or is there a solution to be able to update the content of the Select field after creating it - without having to access the Select field directly?
UPDATE
Thank you for your response.
The use of dojo/ready was just a missed leftover while simplifying my code, sorry.
That the use of the ObjectStore is not necessary was not clear to me. Thanks for clearing up.
Okay, the real problem seems to be indeed the last point. I think I have to extend my description.
Updated/extended problem description:
I'm using a grid. At first I was using dojox/grid/DataGrid, but then I switched to dgrid. Everything works well, but I want to use dijit.form.Select as editor for one column. This works also well if the data is static. But in one column I have to read dynamic data from the server. This data comes in JSON format.
First I tried to solve this with the use of dojo/data/ItemFileReadStore - that worked. But it's deprecated and I need to implement a formatter for that column that has to have access to the same JSON data read from the server. I don't have the code for that solution anymore, but it didn't work. I wasn't able to successfully query the data from within the formatter function.
Then I switched to Memory and xhr. The response from the server comes after the Memory object is created (and, as it seems, after creating the Select), so I had to use setData to bring my loaded data in the store. And because the Select is only an editor of a grid, I don't have access to the object itself to be able to re-set the store after updating the data.
I hope my extended description makes my real problem a bit clearer. Thanks in advance for your help!
Mirko
This works for me:
require([
'dijit/form/Select',
'dojo/store/Memory',
'dojo/store/Observable',
], function (Select, Memory, Observable) {
var mymem = new Memory({
data: [{
id: 2,
label: 'qwertz2'
}, {
id: 3,
label: 'qwertz3'
}]
});
var myobs = new Observable(mymem);
var s = new Select({
labelAttr: 'label',
store: myobs
}, 'appsAdminQueueContainer');
s.startup();
myobs.add({ id: 4, label: 'qwerty' });
});
Notable changes:
There's no reason to use dojo/ready in this code. The require callback already waits for modules to load, and as long as this script is at the bottom of the body, there's no need to wait for the DOM to load, either.
There's no need to use a dojo/data store adapter. dijit/form/Select supports dojo/store as well (as of 1.8 if I recall correctly). This might also have been why observation wasn't working. The only difference is labelAttr must be specified on the Select since dojo/store has no concept of a label property.
(Edit) now that I re-read the question, I notice you are calling setData. setData does not fire observers. setData completely resets the store's data, and to reflect that, you would need to actually reset the store on the select entirely (which requires calling setStore, not set('store', ...), if you are using 1.9 or earlier, because Select was never updated properly to support the set API until 1.10).
(Edit #2) Given that the primary reason you are calling setData is due to creating the store before actually having data for it, your case would probably be greatly simplified by using the RequestMemory store implementation from dojo-smore. It basically re-adds the url support that dojo/data/ItemFileReadStore had but dojo/store/Memory didn't.
I have a function responsible for hiding/showing markers, so I decided to use removeMarkers() and addMarkers() with a variable which contains all markers displayed on map, preventing AJAX requests. However, removeMarkers() appears to not working when used after addMarkers() function:
#/assets/javascript/general.js.coffee
#buildMap = (markers)->
provider = Gmaps.build(
'Google',
{
builders: { Marker: RichMarkerBuilder},
markers:
clusterer:
gridSize: 50
styles: [
url: "/assets/cluster.png"
textSize: 15
width: 56
height: 56
]
}
)
Gmaps.handler = #clustereredHandler()
Gmaps.handler.buildMap {
provider: provider,
internal: {id: 'map'} }, ->
Gmaps.markers = _.map(markers, (marker_json) ->
marker = Gmaps.handler.addMarker(marker_json)
_.extend marker, marker_json
marker
)
Gmaps.map = Gmaps.handler.getMap()
Gmaps.handler.bounds.extendWith(Gmaps.markers)
Gmaps.handler.fitMapToBounds()
#app/views/stores/index.html.erb
buildMap(<%=raw #hash.to_json %>);
So, I have:
Handler on Gmaps.handler variable;
All markers on Gmaps.markers variable;
Map on Gmaps.map variable.
Steps to failure:
Load map - OK (All markers loaded correctly);
> Gmaps.handler.removeMarkers(Gmaps.markers) - OK (All markers hidden correctly);
> Gmaps.handler.addMarkers(Gmaps.markers) - OK (All markers shown correctly);
> Gmaps.handler.removeMarkers(Gmaps.markers) - FAILURE! (Markers still being displayed);
I'm using 2.1.2version. Is there any fix for it?
Thanks
According to my plunkr here, there is no bug with gmaps4rails.
I feel like you have an issue with your own functions (maybe dont use extend?) and replace with:
marker.json = marker_json
I cant tell much more since they are not included.
I think the issue is in saving the markers. Whenever you add new markers, you overwrite the old ones. Try
Gmaps.markers.push.apply(Gmaps.markers, Gmaps.handler.addMarkers(Gmaps.markers))
to append the new markers instead.
I am developing a treegrid and have an object being passed into a formatter to generate a gfx graphic.
},{
field:"projects", name:"Projects", children:[
{field:"name", name:"Project Name", formatter: projectFormatter},
{field:"actual_cost", name:"Cost", width:'220px', formatter: costFormatter},
{field:"budget", name:"Budget"}
],
aggregate: "cnt",
itemAggregates: ["actual_cost"]
}
now the formatter function should be able to use this data....however for the life of me, I cannot get it to compute the values in the formatter
Any help is appreciated
Try passing a nameless function to the formatter:
...,formatter: function(value){return getExtImg(value);},...
In there you can call your custom function by name. Dont forget to return a value in your formatter function !
I am trying to draw an pie chart using ExtJS but something is going wrong. I can see following warnings in firebug window :
Unexpected value NaN parsing y attribute.
Unexpected value NaN parsing height attribute.
Code for my pie chart is as follows :
xtype: 'chart',
title: 'Location wise candidate distribution',
itemId: 'CandidateDistributionChart',
store: 'CandidateDistribution',
width: 250,
height: 260,
shadow: true,
animate: true,
theme: 'Base:gradients',
legend: {
position: 'right'
},
series: [{
type: 'pie',
field: 'candidateCount',
showInLegend: true,
label: {
field: 'name',
contrast: true,
font: '18px Arial'
}
}]
Why do those warnings are coming? Currently chart is not getting drawn even though I have mentioned all the necessary values.
Please help...
You used a string to define the store, but it needs a store object.
2 solutions :
1) store: Ext.getCmp('CandidateDistribution'),
Or 2) Define the store into a variable this way chartStore = Ext.create('Ext.data.Store', { ... }); and then pass it to the chart config : store: chartStore
But maybe it's not the problem according to the errors... Can you post the code of your store, your model, and the container of your chart ?
Make sure the value at least one value is not null or not zero. If all zeros or null you will have this type of error.
this is the model. I added the return and it worked. is a quick fix
{name: 'HD', type: 'number', convert: function(value,record){
if (value == 0)
return 0.0001 // The graphic needs at least one of the values to be more than 0 or will throw an error.
else
return value;
}
},