pivottable
Javascript Pivot Table (aka Pivot Grid, Pivot Chart, Cross-Tab) implementation with drag'n'drop.
Page Redirection
I am using pivottable.js of jquery. On drag-and-drop the inputs to the available divs, we get the table rendered simulatenously. So we downloaded the plugin and used "pivotUI loaded from CSV". The problem is how am i suppose to fetch the rendered data to be used further in my d3 visualisation.
Source: (StackOverflow)
I am using PivotTable.js and I am trying to use pivot() to create a table as follows:
<script type="text/javascript">
$(function(){
var tpl = $.pivotUtilities.aggregatorTemplates;
$.getJSON("9_Response.json", function(mps) {
$("#output").pivot(mps, {
derivedAttributes: {
"Market": function(mp) {
return mp["market"];
},
"Year": function(mp) {
return mp["stYear"];
}
},
aggregators: {
"Sum1": function() { return tpl.sum()(["totSale"])}
},
rows: ["Market"],
cols: ["Year"],
aggregatorName: "Sum1",
rendererName: "Table"
});
});
});
</script>
When I use PivotUI() it works fine but I would like to create a static table only, without UI (without drag n' drop attributes, renderers and aggregator selectors). I need just the table.
With pivot() I am getting always sums of the record count, not the sums of the field values.
Could you please advise of how to resolve this?
Source: (StackOverflow)
I have set up an angular application which uses the pivot.js tp build a pivot table. i am getting an error
"Cannot read property 'derivers' of undefined"
Here is the code:
HTML:
app.js
routerApp.controller('productPivot',['$scope','$http','$objectstore',function($scope,$http,$objectstore){
$scope.products = [];
var client = $objectstore.getClient("com.duosoftware.test","product");
client.onGetMany(function(data){
if (data){
$scope.products = data;
var derivers = $.pivotUtilities.derivers;
$("#productsPivotTableOutput").pivotUI($scope.products, {
rows: ["Name"],
cols: ["CanBeSold"],
rendererName: "Table"
});
}
});
client.getByFiltering("*");
}]);
do i have to inject pivot js somewhere? This is the sample i followed!
Pivot with angular
Source: (StackOverflow)
I am trying for sorting functionality in Pivot Table.I have created Pivot Table by using pivotTable.js . Using nrecopivot.js , trying for sorting but i am getting ReferenceError: NReco PivotTable Extensions is not defined .
Any help?
I am creating pivot table using this code.
var nrecoPivotExt = new NRecoPivotTableExtensions({
drillDownHandler: function (dataFilter) {
var filterParts = [];
for (var k in dataFilter) {
filterParts.push(k+"="+dataFilter[k]);
}
}
});
var stdRendererNames = ["Table","Table Barchart","Heatmap","Row Heatmap","Col Heatmap"];
var wrappedRenderers = $.extend( {}, $.pivotUtilities.renderers);
$.each(stdRendererNames, function() {
var rName = this;
wrappedRenderers[rName] = nrecoPivotExt.wrapTableRenderer(wrappedRenderers[rName]);
});
var pivotRepName = "pivotData.csv";
var derivers = $.pivotUtilities.derivers;
$.get(pivotRepName , function(mps) {
$("#Result").pivotUI($.csv.toArrays(mps), {
renderers: $.extend(
$.pivotUtilities.renderers,
$.pivotUtilities.gchart_renderers,
$.pivotUtilities.d3_renderers,
$.pivotUtilities.export_renderers
),
renderers: wrappedRenderers,
rendererOptions: { sort: { direction : "desc", column_key : [ 2014 ]} },
rendererName: "Table",
});
});
Source: (StackOverflow)
I'm using the pivottable.js plugin here.
pivottable.js aggregator documentation.
I want to to use my data for "Users" as the value in the pivot table cells. Right now I am accessing user data from my info[] array. I also have it set as a "row" value currently. I want to modify this so that "Users" will be my VALUE in the cells of the table.
function refreshTable(){
console.log("Starting Pivot Table Population");
//ajax start
$.get(
"table.php",
function(data){
//loop through the data and feed to the pivotUI
var info = [];
for (var ii=0; ii < array.length; ii++) {
info.push({
Skill: array[ii][0],
Users: array[ii][3],
IOT: array[ii][1],
IMT: array[ii][2],
Level: array[ii][4]});
}
console.log(info);
//pivot UI
$('#output').show();
$("#output").pivotUI(
info,
{
rows: ["Row","Users"],
cols: ["Col1","Col2","Col3"]
}
);
}
//end of ajax function "TYPE"
, "json")
};
Source: (StackOverflow)
We are using nicolaskruchten's pivottable library, and we would like to limit the number of attributes shown per line on the x or y axis so after a certain number of them, they can "jump" to a different line in case of axis x attributes or column in case of axis y attributes.
Another way to see this is to define a fixed width for the container header row so the attributes can go in multiple lines by default after loading a certain number of them.
Thank you all for the insight given.
Source: (StackOverflow)
I am adding pivottable.js (after reading of it here http://www.wissel.net/stw/wisselblog.nsf) into an xPages application. The component loads but I have a problem when the component which allows for filtering of the data, is done on my xPage it refreshes the entire page instead of just the chart.
Here is a demo of the app, You can see that when you hit the drop down on a category you can filter and once that is done it does a partial refresh to filter the data.
http://nicolas.kruchten.com/pivottable/examples/mps.html
On my xPage when I filter the data it refreshes the entire page. Is there a way to prevent this behavior?
Below is the relevant code. The code not included is just grabbed from the project unmodified but I can include if needed.
I am using using a custom control on the xpage
<xc:ccPivot disableTheme="true"></xc:ccPivot></xp:view>
Inside the custom control there isn't much. I have tried calling the script at the bottom of the page but that made no change.
<script type="text/javascript" src="callPivotTable"></script>
<xp:this.resources>
<xp:script src="/pivot.js" clientSide="true"></xp:script>
<xp:styleSheet rel='nofollow' href="/pivot.css"></xp:styleSheet>
<xp:script src="/jquery-ui-1.9.2.custom.min.js"
clientSide="true">
</xp:script>
<xp:script src="/d3_renderers.js" clientSide="true"></xp:script>
</xp:this.resources>
<div id="output" style="margin: 10px;"></div>
Here is the callPivotTable script
$(function(){
var derivers = $.pivotUtilities.derivers;
$.getJSON("./xRest.xsp/restService2", function(mps) {
$("#output").pivotUI(mps
);
});
});
You will notice that I am not calling jQuery as a resource here. That is because I am using the bootstrap4xpages extension library which loads jQuery. Not sure if that makes a difference or not.
Here is a link to a working nsf. It is using the bootstrap extension library, and bootstrapv2.3.2 but will load fine in bootstrap3 with the same problems.
Link to nsf
Source: (StackOverflow)
I have been using (http://nicolas.kruchten.com/pivottable) pivottable.js in one of my application. The table has been rendered fine but I am facing issues while adding responsiveness to my UI. The table don't shrink to the div sizes defined for small view port using media queries. Regardless of view-port the table always plots to the same size.
Also the width of the columns of table seems to be non-changeable. I have tried to change the defined classes for col in pivot.css but that doesn't seem to do the trick.
table.pvtTable .pvtColLabel {text-align: center; width:50px;}
table.pvtTable .pvtTotalLabel {text-align: right; width: 50px;}
Also below is how I have used media queries on the div on "graph" class where the table is plotted:
@media (min-width: 320px) and (max-width: 640px) {
/*Making gray box span across the screen*/
body {
padding-left: 0px; /*changed to avoid hz scroll on mobile device*/
padding-right: 0px; /*changed to avoid hz scroll on mobile device*/
padding-top: 0px;
}
#console {
/* Negative indent footer by it's height */
margin: 0px auto -40px;
}
.graph {
width:250px;
height:270px;
}
.wrapper-gray{
background-color: #ebebeb;
padding: 5px;
}
.section-box{
background-color: #fff;
padding: 5px;
}
}
Please guide me if I am going wrong somewhere.
Source: (StackOverflow)
I am using nicolaskruchten pivottable, for displaying my data using:
$('#output').pivot([
{country: "USA", city: "Boston"},
{country: "USA", city: "NYC"},
{country: "UK", city: "London"},
],
{
rows: ["country"],
cols: ["city"]
});
Its displaying table properly but now I want to filter my data dynamically in the table.
One of the way is, to filter my available data and redraw pivot table with filter data.
I want to know if there is any inbuilt filter method available.
There is an provision for a filter object in the options array of pivot(input [,options]) method but not able to find any example to implement.
If anyone can suggest me how to proceed further ?
Source: (StackOverflow)
I am trying to use https://github.com/nicolaskruchten/pivottable, basically I want to show image in the table. What I've done so far is ; but it wont display the image as img tag instead it considers it as string
<body>
<script type="text/javascript">
$(function(){
$("#output").pivotUI(
[
{product: "product1", image: "<img src='image1' alt='' height='42' width='42'>"},
{product: "product2", image: "<img src='image2' alt='' height='42' width='42'>"}
]
);
});
</script>
<p><a rel='nofollow' href="http://nicolas.kruchten.com/pivottable/examples/index.html">« back to examples</a></p>
<div id="output" style="margin: 10px;"></div>
</body>
Source: (StackOverflow)