nuBuilder Forum

Posted: **Mon Aug 07, 2023 1:45 am**

Hi All,
WebDataRocks is a free web reporting tool for data analysis and visualization.

It is written in JavaScript and is not constrained by any external framework. This simple but enterprise-featured web-based pivot grid can be added to your website, application, or a project web page within minutes.

WebDataRocks easily displays your CSV or JSON data in an interactive pivot table.

The main benefit is that WebDataRocks is an absolutely free tool created by passionate data lovers from Flexmonster.

wdr.png

I will post later on how this can be used with NB.

Kevin, Suggesting if this could be made part of NB.

Regards
Nilesh

Posted: **Fri Aug 11, 2023 8:59 am**

WebDataRocks indeed offers a compelling solution for data analysis and visualization.

In addition, have you explored PivotTable.js? This open-source JavaScript library, boasting features like drag-and-drop functionality, presents another avenue for Pivot Table implementation:

GitHub Repository: https://github.com/nicolaskruchten/pivottable

While my examination of WebDataRocks and PivotTable.js hasn't been exhaustive yet, their potential certainly warrants closer consideration.

Posted: **Sat Aug 12, 2023 1:23 am**

Thanks Kevin,

I had a brief look at the pivotTable.js and it is quite interesting too. Something i have noticed is that the repo has not been updated for some years now. Just wondering if there is active support for this repo.

i support either of it to be part of NB as it would be helpful for developers in terms of data analysis.

Lets see what other NB contributors have in mind.

Regards
Nilesh

Posted: **Wed Aug 30, 2023 7:48 am**

Nilesh, have you begun using WebDataRocks with nuBuilder? If so, could you provide a concise example demonstrating its usage?

Posted: **Mon Sep 04, 2023 11:45 pm**

Hi Kevin, I've been utilizing WebdataRocks in conjunction with nuBuilder for more than a year. WebdataRocks provides users with the capability to effortlessly generate pivot tables or obtain consolidated flat data, allowing them to apply filters as they see fit, similar to Excel. Users can connect to both local and remote CSV or JSON files, in addition to data retrieved from databases. Furthermore, reports can be downloaded in Excel, PDF, or HTML formats.

chrome-capture-2023-8-5 (2).gif

chrome-capture-2023-8-5 (3).gif

Regards
Nilesh

Posted: **Mon Sep 04, 2023 11:56 pm**

Hi,

Sharing a code example for some one whomight be interested in trying WebdataRocks.
Data retrieved Via PHP code example

Code: Select all

$a[]=['Date','IC','Importer','Country','Commodity Type','Weight','Commodity'];
$s  = "
SELECT
 postbordericn.po_date,
    postbordericn.po_ic,
    postbordericn.po_importer,
    country.count_name,
    pbcommtype.pb_typecomm,
    postbordercommdet.pc_wt,
    impcommlist.im_commodities

FROM
    postbordericn
        JOIN country ON country.count_id = postbordericn.po_origin
        JOIN postbordercommdet ON postbordericn.postbordericn_id = postbordercommdet.postbordericn_id
        JOIN pbcommtype ON pbcommtype.pbcommtype_id = postbordercommdet.pc_cat
        JOIN impcommlist ON impcommlist.impcommlist_id = postbordercommdet.pc_cmdity

         WHERE MONTH(po_date) = $monthval AND Year(po_date) = $year

";
$t   = nuRunQuery($s);

while($r = db_fetch_row($t)){
    $a[] = $r;
}

$importproduce  = "importproduce = " . json_encode($a) . ";";

nuAddJavascript($importproduce);

unset($a);

html and JS

Code: Select all

<html>
<head></head>
<body>
<div id="importproduce" style="width:100vw;"></div>

<script>
$(document).ready(function() {
//var mytest = JSON.stringify(revenue);
var pivot = new WebDataRocks({
	container: "#importproduce",
	toolbar: true,
	width: "100%",
    height: 430,
	report: {
		dataSource: {
			data: importproduce
		},
		
		slice: {
		    rows: [{
                uniqueName: "Commodity",
                filter: {
            members: ["Commodity Type"]
          }
            }],
            columns: [{
                 uniqueName: "Country"
            }],
            measures: [{
                uniqueName: "Weight",
                aggregation: "sum"
                
            },
            {
                uniqueName: "Weight",
                aggregation: "sum"
            }],
            
            reportFilters: [{
                 uniqueName: "Commodity Type"
            }]
    },
    options: {
       datePattern: "MM/dd/yyyy",
      
       grid: {
	        	"type": "classic",
                "showTotals": "off",
                "showGrandTotals": "on"
	}
        },
        "formats": [{
            "name": "",
            "thousandsSeparator": "",
            "decimalSeparator": ".",
            // "decimalPlaces": 2,
            "maxSymbols": 20,
            "currencySymbol": "",
            "currencySymbolAlign": "left",
            "nullValue": " ",
            "infinityValue": "Infinity",
            "divideByZeroValue": "Infinity"
        }]
       
}



});

});
</script>
</body>
</html>

Parameters can be preset via JS however user will still have the freedom to filter report as they wish.

nuBuilder Forum

Reports with Webdatarocks

Reports with Webdatarocks

Re: Reports with Webdatarocks

Re: Reports with Webdatarocks

Re: Reports with Webdatarocks

Re: Reports with Webdatarocks

Re: Reports with Webdatarocks