Can handontable pivot data - javascript

Handsontable really fits my needs when it comes to UI interaction. But was wondering if it can also pivot data.
I have Json data that looks like this:
var objectData = [
{id: 1, name: "Ted Right", gender: "male"},
{id: 2, name: "Bill Allan", gender: "male"},
{id: 1, name: "Joan Well", gender: "female"},
{id: 2, name: "Jane Doe", gender: "female"}
];
where id value should be the row name and the gender value should be the column header and the name is the value in the table.

I'm not sure it's possible natively within the framework, but it looks like you can dynamically pass an array containing the column definitions to the table instance while creating it, so you could potentially handle it that way in javascript - you might want to check out this example.
How to create dynamic columns for Handsontable?
Old thread I know, but it's the first one that comes up for handsontable pivot table, so hopefully this helps someone.

To set custom row/column headers, have a look here:
http://handsontable.com/demo/renderers_html.html#header
Portion from above page:
$container.handsontable({
colHeaders: [
"<b>Bold</b> and <em>Beautiful</em>",
"Some <input type='checkbox' class='checker'> checkbox"
]
})

Related

D3js v5 grouped bar chart data x.domain labels and data separated

I have data in the following format coming in as a variable.
var groupeddata =
[{ Title: "Dummy Data", ID: "46", RFU: 20291, Name: "Name1", barcolor: "#ff7f00"},
{Title: "Dummy Data", ID: "50", RFU: 15000, Name: "Name2", barcolor: "#ff7f00"},
{Title: "Dummy Data", ID: "40", RFU: 14000, Name: "Name3", barcolor: "#ff7f00"},
{Title: "Dummy Data2", ID: "46", RFU: 21000, Name: "Name1", barcolor: "#8B008B"},
{Title: "Dummy Data2", ID: "50", RFU: 18095, Name: "Name2", barcolor: "#8B008B"},
{Title: "Dummy Data2", ID: "56", RFU: 27278, Name: "Name3", barcolor: "#8B008B"}];
I have been able to create grouped bar chart if the data is grouped by ID using the d3.nest function as I discussed in a previous problem: https://bl.ocks.org/Coola85/b05339b65a7f9b082ca210d307a3e469
However, if there are two bars with the same "Name" property values, and different IDs as in the case above, they appear far away. For example, Name3 shows a bar at ID 40 (row 3 of data) and at ID 56 (row 6 of data) (https://bl.ocks.org/Coola85/86391f03bab40b16bdc24f1eedfba35f/).
Additionally, it would be fine if the x-axis tick labels were also simple numbers 1, 2, 3 instead of the ID numbers.
I do not want the names to come on the x-axis tick labels, as the names would be too long to fit in the actual data-set.
I have been trying to do this for a while with no luck, and any help is appreciated.
Update 1
To clarify, here is the image of what I want it to look like:
Ideal output. Note- the text and arrows which are dashed are only for
reference and not desired in final output.
I think you're almost there - it's just that your d3.nest is incorrect. Your grouping on the ID at the moment, but looking at your expected output that's not needed anywhere.
Change your grouping to use Name:
var databyID = d3.nest()
.key(function(d) { return d.Name; })
.entries(groupeddata);
This produced the following which I think is exactly what you want

Using ng-options with JSON data

I'm still trying to find my way with AngularJS. I have a JavaScript code that uses URL to return JSON data as an array. I need help with populating the same data in select using ng-options.
data to populate on the select
This isn't how you ask for help, but nevermind. Given a JSON object like this
var JsonArray = [{
id: 1,
name: 'Jane',
address: 'Jane\'s house'
}, {
id: 2,
name: 'Jill',
address: 'Jill\'s house'
}, {
id: 3,
name: 'John',
address: 'John\'s house'
}, {
id: 4,
name: 'Jack',
address: 'Jack\'s house'
}];
When you want to use ng-select with ng-options, you need to specify 3 required fields :
your table
the name that every object will take (like a for ... each loop)
The property you want to see in your options
You also can specify a track by property to give your options a given value.
<select ng-model="mySelect" ng-options="object.name for object in JsonArray track by object.id"></select>
Now, use the last piece of code, and inspect it in a brwoser. You will understand everything.
For reference :
<select ng-model="mySelect" ng-options="[object].[chosenProperty] for [object] in [yourArray] track by [object].[property]"></select>

Migrate custom AngularJS filter from 1.2.28 to 1.4.x

I have a complex JSON response that is iterated over using ng-repeat. Only a relatively small subset of the attributes within the result set are displayed on the screen, so filtering of the results should be restricted to values the user can actually see, otherwise the filtering behavior would be confusing to the end-user.
Since one of the attributes I wish to filter on is a deeply nested array, a custom filter was needed since the built-in AngularJS filterFilter does not iterate over the array elements to the best of my knowledge.
I was able to get this working some time back in AngularJS v1.2.28, but unfortunately it appears to break during a migration to v1.4.3. I have not spent time to isolate where in the release cadence this functionality broke however.
I have not found any helpful information in the migration guides that would indicate what has changed. All I know is that the actual/expected parameters to the filter receive different values in the latest major version of AngularJS, which leads to the failure.
ng-repeat filter expression:
<li ng-repeat="user in users | list_filter:{establishment: {id: filterText, names: [{name: filterText}], locations: [{streetAddress1: filterText, streetAddress2: filterText, city: filterText, stateProvince: filterText, postalCode: filterText}]}}">
Example data structure of a single element:
data = [{
id: 234567,
name: 'John Doe',
establishment: {
id: 067915959,
locations: [{
id: '134B030365F5204EE05400212856E994',
type: 'postal',
streetAddress1: 'P O BOX 900',
city: 'Grover',
stateProvince: 'CA',
postalCode: '902340900',
isoCountryCode: 'US',
region: 'MONROE'
}, {
id: '999B030365F4204EE05400212856E991',
type: 'postal',
streetAddress1: '2590 Atlantic Ave',
city: 'Fredricks',
stateProvince: 'VA',
postalCode: '45487',
isoCountryCode: 'US',
region: 'MONROE'
}],
names: [{
name: 'Grover Central School Dst',
type: 'PRIMARY'
}, {
name: 'Grover Central School Dst',
type: 'MARKETING'
}, {
name: 'Grover CENTRAL SCHOOL DISTRICT',
type: 'LEGAL'
}]
}
}];
Supporting Plunker Examples:
Plunker for version 1.2.28:
http://plnkr.co/edit/KD1MmNMBEhO7X2v9yK4S?p=info
Plunker for version
1.4.3: http://plnkr.co/edit/OmPOOwRWCHuPutUtWOcC?p=info
Edit:
The issue appears to be directly related to the changes introduced in v1.3.6.
It appears the issue is related to the fact that an implicit AND condition is now being applied but was previously an implicit OR, which is what is desired in my case. You can import the old version as a separate filter, if the old behavior is desired.

GetOrgChart: Nodes whose parent haven't been defined

I'm using the GetOrgChart JQuery plugin and running into a JavaScript error of:
Uncaught Type Error: Cannot read property '_ap' of null
I was able to determine that this is occurring in the case from my dataset where a user occurs earlier in the list than their manager does. My hierarchy is based around NTLogins, so the NTLogin of a given user is the id and the parentId is their manager's NTLogin.
$("#people").getOrgChart({
primaryColumns: ["Name"],
dataSource: [{
id: "bobeans125",
parentId: null,
Name: "Bob Beans"
}, {
id: "franklin884",
parentId: "tdawl756",
Name: "Frank Lin"
}, {
id: "tdawl756",
parentId: "bobeans125",
Name: "Tim Dawl"
}]
});
JSFIDDLE Demo
I have no good way that I can think of to order the data so that this doesn't occur other than finding all of the many root nodes and drilling down into the hierarchy manually so that the dataset being sent to GetOrgChart is ordered. However, the assumption of not having to do so was the primary driver for choosing GetOrgChart.
I ended up just recursively walking the tree and building the object in the right order. I was able to get it to load without error, however, the tree is too large to be displayed and requires being zoomed out too far to be useful.
Id : and ParentId: is integer value but you gave string value so your output is Error: Cannot read property '_ap' of null.
Correct Example:
$("#people").getOrgChart({
primaryColumns: ["Name"],
dataSource: [{
id: 1,
parentId: null,
Name: "Bob Beans"
}, {
id: 2,
parentId: 1,
Name: "Frank Lin"
}, {
id: "3",
parentId: "1",
Name: "Tim Dawl"
}]
});

Creating New Record using Ember-Model

I struggled for hours trying to get this to work using Ember-Data with no result, so thought I give Ember-Model a try; still no joy.
I have the following:
App.Item = Ember.Model.extend({
itemName: Ember.attr(),
});
App.Strat = Ember.Model.extend({
stratName: Ember.attr(),
items: Ember.hasMany('App.Item',{key: 'items', embedded: true});
App.Strat.adapter = Ember.FixtureAdapter.create();
App.Strat.FIXTURES =
[
{id: 1, stratName: 's1', items:
[{id: 1, itemName: 'I1'}]},
{id: 2, stratName: 's2', items:
[{id: 2, itemName: 'I2'},
{id: 3, itemName: 'l3'}]}
];
Everything seemed to work fine up to this point. I'm able to display the fixture data via the templates. What I want to do is to allow the user to add additional strat records, by showing a pre-populated strat record on the screen, allowing users to make modifications, then save it with the two strat records loaded from the fixture data. I tried the following:
var dummyStrat =
{id: 100, stratName: "s5", items:
[{id: 101, itemName: "I5", strategy: 100}]};
var newStrat = App.Strat.create (dummyStrat);
newStrat.save();
This generated the following error:
TypeError: this.get(key).toJSON is not a function.
But no error if I did this:
var dummyStrat =
{id: 100, stratName: "s5"};
var newStrat = App.Strat.create (dummyStrat);
newStrat.save();
What am I doing wrong?
What happens if you remove strategy: 100 from the create call? I have pretty much the same code in my app except I'm not setting any variable that isn't already an attribute in my model.
My other suggestion would be to try renaming the items key to stratItems so that the key doesn't have the same name as the computed hasMany attribute.

Categories