Back to homepage

Connecting to JSON

After formatting your JSON data and setting data types for fields, you can start connecting to the data.

Connect to JSON via UI

Step 1. Go to the Connect tab (
menu_connect ) on the Toolbar.

Step 2. Choose the JSON you want to connect to:

  • Local JSON. Use this option to load a file from your local file system.
  • Remote JSON. Use this option to load a remote JSON file by its URL or data returned by a server-side script.

Connect to JSON programmatically

There are two ways to connect to JSON programmatically:

1) To connect to inline JSON data in the report, use the dataSource.data property:

import React from "react";
import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";

export default function App() {
  const reportJson = {
    dataSource: {
      data: [
        {
          "Product": "Apple",
          "Price": 2.50
        },
        {
          "Product": "Cherry",
          "Price": 5.25
        }
      ]
    }
  };

  return (
    <div>
      <WebDataRocksReact.Pivot 
        toolbar={true} 
        report={reportJson}
      />
    </div>
  );
}

2) If your JSON data is in a file or is returned by a server-side script, specify the URL in the dataSource.filename property:

import React from "react";
import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";

export default function App() {
  const reportJson = {
    dataSource: {
      filename: "URL-to-your-JSON-file"
    }
  };

  return (
    <div>
      <WebDataRocksReact.Pivot
        toolbar={true} 
        report={reportJson}
      />
    </div>
  );
}

Set a JSON data source for all reports

To set a JSON data source for all reports, specify it in the Global Object:

import { Component } from "@angular/core";
import { WebdatarocksPivotModule } from "@webdatarocks/ngx-webdatarocks"

@Component({
  selector: "app-root",
  standalone: true,
  imports: [WebdatarocksPivotModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  globalReportJson = {
    dataSource: {
      type: "json",
      filename: "URL-to-your-JSON-file"
    }
  };

  reportJson = {
    // Your report
  };
}
<app-wbr-pivot
 [toolbar]="true"
 [global]="globalReportJson"
 [report]="reportJson">
</app-wbr-pivot>
import React from "react";
import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";

export default function App() {
  const globalReportJson = {
    dataSource: {
      type: "json",
      filename: "URL-to-your-JSON-file"
    }
  };

  const reportJson = {
    // Your report
  };

  return (
    <div>
      <WebDataRocksReact.Pivot 
        toolbar={true}
        global={globalReportJson}
        report={reportJson}
      />
    </div>
  );
}

See also

After formatting your CSV data and setting data types for fields, you can start connecting to the data.

Connect to CSV via UI

Step 1. Go to the Connect tab (
menu_connect ) on the Toolbar.

Step 2. Choose the CSV you want to connect to:

  • Local CSV. Use this option to load a file from your local file system.
  • Remote CSV. Use this option to load a remote file by its URL or data returned by a server-side script.

Here’s an example of connecting to a remote CSV file:

Connect to CSV programmatically

To load your remote CSV data (a remote CSV file or data returned by a server-side script), specify the URL in the dataSource.filename property:

<script setup>
  import {Pivot} from "@webdatarocks/vue-webdatarocks";
  import "@webdatarocks/webdatarocks/webdatarocks.css";

  const reportCsv = {
    dataSource: {
      filename: "URL-to-your-CSV-file"
    }
  };
</script>

<template>
  <div>
    <Pivot 
      v-bind:report="reportCsv"
      toolbar
    />
  </div>
</template>

Specify a custom field separator

By default, WebDataRocks supports a comma , or a semicolon ; as a field separator. If fields in your data are separated by another character, e.g., a colon :, you need to specify this character in the dataSource.fieldSeparator property. For example:

const reportCsv = {
  dataSource: {
    filename: "URL-to-your-CSV-file",
    fieldSeparator: ":"
  }
};

Set a CSV data source for all reports

To set a CSV data source for all reports, specify it in the Global Object:

<script setup>
  import {Pivot} from "@webdatarocks/vue-webdatarocks";
  import "@webdatarocks/webdatarocks/webdatarocks.css";

  const globalReportCsv = {
    dataSource: {
      type: "csv",
      filename: "URL-to-your-CSV-file"
    }
  };
  const reportCsv = {
    // Your report
  };
</script>

<template>
  <div>
    <Pivot
      v-bind:global="globalReportCsv"
      v-bind:report="reportCsv"
      toolbar
    />
  </div>
</template>

See also

After formatting your CSV data and setting data types for fields, you can start connecting to the data.

Connect to CSV via UI

Step 1. Go to the Connect tab (
menu_connect ) on the Toolbar.

Step 2. Choose the CSV you want to connect to:

  • Local CSV. Use this option to load a file from your local file system.
  • Remote CSV. Use this option to load a remote file by its URL or data returned by a server-side script.

Here’s an example of connecting to a remote CSV file:

Connect to CSV programmatically

To load your remote CSV data (a remote CSV file or data returned by a server-side script), specify the URL in the dataSource.filename property:

    import { Component } from "@angular/core";
import { WebdatarocksPivotModule } from "@webdatarocks/ngx-webdatarocks";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [WebdatarocksPivotModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  reportCsv = {
   dataSource: {
     filename: "URL-to-your-CSV-file"
   }
 };
}
    <app-wbr-pivot
 [toolbar]="true"
 [report]="reportCsv">
</app-wbr-pivot>

    Specify a custom field separator

    By default, WebDataRocks supports a comma , or a semicolon ; as a field separator. If fields in your data are separated by another character, e.g., a colon :, you need to specify this character in the dataSource.fieldSeparator property. For example:

    reportCsv = {
      dataSource: {
        filename: "URL-to-your-CSV-file",
        fieldSeparator: ":"
      }
    };

    Set a CSV data source for all reports

    To set a CSV data source for all reports, specify it in the Global Object:

      import { Component } from "@angular/core";
import { WebdatarocksPivotModule } from "@webdatarocks/ngx-webdatarocks";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [WebdatarocksPivotModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  globalReportCsv = {
   dataSource: {
    type: "csv",
    filename: "URL-to-your-CSV-file"
   }
  };
  reportCsv = {
   // Your report
  };
}
      <app-wbr-pivot
 [toolbar]="true"
 [global]="globalReportCsv"
 [report]="reportCsv"
>
</app-wbr-pivot>

      See also

      After formatting your CSV data and setting data types for fields, you can start connecting to the data.

      Connect to CSV via UI

      Step 1. Go to the Connect tab (
      menu_connect             ) on the Toolbar.

      Step 2. Choose the CSV you want to connect to:

      • Local CSV. Use this option to load a file from your local file system.
      • Remote CSV. Use this option to load a remote file by its URL or data returned by a server-side script.

      Here’s an example of connecting to a remote CSV file:

      Connect to CSV programmatically

      To load your remote CSV data (a remote CSV file or data returned by a server-side script), specify the URL in the dataSource.filename property:

      import React from "react";
      import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";

      export default function App() {
        const reportCsv = {
          dataSource: {
            filename: "URL-to-your-CSV-file"
          }
        };

        return (
          <div>
            <WebDataRocksReact.Pivot 
              toolbar={true} 
              report={reportCsv}
            />
          </div>
        );
      }

      Specify a custom field separator

      By default, WebDataRocks supports a comma , or a semicolon ; as a field separator. If fields in your data are separated by another character, e.g., a colon :, you need to specify this character in the dataSource.fieldSeparator property. For example:

      const reportCsv = {
        dataSource: {
          filename: "URL-to-your-CSV-file",
          fieldSeparator: ":"
        }
      };

      Set a CSV data source for all reports

      To set a CSV data source for all reports, specify it in the Global Object:

      import React from "react";
      import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";

      export default function App() {
        const globalReportCsv = {
          dataSource: {
            type: "csv",
            filename: "URL-to-your-CSV-file"
          }
        };

        const reportCsv = {
          // Your report
        };
       
        return (
          <div>
            <WebDataRocksReact.Pivot 
              toolbar={true}
              global={globalReportCsv}
              report={reportCsv}
            />
          </div>
        );
      }

      See also

      This article explains how to define which data is shown on the grid using the Field List. Each field can be selected to rows, columns, values, or report filters.

      To select the fields in the Field List

      • Go to the Fields tab (menu_fields) on the Toolbar.
      • Pay attention to the All Fields section on the left. It contains all fields from your data source.
      • Drag and drop the fields to the Rows, Columns, Values, and Report Filters areas.
      • To change the aggregation for a field in the Values box, press the Edit button () next to its name.
      • Use the Add calculated value button to compose new values based on your data source.
      • Click the APPLY button to close the Field List and see the changes on the grid.

      Try it yourself:

      To show certain fields when loading data

      1. Configure your fields using the Field List.
      2. Save your current configuration and apply it when loading a new report. For more details, see Loading the report.

      Want to check how is the field configuration defined in the report? Find the slice section in our online demo.

      See also

      This article explains how to define which data is shown on the grid using the Field List. Each field can be selected to rows, columns, values, or report filters.

      To select the fields in the Field List

      • Go to the Fields tab (menu_fields) on the Toolbar.
      • Pay attention to the All Fields section on the left. It contains all fields from your data source.
      • Drag and drop the fields to the Rows, Columns, Values, and Report Filters areas.
      • To change the aggregation for a field in the Values box, press the Edit button () next to its name.
      • Use the Add calculated value button to compose new values based on your data source.
      • Click the APPLY button to close the Field List and see the changes on the grid.

      Try it yourself:

      To show certain fields when loading data

      1. Configure your fields using the Field List.
      2. Save your current configuration and apply it when loading a new report. For more details, see Loading the report.

      Want to check how is the field configuration defined in the report? Find the slice section in our online demo.

      See also

      This article explains how to define which data is shown on the grid using the Field List. Each field can be selected to rows, columns, values, or report filters.

      To select the fields in the Field List

      • Go to the Fields tab (menu_fields) on the Toolbar.
      • Pay attention to the All Fields section on the left. It contains all fields from your data source.
      • Drag and drop the fields to the Rows, Columns, Values, and Report Filters areas.
      • To change the aggregation for a field in the Values box, press the Edit button () next to its name.
      • Use the Add calculated value button to compose new values based on your data source.
      • Click the APPLY button to close the Field List and see the changes on the grid.

      Try it yourself:

      To show certain fields when loading data

      1. Configure your fields using the Field List.
      2. Save your current configuration and apply it when loading a new report. For more details, see Loading the report.

      Want to check how is the field configuration defined in the report? Find the slice section in our online demo.

      See also

      Data type prefixes are added to field names in the first data record. Use the prefixes to set field data types.

      The following prefixes are available:

      NameDescription
      -Numbers.
      +Strings.
      d+Dates divided into 3 subfields: Year, Month, Day.
      D+Dates represented as the multilevel hierarchy: Year > Month > Day.
      D4+Dates represented as the multilevel hierarchy: Year > Quarter > Month > Day.
      ds+Dates displayed in the "dd/MM/yyyy" format.
      dt+Dates displayed in the "dd/MM/yyyy HH:mm:ss" format.
      t+Time intervals displayed in the "HH:mm:ss" format.
      m+Months. Natural sorting is applied to field members.
      w+Days of the week. Natural sorting is applied to field members.

      Examples

      1) Here is a sample CSV data where the ds+ and w+ prefixes are added to the field names:

      ds+Invoice Date, Quantity, Country, w+Week Day
2018-05-15, 3, France, Tuesday
2018-05-16, 4, Italy, Wednesday
2018-05-17, 2, Spain, Thursday
2018-05-12, 2, Japan, Saturday

      After loading the CSV data and selecting fields in the Field List, you can see that the Invoice Date is displayed as a string in the "dd/MM/yyyy" format, and the Week Day is interpreted as a day of the week:

      2) You can represent a date as a multilevel hierarchy using the D+ or the D4+ prefix.

      Here is an example with the D+ prefix:

      D+Invoice Date, -Quantity, -Price, +Country
2018-05-15, 3, 329, France
2018-05-16, 4, 139, Italy
2018-05-17, 2, 429, Spain
2018-05-12, 2, 559, Japan

      See how the Invoice Date is displayed in the pivot table when the CSV file is loaded to WebDataRocks:

      This demo is also available on our CodePen.

      To create multilevel hierarchies from fields of other types, use the JSON data source.

      See also

      Data type prefixes are added to field names in the first data record. Use the prefixes to set field data types.

      The following prefixes are available:

      NameDescription
      -Numbers.
      +Strings.
      d+Dates divided into 3 subfields: Year, Month, Day.
      D+Dates represented as the multilevel hierarchy: Year > Month > Day.
      D4+Dates represented as the multilevel hierarchy: Year > Quarter > Month > Day.
      ds+Dates displayed in the "dd/MM/yyyy" format.
      dt+Dates displayed in the "dd/MM/yyyy HH:mm:ss" format.
      t+Time intervals displayed in the "HH:mm:ss" format.
      m+Months. Natural sorting is applied to field members.
      w+Days of the week. Natural sorting is applied to field members.

      Examples

      1) Here is a sample CSV data where the ds+ and w+ prefixes are added to the field names:

      ds+Invoice Date, Quantity, Country, w+Week Day
2018-05-15, 3, France, Tuesday
2018-05-16, 4, Italy, Wednesday
2018-05-17, 2, Spain, Thursday
2018-05-12, 2, Japan, Saturday

      After loading the CSV data and selecting fields in the Field List, you can see that the Invoice Date is displayed as a string in the "dd/MM/yyyy" format, and the Week Day is interpreted as a day of the week:

      2) You can represent a date as a multilevel hierarchy using the D+ or the D4+ prefix.

      Here is an example with the D+ prefix:

      D+Invoice Date, -Quantity, -Price, +Country
2018-05-15, 3, 329, France
2018-05-16, 4, 139, Italy
2018-05-17, 2, 429, Spain
2018-05-12, 2, 559, Japan

      See how the Invoice Date is displayed in the pivot table when the CSV file is loaded to WebDataRocks:

      This demo is also available on our CodePen.

      To create multilevel hierarchies from fields of other types, use the JSON data source.

      See also

      Data type prefixes are added to field names in the first data record. Use the prefixes to set field data types.

      The following prefixes are available:

      NameDescription
      -Numbers.
      +Strings.
      d+Dates divided into 3 subfields: Year, Month, Day.
      D+Dates represented as the multilevel hierarchy: Year > Month > Day.
      D4+Dates represented as the multilevel hierarchy: Year > Quarter > Month > Day.
      ds+Dates displayed in the "dd/MM/yyyy" format.
      dt+Dates displayed in the "dd/MM/yyyy HH:mm:ss" format.
      t+Time intervals displayed in the "HH:mm:ss" format.
      m+Months. Natural sorting is applied to field members.
      w+Days of the week. Natural sorting is applied to field members.

      Examples

      1) Here is a sample CSV data where the ds+ and w+ prefixes are added to the field names:

      ds+Invoice Date, Quantity, Country, w+Week Day
2018-05-15, 3, France, Tuesday
2018-05-16, 4, Italy, Wednesday
2018-05-17, 2, Spain, Thursday
2018-05-12, 2, Japan, Saturday

      After loading the CSV data and selecting fields in the Field List, you can see that the Invoice Date is displayed as a string in the "dd/MM/yyyy" format, and the Week Day is interpreted as a day of the week:

      2) You can represent a date as a multilevel hierarchy using the D+ or the D4+ prefix.

      Here is an example with the D+ prefix:

      D+Invoice Date, -Quantity, -Price, +Country
2018-05-15, 3, 329, France
2018-05-16, 4, 139, Italy
2018-05-17, 2, 429, Spain
2018-05-12, 2, 559, Japan

      See how the Invoice Date is displayed in the pivot table when the CSV file is loaded to WebDataRocks:

      This demo is also available on our CodePen.

      To create multilevel hierarchies from fields of other types, use the JSON data source.

      See also

      Move up