Dynamically changing Row and Column values of pivottable.js output chart

[Russell-Manifold]

I am hoping this is the correct platform to post this.

I have an asp .net app which is used as a reporting platform. Currently, I have managed to bind the pivot table and chart (pivottable.js) to a variable Json data source, which is working hassle free.

To enable greater flexibility, I would like to dynamically change the rows: col: vals: & aggregatorName: values from the C# Server Side code as opposed to hard coding the values as in my code below.

My aspx page code (working) is as follows:
`<script type="text/javascript">
var derivers = $.pivotUtilities.derivers;

    var renderers = $.extend($.pivotUtilities.renderers,
        $.pivotUtilities.plotly_renderers,
        $.pivotUtilities.export_renderers);

    function createPivotTable(dataSourceJson) {
        // Parse the JSON string to create a JavaScript object
        var dataSource = JSON.parse(dataSourceJson);

        $(function () {
            $("#pivotoutput").pivotUI
            (
                dataSource,
                {
                    rows: ["Name", "Type"],
                    cols: ["Year_Month", "Category"],
                    vals: ["Line_Val_Excl"],
                    aggregatorName: "Sum"
                }
            )
        });
    }
</script>`

Amongst other ideas I have tried the following:
C# server side
string json = DataTableToJson.ConvertDataTableToJson(CollectData()); string criters = "{rows: [" + "Name" + "," + "Type" + "]," + " cols: [" + "Year_Month" + "," + "Category" + "]," + " vals: [" + "Line_Val_Excl" + "]," + " aggregatorName: " + "Sum" + "}"; Page.ClientScript.RegisterStartupScript(this.GetType(), "CreatePivotTable", "createPivotTable('" + json + "," + criters + "');", true);

Client Side:
`<script type="text/javascript">
var derivers = $.pivotUtilities.derivers;

        var renderers = $.extend($.pivotUtilities.renderers,
            $.pivotUtilities.plotly_renderers,
            $.pivotUtilities.export_renderers);

        function createPivotTable(dataSourceJson, chartCriteria) {
            // Parse the JSON string to create a JavaScript object
            var dataSource = JSON.parse(dataSourceJson);
            var chartcriteria = JSON.parse(chartCriteria);

            $(function () {
                $("#pivotoutput").pivotUI
                (
                    dataSource,
                    chartcriteria
                    //{
                    //    rows: ["Name", "Type"],
                    //    cols: ["Year_Month", "Category"],
                    //    vals: ["Line_Val_Excl"],
                    //    aggregatorName: "Sum"
                    //}
                )
            });
        }
    </script>`

But to no avail.

I am not a javascript specialist so any guidance on how to dynamically bind these values to the Server side could would be appreciated.

Thanks