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

Question

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 idea's I have tried: Client 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:

  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"
                    //}
                )
            });

Any guidance on how to dynamically bind these values to the Server side could would be appreciated.

Thanks