how to create pivot table from Canvas Data Grid? - javascript

I need help - how to create a pivot table in Canvas-Datagrid. Kindly Help me.
This is what we're trying to do. the actual data is below:
https://github.com/TonyGermaneri/canvas-datagrid
we're trying to get the data grid to display something like this in a new grid preferably:

data in the grid is a array of objects or an array of arrays, manipulating the data is done the same way you would any standard JS data.
This looks like an elegant solution to the problem: https://medium.com/front-end-hacking/matrix-rotation-%EF%B8%8F-6550397f16ab
So what you'd do is:
grid.data = flipMatrix(grid.data); and maybe grid.draw();
If the grid is not disposing of the previous schema (the column names are not changing) you can tell it to always load a new schema when the setting data by setting the autoGenerateSchema property to true.

Related

Is there a way to get all the data from the grid that is sorted and edited in jqgrid?

I have a grid that can be paging, sorted, and edited.
I have to save data after I get all the data in the grid.
For example, if you sorted and edited a grid, you must be able to import the edited and sorted data, that is, the data displayed on the screen.
I used this method.
$('#grid).jqGrid('getRowData')
It can get edited grid data, but it only takes one page of data.
so I used this method.
$('#grid).jqGrid('getGridParam', 'data)
It can get all grid data, but it's not apply sorting.
I tried this answer.
answer
It can get sorting data, but it's not apply inline edit.
I want to get all the grid data.
Is there any way?
I found the answer. It's very simple. :(
Just add {key: true} in colModel.

d3/js data manipulation dropping columns

I have a dataset in csv and it looks like below.
country,col1,col2,col3
Germany,19979188,11233906,43.7719591
UK,3839766,1884423,50.92349378
France,1363608,796271,41.60557873
Italy,957516,557967,41.72765781
I'd like to drop col1, col2 off while keeping country and col3. If possible, I'd like to wrap it into a function where I can pass column list that I'd like to drop/keep.
Using pandas, which I'm familiar with, I can easily do it. e.g. data.drop(['col1', 'col2'], axis = 1). But I found d3 way or js way in general is based on each row so couldn't come up with an idea to drop columns.
I was thinking of d3.map() taking desirable columns only. But I was stuck to build a general function that the column list can be passed in.
Could anyone have thoughts?
D3 fetch methods, like d3.csv, will retrieve the whole CSV and will create an array of objects based on that CSV. Because of that, filtering out some columns is useless. Actually, it's worse than useless: you'll spend time and resources with an unnecessary operation.
Therefore, the only useful solution is, if you have access and own that CSV, creating a new CSV without those columns. That way you'll have a smaller file, faster to load. Otherwise, if you cannot change the CSV itself, don't bother: just load the whole thing and use the columns you want (which will be properties in the objects), ignoring the others.
Finally, if you have a lot of data manipulation it might be interesting reducing the size of the objects in the data array. If that's your case, use a row function to return only the properties you want. For instance:
d3.csv(url, function (d){
return {country: d.country, col3: d.col3}
}).then(etc...)

Data transformation for KendoUI grid

I have a JSON data structure that I need to display in Kendo UI grid. The data is something like this
[
{"ObjType": {"Key1":"Value1", "Key2":"Value2", "Key3":["1234","45223"]}},
{"ObjType": {"Key1":"Value3", "Key2":"Value4", "Key3":["1234","45223"]}},
{"ObjType": {"Key1":"Value5", "Key2":"Value6", "Key3":["1234","45223"]}}
]
Kendo UI expects an array of Key/Value pairs or defined columns with array of arrays of values. What's the best way to transform this into something that the grid can understand?
Or maybe there is a way in Kendo grid to specify where to get the data from. The array in Key3 can be converted into string.
The schemas of the data can change - for different ObjType there will be different keys and different number of them, but the structure is pretty much the same - string key and string or array of strings value. And the ObjType stays the same through the document, but can change when we read a different document.
The Kendo UI DataSource schema has a parse configuration option, which allows you to tweak the data response before the DataSource instance handles it.
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.parse

Extjs: How to use store record as a store for grid

Overview of what I need to accomplish:
I've been working with Ext for a few months. I've been using js since forever. Doing this in any other framework or with just jquery would be a simple matter. In angular, I'd just use ng-grid to display the data for the selected day. Trying to figure it out in Ext is making my head hurt.
I have some JSON data that looks a lot like this...
{
"Id":"1",
"Sunday":[
{"Start":"10:15","End":"17:45"},
{"Start":"20:00","End":"23:00"},
{"Start":"00:15","End":"06:15"},
{"Start":"08:00","End":"10:00"}
],
"Monday":[],
"Tuesday":[],
"Wednesday":[],
"Thursday":[],
"Friday":[],
"Saturday":[]
}
What I actually need to do:
I have two controls on an ExtJs 3.4.0 page/panel/whatever:
an Ext Combo Box (dropdown list) containing days of week (possibly from the store)
an Ext grid to display the array of things for that day
Behavior:
When an entry from the dropdown is chosen, the associated data for that day of the week is used to populate rows in the grid. The column model is trivial, i'm not worried about anything other than how the data actually gets from the JSON store and into the grid after a day is selected.
to re-iterate: what I'm having trouble getting my head around is how to use a store record as a store to populate the grid.
Ideally, I'd populate an arrayStore with the JSON data and just use a line like:
new Ext.grid.EditorGridPanel({
...
store: new Ext.data.Store(data: arrayOfSchedules[drodown.getValue()])
...
})
I can provide a plunker or something similar if that's what it takes. The format of the data really defines everything.
You do not need to create new grid/store on each combo select. You can extract data from the selected day (Sunday) and then you can use grid.store.loadData to update the grid.

Read back chart details from highchart in json

I need to read back the chart details like styles, type, and all the attributes which are used to display any chart by Highchart, i.e. similar to chart.getSVG(). I need something like chart.getJSON() to save the entire JSON template with user chosen colors, fonts, series location etc in the DB, except the "data".
When we do the automatic distribution of the above mentioned chart using HighChart server, we need to read the above template with all the user specific attributes, but insert new data values for X and Y which we have, i.e only values will be new here, not the style. What is the best way to do it?, i.e. read the user template on the chart, but generate pdf with the new values. Your help is appreciated.
You can get all non-default options set for chart from:
var userOptions = $("#container").highcharts().userOptions
So options used when creating chart are stored there. Now you can use that object (without userOptions.series array of course) to store in your DB.
To remove series array use this snippet:
delete userOptions.series
And now you can create object using:
var myJSON = JSON.stringify(userOptions);
And send myJSON to you DB and store it.

Categories

Resources