I am using jQplot for a bar graph but I've run into problem.
Here is some sample data:
var s2 = [["28",425, null], ["23",424], ["24",417], ["25",390],["26",393], ["27",392], ["28",369]];
The problem i have is there are two values the same e.g. 28 and jQplot treats this as the same item is there a way to make it treat this as a separate value?
Break your data and labels into two separate arrays (data and ticks), then use the CategoryAxisRenderer:
$(document).ready(function(){
ticks = ['One', 'Two', 'Three', 'One', 'Two', 'One'];
data = [12,14,6,21,17, 21];
var opts = {
seriesDefaults: {
renderer: jQuery.jqplot.BarRenderer
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
}
};
plot1 = jQuery.jqplot ('chart1', [data], opts);
});
Fiddle here.
Related
I want make pie chart using state value in react with '#toast-ui/react-chart'.
I tried this and that after looking at the examples, but it's hard to me.
This is a example.
//chart data
var data = {
categories: ['June, 2015'],
series: [
{
name: 'Budget',
data: [5000]
},
{
name: 'Income',
data: [8000]
},
{
name: 'Expenses',
data: [4000]
},
{
name: 'Debt',
data: [6000]
}
]
};
var options = {
chart: {
width: 660,
height: 560,
title: 'Today's Channel & Value.'
}
tooltip: {
suffix: 'value'
}
},
};
var theme = {
series: {
colors: [
'#83b14e', '#458a3f', '#295ba0', '#2a4175', '#289399',
'#289399', '#617178', '#8a9a9a', '#516f7d', '#dddddd'
]
}
};
//render part
render()
{
return(
<div>
<PieChart
data={data}
options={options}
/>
</div>
}
and document is here.
https://github.com/nhn/toast-ui.react-chart#props
https://nhn.github.io/tui.chart/latest/tutorial-example07-01-pie-chart-basic
What's in the document is how to make a chart with a fixed number, but I want to change it using the state.
So, How can I mapping series data like this and how to add data length flexible?
I have list of object like ...
this.state.list =[{"channel_name":"A","channel_number":17,"VALUE":3,"num":1},
{"channel_name":"B","channel_number":23,"VALUE":1,"num":2},
{"channel_name":"C","channel_number":20,"VALUE":1,"num":3},
{"channel_name":"D","channel_number":1,"VALUE":1,"num":4}]
The length of the list is between 1 and 7 depending on the results of the query.
I want to do like this.
series:[
{
name: this.state.list[0].channel_name+this.state.list[0].channel_num
data: this.state.list[0].VALUE
},
{
name: this.state.list[1].channel_name+this.state.list[1].channel_num
data: this.state.list[1].VALUE
},
{
name: this.state.list[2].channel_name+this.state.list[2].channel_num
data: this.state.list[2].VALUE
},
{
name: this.state.list[3].channel_name+this.state.list[3].channel_num
data: this.state.list[3].VALUE
}
]
How can I implement it however I want?
Since this.state.list is a list of objects, so you can simply use map method to loop through each object https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map. Then create new object with custom value.
let new_series = [];
this.state.list.map((obj) => {
let info = {
name: obj.channel_name + obj.channel_number, //from your code
data: obj.VALUE //from your code
}
new_series.push(info)
});
Then assign new list to your chart.
//chart data
var data = {
categories: ['June, 2015'],
series: new_series
]
};
I have a model that receives int bitmasks from the backend:
{"user": 7, "group":5, "other":1}
and I now want to show a form with checkboxes like this:
user: [X] read [X] write [X] execute
group: [X] read [ ] write [X] execute
other: [ ] read [ ] write [X] execute
where user can toggle on or off and then the updated bitmask is sent back to the server in a store.sync operation.
I know how to make and align the checkboxes, but ExtJS checkboxes in a form bind to boolean values through a correlation between the checkbox name and the model field name, and not to parts of bitmask.
So I have to convert back and forth between the bitmask int and a bunch of booleans. How would I implement that in a reusable manner?
I think the checkbox group component is a good candidate to render your checkboxes and also to implement the conversion logic.
Here is a reusable component to do the two-way conversion of bitmasks:
Ext.define('Fiddle.Bitmask', {
extend: 'Ext.form.CheckboxGroup',
xtype: 'fiddlebitmask',
isFormField: true,
columns: 3,
items: [{
boxLabel: 'Read',
name: 'read',
inputValue: 1,
excludeForm: true,
uncheckedValue: 0
}, {
boxLabel: 'Write',
name: 'write',
inputValue: 1,
excludeForm: true,
uncheckedValue: 0
}, {
boxLabel: 'Execute',
name: 'exec',
inputValue: 1,
excludeForm: true,
uncheckedValue: 0
}],
getModelData: function () {
let obj = {};
obj[this.name] = this.getValue();
return obj;
},
setValue: function (value) {
if (value) {
var binary = Ext.String.leftPad((value).toString(2), 3, '0');
value = {
read: Number(binary[0]),
write: Number(binary[1]),
exec: Number(binary[2])
};
}
this.callParent([value]);
},
getValue: function () {
var value = this.callParent();
var binary = `${value['read']||0}${value['write']||0}${value['exec']||0}`
return parseInt(binary, 2);
}
});
And the working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2clg
edit Component completed with getModelData implementation to support usage with form.getValues/form.updateRecord.
What version of Ext are you using? If your version supports ViewModels then I would do the conversion in the ViewModel and bind it to the view.
There is the convert and calculate config on fields as well but they are converting in one way only.
I started to work with ui-grid a few time ago so i'm having some problems.
I would like to filter the options in dropdown of every row of the grid.
I can filter the values and show it in the dropdown field but when i click in dropdown only appear undefined values. What can i do to solve this problem?
I've tried so many things but i can't find the solution.
Here is the plunker
http://embed.plnkr.co/HMsq4OasNs50ywJuI3DS/
Thanks
I forked your plunker.
In summary, I changed up the column definition to use editDropdownOptionsFunction instead of the combination of editDropdownOptionsArray and cellFilter. According to the documentation,
cellFilter is a filter to apply to the content of each cell
... so that doesn't seem like what you were trying to achieve.
Also, changed the periodos definition for rowEntity.sindicato === 1 to be an array rather than an object.
editDropdownOptionsFunction: function(rowEntity, colDef) {
console.log(rowEntity);
if (rowEntity.sindicato === 1) {
periodos = [{
id: 1,
value: 'teste1'
}];
} else if (rowEntity.sindicato === 2) {
periodos = [{
id: 2,
value: 'test2'
}, {
id: 5,
value: 'test5'
}];
} else {
periodos = [{
id: 3,
value: 'test3'
}, {
id: 6,
value: 'test6'
}, {
id: 4,
value: 'test4'
}];
}
return periodos;
}
How can i add a summary row to a qx.ui.table.Table to display a total for a column.
The only idea yet is to combine two tables, one with the data and one with the totals. Is there any more elegant way how i can handle this?
Edit
The table is used with the qx.ui.table.model.Simpleas table model.
Well, as long as you use qx.ui.table.model.Simple, you can calculate summary row and append it to the data array before passing it to the model. Or you can do it in a listener of the model's dataChanged. Also it's possible to subclass qx.ui.table.rowrenderer.Default to emphasize the row in some way.
Here goes example and here's playground snippet:
qx.Class.define("app.SummaryRowRenderer", {
extend : qx.ui.table.rowrenderer.Default,
members : {
// override
getRowClass : function(rowInfo)
{
var model = rowInfo['table'].getTableModel();
var isSummaryIndex = model.getColumnIndexById('_isSummary');
return rowInfo['rowData'][isSummaryIndex] ? 'summary' : '';
}
},
defer : function()
{
var entry = qx.bom.element.Style.compile({
'backgroundColor' : '#ccc',
'fontWeight' : 'bold'
});
var sheet = qx.bom.Stylesheet.createElement();
qx.bom.Stylesheet.addRule(sheet, '.summary .qooxdoo-table-cell', entry);
}
});
var model = new qx.ui.table.model.Simple();
model.setColumns(
[this.tr('Name'), this.tr('Value'), null],
['name', 'value', '_isSummary']
);
var table = new qx.ui.table.Table(model);
table.set({
'statusBarVisible' : false,
'columnVisibilityButtonVisible' : false,
'showCellFocusIndicator' : false,
'dataRowRenderer' : new app.SummaryRowRenderer()
});
table.getTableColumnModel().setColumnVisible(2, false);
this.getRoot().add(table, {'edge': 0});
var data = [
{'name': 'foo', 'value': 10},
{'name': 'bar', 'value': 100},
{'name': 'baz', 'value': 1000},
{'name': 'quz', 'value': 10000},
];
qx.event.Timer.once(function()
{
var dataWithSummary = qx.lang.Array.clone(data);
dataWithSummary.push(data.reduce(function(r, v)
{
r['value'] += v['value'];
return r;
}, {'name': 'Summary', 'value': 0, '_isSummary': true}));
model.setDataAsMapArray(data);
}, this, 1000);
I create a local object collection based on the user's selection. The dynamic Array should be loaded to the jqGrid. After dynamically creating the array I tried to reload, but nothing happens. Here is the code -
$(document).ready(function () {
var arrobj = [];
var JSONString = []; //[{"DOId":"0","DONo":"Please select","DealerCode":"0","Week":"0","Item":"0","Qty":"11","Date":"11"}]
$("#<%=btnAdd.ClientID%>").click(function () {
//Get values
//Date
var dlDt = $("#<%=tbRchngDt.ClientID%>").val();
//Qty
var dlQty = $("#<%=tbQty.ClientID%>").val();
//item
var dlItem = $("#<%=ddlItem.ClientID%>").val();
//DO No
var dlDOId = $("#<%=ddlDO.ClientID%>").val();
var dlDO = $("#<%=ddlDO.ClientID%> option:selected").text();
//Week
var dlWeek = $("#<%=ddlWeek.ClientID%>").val();
//Dealer
var dlDealer = $("#<%=ddlDealer.ClientID%>").val();
DistributionDtl = new Object();
DistributionDtl.DOId = dlDOId;
DistributionDtl.DONo = dlDO;
DistributionDtl.DealerCode = dlDealer;
DistributionDtl.Week = dlWeek;
DistributionDtl.Item = dlItem;
DistributionDtl.Qty = dlQty;
DistributionDtl.Date = dlDt;
//alert(DistributionDtl);
arrobj.push(DistributionDtl);
JSONString = JSON.stringify(arrobj);
//alert(JSONString);
$("#list").jqGrid('setGridParam',
{ datatype: "local",
data: JSONString
}).trigger("reloadGrid");
});
jQuery("#list").jqGrid({ data: JSONString,
datatype: "local",
height: 150,
width: 600,
rowNum: 10,
rowList: [10, 20, 30],
colNames: ['DOID', 'Item', 'Qty', 'Date'],
colModel: [{ name: 'DOId', index: 'DOId', width: 60, sorttype: "int" },
{ name: 'Item', index: 'Item', width: 120 },
{ name: 'Qty', index: 'Qty', width: 80 },
{ name: 'Date', index: 'Date', width: 120}],
pager: "#pager",
viewrecords: true,
caption: "Contacts"
});
});
You should add data local to jqgrid with any of the following methods:
addJSONData - with data as json
addRowData - adding row by row and then trigger reload grid to recalculate pagination - data should be a javascript object
Documentation can be found here. Edit: According to the documentation you CAN set local data directly in the "data" param but it should be an array not a json string and you do not have the contents of JSONString in your question, so the problem might come from that.