Table Sizes Object

A tableSizes object stores size settings for columns and rows.

You can also modify the size of the cells through the UI.

Properties

Name	Type	Description
`columns`	Array of Column Sizes Objects	optional Contains width configurations for particular columns.
`rows`	Array of Row Sizes Objects	optional Contains height configurations for particular rows.

Table Sizes subobjects:

Column Sizes Object
Row Sizes Object

A Column Sizes object contains width configurations for particular columns in the report:

Name	Type	Description
`width`	Number	The width of the column, specified in pixels.
`idx`	Number	An index representing the position of the column in the table, starts from `0`.
`tuple`	Array of strings	Includes unique names of members that identify the column.
`measure`	String	optional The unique name of the measure connected with the column. Must be used with the `tuple` property. Define this property only if “Measures” is located in columns in the slice.

Note. When setting column sizes, specify the target column using either idx or a tuple, but not both simultaneously.

A Row Sizes object contains height configurations for particular rows in the report:

Name	Type	Description
`height`	Number	The height of the row, specified in pixels.
`idx`	Number	An index representing the position of the row in the table, starts from `0`.
`tuple`	Array of strings	Includes unique names of members that identify the row.
`measure`	String	optional The unique name of the measure connected with the row. Must be used with the `tuple` property. Define this property only if “Measures” is located in rows in the slice.

Note. When setting row sizes, specify the target row using either idx or a tuple, but not both simultaneously.

Example

tableSizes: {
  columns: [
    {
      tuple: [
        "Country.France"
      ],
      measure: "Price",
      width: 150
    },
    {
      tuple: [],
      measure: "Price",
      width: 200
    }
  ],
  rows: [
    {
      idx: 4,
      height: 80
    }
  ],
}

Try it on CodePen.

This object contains configurations that will be applied to all reports in WebDataRocks. If needed, you can override global configurations in a report.

Check out how global configurations are saved in a report: Saving the report with global configs.

Properties

Name	Type	Description
`dataSource`	Data Source Object	optional Contains information about the data source.
`options`	Options Object	optional Defines the view and functionality available for users.
`localization`	String\|Object	optional Sets a localization. For more details, refer to the language localization tutorial.

Examples

1) Setting a data source that will be used in all reports:

const pivot = new WebDataRocks({
  container: "#wdr-component",
  global: {
    dataSource: {
      type: "json",
      filename: "https://cdn.webdatarocks.com/data/data.json"
    }
  }
});

See the full code on CodePen.

2) Setting options to make all reports read-only:

const pivot = new WebDataRocks({
  container: "#wdr-component",
  global: {
    options: {
      grid: {
        showFilter: false,
        showReportFiltersArea: false,
      },
      configuratorButton: false,
      drillThrough: false,
      sorting: "off", 
    },
  }
});

Check out a live demo on CodePen.

3) Setting a localization that will be applied to all reports:

const pivot = new WebDataRocks({
  container: "#wdr-component",
  global: {
    localization: "https://cdn.webdatarocks.com/loc/es.json"
  }
});

See an example on CodePen.

4) Overriding global configurations in the report:

const pivot = new WebDataRocks({
  container: "#wdr-component",
  global: {
    dataSource: {
      type: "json",
      data: // Inline JSON data
    },
    options: {
      grid: {
        showFilter: false,
      },
      configuratorButton: false,
      sorting: "off", 
    },
  },
  report: {
    dataSource: {
      type: "csv",
      filename: "https://cdn.webdatarocks.com/data/data.csv"
    },
    options: {
      grid: {
        showFilter: true,
      },
      configuratorButton: true,
    },
  }
});

Try it out on CodePen.

About chart connectors

Сhart connectors are ready-to-use scripts that help integrate WebDataRocks with JavaScript charting libraries.

Each connector contains methods that request data from the pivot table and preprocess it according to the format required by the used charting library.

Available connectors and their methods

Connector for amCharts
Connector for FusionCharts
- fusioncharts.getData
Connector for Google Charts
- googlecharts.getData
Connector for Highcharts
- highcharts.getData

To integrate with other charting libraries, use the getData() method.

webdatarocks.amcharts.getNumberFormatPattern(format: Object): String

Returns a number formatting string for a chart. Accepts one argument – format which is a Format Object of WebDataRocks.

Examples

Here is an example of how to apply number formatting to the value axis of a chart:

/* Create a number formatter for the value axis: */
valueAxis.numberFormatter = new am4core.NumberFormatter();
/* Get a format object from WebDataRocks: */
var numberFormat = pivot.amcharts.getNumberFormatPattern(rawData.meta.formats[0]);
/* Apply number formatting to the value axis: */
valueAxis.numberFormatter.numberFormat = numberFormat;

Here is an example of how to apply number formatting to the chart’s tooltip text:

var numberFormat = pivot.amcharts.getNumberFormatPattern(rawData.meta.formats[0]);
series.columns.template.tooltipText = "{valueY.value.formatNumber('" + numberFormat + "')}";

Examples

1) Here is an example of how to configure the series for a stacked bar chart using amcharts.getNumberOfMeasures(), amcharts.getMeasureNameByIndex(), and amcharts.getCategoryName():

/* Create and configure series for a stacked bar chart */
for (s = 0; s < pivot.amcharts.getNumberOfMeasures(rawData); s++) {
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.valueX = pivot.amcharts.getMeasureNameByIndex(rawData, s);
  series.dataFields.categoryY = pivot.amcharts.getCategoryName(rawData);
  series.stacked = true;
  series.name = pivot.amcharts.getMeasureNameByIndex(rawData, s);
  var labelBullet = series.bullets.push(new am4charts.LabelBullet());
  labelBullet.locationX = 0.5;
  labelBullet.label.text = "{valueX}";
  labelBullet.label.fill = am4core.color("#fff");
}

See the full code on CodePen.

Examples

Here is an example of how the series values of the column chart can be set using amcharts.getMeasureNameByIndex():

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = webdatarocks.amcharts.getMeasureNameByIndex(rawData, 0);

Examples

Here is an example of how the name of the category axis can be set:

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());

categoryAxis.dataFields.category = pivot.amcharts.getCategoryName(rawData);

Parameters

Name	Type	Description
`options`	Object	Describes the options for data pre-processing. Contains the following properties:
`slice`	Slice Object	optionalSpecifies the pivot table’s slice according to which to prepare the chart’s data. If not defined, the Connector prepares the data that is currently displayed on the grid. Note that if a slice is passed to `amcharts.getData()` explicitly, the chart will not be changed upon changes applied to the grid (via the UI or in code). The data shown in the chart will be static. See the example.
`prepareDataFunction`	Function	optionalThis function can be implemented and passed as a property of options if the data is required to be prepared differently from the way the Connector does by default. After the data is processed by `prepareDataFunction`, it is passed to `callbackHandler` and `updateHandler` (the description of these event handlers is given below). `prepareDataFunction` accepts two input arguments: `rawData` – the raw data from the pivot table. Find information about the structure of `rawData` here. `options` – an object with options passed to `amcharts.getData()`.
`callbackHandler`	Function	Fired once the data is prepared. Accepts two input arguments: `chartData` – the data processed either by the Connector or `prepareDataFunction` (if defined). `rawData` – the raw data from the pivot table. It can be used for defining number formatting for a chart. It is possible to access `rawData.meta` properties (e.g., available format objects). Find information about the structure of `rawData` and its meta properties here.
`updateHandler`	Function	optional Fired once any change is applied to the report’s configuration (e.g., the pivot table’s slice or number formatting are changed). Alike `callbackHandler`, accepts two input arguments: `chartData` and `rawData`.

Examples

1) Here is an example of how to pass the slice to the amcharts.getData() method:

function createChart() {
  pivot.amcharts.getData({
    slice: {
      rows: [
        {
          uniqueName: "Country"
        }
      ],
      columns: [
        {
          uniqueName: "Measures"
        }
      ],
      measures: [
        {
          uniqueName: "Quantity"
        }
      ]
    }
  },
 drawChart, updateChart);
}

Example

webdatarocks.collapseAllData();

Check out the CodePen example.

Parameters

Name	Type	Description
withAllChildren	Boolean	optional Defines whether to drill down all levels of all hierarchies or not. Set this property to `false` to expand all nodes and not to drill down hierarchies. Default value is `true`.

Examples

1) Expand all nodes and drill down all hierarchies in the slice:

webdatarocks.expandAllData();

Check out the CodePen example.

2) Expand all nodes without drilling down the hierarchies in the slice:

webdatarocks.expandAllData(false);

Table Sizes Object

Properties

Example

Properties

Examples

See also

About chart connectors

Available connectors and their methods

Examples

See also

Examples

See also

Examples

See also

Examples

See also

Parameters

Examples

See also

Example

See also

Parameters

Examples

See also