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;
}
},
Related
I am using Chart.js and would like to manage my Y-axis. It should look like this:
Intervals should be 15 steps and it should always show the maximum value - 45 (even the data from X-axis is less).
I am trying this:
options: {
scales: {
yAxes: [{
display: true,
ticks: {
maxTicksLimit: 45,
stepSize: 15,
}
}]
},
}
It doesn't work for me: the interval is not 15, but 2, and the maximum Y-axis value depends on X-axis data - if data is 30, then maximum Y-axis value is 30.
How could I fix that? Thank you!
If you open up your browser's dev tools, in the console it's likely you would see this error:
Invalid scale configuration for scale: yAxes
At least that's what I see when trying to use your options object. This tells us that we've not written the scales property correctly. Looking at the chart.js documentation, we see that scales is always an object, not an array of objects. Also based on your requirements it sounds like you would want to set max instead of maxTicksLimit which means you should write an options object like this:
options: {
scales: {
yAxes: {
display: true,
max: 45,
ticks: {
stepSize: 15
}
}
}
}
Using Tablulator (great product!), I am trying to keep the cursor from resetting to the first editable cell in the table after editing a cell. The replaceData function is updating the data element, and while the scroll position does not change, the cursor is reset. I'm not sure how to do this correctly. The documentation, while great, is silent about cursor position beyond the next(), etc methods, which I cannot quite get to work.
In my vue.js table definition component, I have a watch like this:
watch: {
tableData: {
handler: function (newData) {
this.tabulator.replaceData(newData);
},
deep: true,
}
},
and a cellEdited method inside mounted like this:
mounted() {
let self = this;
//todo Possibly validate that cater tips is less than total tips since cater tips is a portion of total tips
self.tabulator = new Tabulator(self.$refs.myTable, {
height: 380, // set height of table (in CSS or here)
placeholder: 'Click "Load Store Tips" to edit data',
data: self.tableData, //link data to table
reactiveData: true, //enable data reactivity
downloadConfig: {columnCalcs: false},
addRowPos:"bottom",
history:true,
layout: "fitDataFill",
initialSort:[
{column:"storeID", dir:"asc"},
],
//Define Table Columns
columns: [
{title: "Store ID", field: "storeID", sorter:"number"},
{title: "Store Tips", field: "inStore_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Cater Tips", field: "cater_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Client ID", field: "clientID"},
],
////////////////////////////////////////////////////////////////////////////
// When a cell is edited, write the data out to the server to ensure it is
// always in a saved state.
////////////////////////////////////////////////////////////////////////////
cellEdited: function (e, cell) {
//self.colPos = cell.getColumn(); //trying to save the cursor pos, but generating error
//self.rowPos = cell.getRow(); // generating error
self.PostTipsEventMethod();
}
});
Here is what I have tried:
Tried capturing the row and column position, and then setting that after the replaceData table render, and after the cellEdited method
Tried using the next() method to move the cursor to the next cell inside the cellEdited method, before and after the replaceData function.
Can someone guide me a bit further on this? I've searched through the tabulator element in the debugger trying to find the row and column numbers of the cell I'm editing, but so far, no joy. I guess I don't understand the lifecycle of the table rendering well enough.
Thank you!
I must be missing something very stupid, because my pie chart works when I put a number in, but not a variable. The code for my chart is below. The two variables were taken from PHP variables, but they do work, because if I call an alert on the variables right before I make the chart, they do pop up. It's just as soon as I put them as data in the chart, the chart won't show up.
What am I missing here?
$('#space').highcharts({
chart: {
type: 'pie',
},
title: {
text: 'Used vs. available diskspace.'
},
subtitle: {
text: 'Over all customers.'
},
series: [{
type: 'pie',
name: 'Magnetic disks',
data: [
{
name: 'Free space',
color: '#2674c7',
y: $free,
},
{
name: 'Total space',
color: '#ac2d38',
y: $total,
sliced: false,
selected: true
},
]
}]
});
Got it, it was something sort of silly as I suspected:
the PHP variables I assigned to the js variables were strings...
Inside
y: $total,
you should use
y: <?php echo $total ?>,
Becuase you cannot common js / php variables.
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('%');
}
}
}
I have an itemselecor inside a grid, and i have an combobox that should reload only the store inside the itemselector( the value fields should remain intact)
Here is the itemselector
var grid = Ext.widget('form', {
id: 'grid',
title: '',
width: 600,
bodyPadding: 10,
renderTo: 'itemselectorproduto',
items: [{
xtype: 'itemselector',
name: 'itemselector',
id: 'itemsel',
anchor: '100%',
imagePath: '/ux/images/',
store: store,
displayField: 'Nome',
valueField: 'ID',
value: vitrine,
allowBlank: true,
msgTarget: 'side'
}]
});
I tried to call the normal store.load(), but it have no effect and it shows no error on the console
If needed i will post more of the code, but i think just this should be enough
Thanks,
Looking through the code if ItemSelector it doesn't look like it supports any changes in the store once it's been binded. It basically creates local copies of the data. And if you call bindStore method to assign different store - it will erase your selection.
You can always improve code in ItemSelector to allow such behavior. It should not be a problem. You can subscribe to datachanged or load event of the store when binding to it, and then handle situation when store data is changed.
Actually i think the best way to do such thing is using ItemSelector`s "populateFromStore". Sure except of extending item selector. In case of extending you should look on the "onBindStore" function of the ItemSelector.
onBindStore: function(store, initial) {
var me = this;
if (me.fromField) {
me.fromField.store.removeAll()
me.toField.store.removeAll();
// Add everything to the from field as soon as the Store is loaded
if (store.getCount()) {
me.populateFromStore(store);
} else {
me.store.on('load', me.populateFromStore, me);
}
}
}
So as you see in case of the empty store it hooks to the load event. And it should be like this:
onBindStore: function(store, initial) {
var me = this;
if (me.fromField) {
me.fromField.store.removeAll()
me.toField.store.removeAll();
me.store.on('load', me.populateFromStore, me);
// Add everything to the from field as soon as the Store is loaded
if (store.getCount()) {
me.populateFromStore(store);
}
}
}