Setting data types in JSON

Flexmonster selects field types automatically. For example, check out the following data:

let jsonData = [
  {
    "Country": "Canada",
    "Price": 174,
  }
];

By default, the types of the "Country" and "Price" fields will be set automatically to "string" and "number", respectively.

You can manually set types for specific fields in one of the following ways:

Using the mapping.
Using the first object of the JSON array.

Using the mapping

The mapping defines how fields are treated and presented within the component. See how to specify the type for a field.

Using the first object of the JSON array

To set data types in the JSON data, add the first object with the necessary configurations to a JSON array. Check out the full list of supported configurations.

See an example:

Array of objects

let jsonData = [
  {
    "Color": {type: "string"},
    "Country": {
      type: "string", 
      hierarchy: "Geography"
    },
    "State": {
      type: "string", 
      hierarchy: "Geography", 
      parent: "Country"
    },
    "City": {
      type: "string", 
      hierarchy: "Geography",
      parent: "State"
    },
    "Price": {type: "number"},
    "Quantity": {type: "number"}
  },
  { 
    "Color" : "green",
    "Country" : "Canada",
    "State" : "Ontario",
    "City" : "Toronto",
    "Price" : 174,
    "Quantity" : 22
  },
  // Other data
];

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true,
  report: { 
    dataSource: { 
      data: jsonData
    },
    // Slice configs
  }
});

Live example

Array of arrays

If you use a JSON array of arrays, do not specify fields in the first subarray:

let jsonData = [
  {
    "Color": {
      type: "string"
    },
    "Country": {
      type: "string",
      hierarchy: "Geography",
    },
    "State": {
      type: "string",
      hierarchy: "Geography",
      parent: "Country"
    },
    "City": {
      type: "string",
      hierarchy: "Geography",
      parent: "State"
    },
    "Price": {
      type: "number"
    },
    "Quantity": {
      type: "number"
    }
  },
  ["green", "Canada", "Ontario", "Toronto", 174, 22],
  // Other data
];

const pivot = new Flexmonster({
  container: "pivotContainer",
  report: {
    dataSource: {
      data: jsonData
    },
    // Slice configs
  }
});

Live example

Supported properties

Check out the list of properties for configuring a field through the first object in JSON data:

Property/Type	Description
type String	The data type. Check out the full list of available data types.
hierarchy String	optional The hierarchy's name. When configuring hierarchies, specify this property to mark the field as a level of a hierarchy or as a member property of a hierarchy (in this case, the type must be set to "property"). See how to configure multilevel hierarchies.
parent String	optional The unique name of the parent level. This property is necessary if the field is a level of a hierarchy and has a parent level. See how to configure multilevel hierarchies.
isMeasure Boolean	optional Indicates whether a field can be selected only for measures (`true`) or only for rows, columns, or report filters (`false`). The `isMeasure` property works only when the strictDataTypes option is set to `true` Live example. Default value: `false`.

Frequently asked questions

Can't find your answer here?
Visit the FAQ page

What is Flexmonster Pivot Table & Charts?

Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.

Which frameworks does Flexmonster work with?

Which data sources can Flexmonster connect to?

How is Flexmonster licensed?

Can I try Flexmonster before buying?

Changes to Flexmonster Software License Agreement