Menu
Download Free Trial
Table of contents

addJSON

addJSON(json:Array)

[starting from version: 2.2]

Sets JSON data source.

Parameters

json – Array of objects. The component supports a certain format of JSON – array of objects, where each object is an unordered set of name/value pairs. In addition, the first object can be used to define data types, captions, etc. Here is the list of supported properties that can be used in the first object of input array:

  • type – data type. Can be:
    • "string" – field contains string data. You will be able to aggregate it only with Count and Distinct Count aggregations. It will be sorted as string data.
    • "number" – field contains numeric data. You will be able to aggregate it with all different aggregations. It will be sorted as numeric data.
    • "level" – field is a level of hierarchy. This type is used together with other properties such as: hierarchy, level and parent
    • "month" – field contains months.
    • "weekday" – field contains days of the week.
    • "date" – field is a date. Such field will be split into 3 different fields: Year, Month, Day.
    • "date string" – field is a date. Such field will be formatted using date pattern (default is dd/MM/yyyy).
    • "year/month/day" – field is a date. You will see such date as a hierarchy: Year > Month > Day.
    • "year/quarter/month/day" – field is a date. You will see such date as a hierarchy: Year > Quarter > Month > Day.
    • "time" – field is a time (numeric data). Such field will be formatted using HH:mm pattern. Min, Max, Count and Distinct Count aggregations can be applied to it.
    • "datetime" – field is a date (numeric data). Such field will be formatted using dd/MM/yyyy HH:mm:ss pattern. Min, Max, Count and Distinct Count aggregations can be applied to it.
    • "id" – field is an id of the fact. Such field is used for editing data. This field will not be shown in Fields List.
    • "hidden" – field is hidden. This field will not be shown in Fields List.
  • caption – hierarchy caption.
  • hierarchy – hierarchy name, if the field is a level of hierarchy ("type":"level").
  • level – caption of the level, if the field is a level of hierarchy ("type":"level").
  • parent – caption of the parent level, if the field is a level of hierarchy ("type":"level").
  • dimensionUniqueName – dimension unique name. Can be used to group several fields under one dimension.
  • dimensionCaption – dimension caption. Is used as a display name (folder name in Fields List) when several fields are grouped under one dimension.

Examples

To add JSON data using jQuery call:

/**
* The data can be set directly in jQuery call
*/
var pivot = $("#pivotContainer").flexmonster({
	toolbar: true,
	report: {
        data: [
            {"Category" : "Accessories", "Color" : "green", "Quantity" : 22}
        ]}
});

To add JSON data using addJSON() API call. Please pay your attention that the first element of JSON in this example is used to define data types, captions, group fields under one dimension, define hierarchy with 3 levels.

var jsonData = [
  {
    "Color":{"type": "string"},
    "M":{"type": "month", 
        "dimensionUniqueName": "Days", 
        "dimensionCaption": "Days", 
        "caption":"Month"},
    "W":{"type": "weekday", 
        "dimensionUniqueName": "Days", 
        "dimensionCaption": "Days", 
        "caption":"Week Day"},
    "Country":{"type":"level", 
        "hierarchy": "Geography", 
        "level":"Сountry"},
    "State":{"type":"level", 
        "hierarchy": "Geography", 
        "level":"State", 
        "parent": "Сountry"},
    "City":{"type":"level", 
        "hierarchy": "Geography", 
        "parent": "State"},
    "Price":0,
    "Quantity":{"type": "number"}
  },
{
    "Color":"green",
    "M":"September",
    "W":"Wed",
    "Country" : "Canada",
    "State" : "Ontario",
    "City" : "Toronto",
    "Price":174,
    "Quantity":22
  },
  {
    "Color":"red",
    "M":"March",
    "W":"Mon",
    "Time":"1000",
    "Country" : "USA",
    "State" : "California",
    "City" : "Los Angeles",
    "Price":1664,
    "Quantity":19
  },
  {
    "Color":"red",
    "M":"January",
    "W":"Mon",
    "Country" : "Canada",
    "State" : "Quebec",
    "City" : "Montreal",
    "Price":1190,
    "Quantity":292
  },
  {
    "Color":"green",
    "D":"04/08/2014",
    "M":"August",
    "W":"Fri",
    "Time":"1000",
    "Country" : "USA",
    "State" : "California",
    "City" : "Los Angeles",
    "Price":1222,
    "Quantity":730
  },
  {
    "Color":"white",
    "M":"March",
    "W":"Wed",
    "Country" : "USA",
    "State" : "California",
    "City" : "Los Angeles",
    "Price":7941,
    "Quantity":73
  },
  {
    "Color":"red",
    "M":"August",
    "W":"Wed",
    "Country" : "Canada",
    "State" : "Ontario",
    "City" : "Toronto",
    "Price":6829,
    "Quantity":19
  },
  {
    "Color":"green",
    "M":"January",
    "W":"Wed",
    "Country" : "Canada",
    "State" : "Quebec",
    "City" : "Montreal",
    "Price":2995,
    "Quantity":98
  },
  {
    "Color":"white",
    "M":"February",
    "W":"Mon",
    "Country" : "USA",
    "State" : "California",
    "City" : "Los Angeles",
    "Price":2471,
    "Quantity":93
  },
  {
    "Color":"yellow",
    "M":"March",
    "W":"Fri",
    "Country" : "Canada",
    "State" : "Ontario",
    "City" : "Toronto",
    "Price":6650,
    "Quantity":40
  },
  {
    "Color":"blue",
    "M":"February",
    "W":"Wed",
    "Country" : "Canada",
    "State" : "Ontario",
    "City" : "Toronto",
    "Price":865,
    "Quantity":45
  },
  {
    "Color":"purple",
    "M":"August",
    "W":"Wed",
    "Country" : "Canada",
    "State" : "Quebec",
    "City" : "Montreal",
    "Price":511,
    "Quantity":46
  },
  {
    "Color":"blue",
    "M":"September",
    "W":"Mon",
    "Country" : "Canada",
    "State" : "Quebec",
    "City" : "Montreal",
    "Price":981,
    "Quantity":18
  },
  {
    "Color":"blue",
    "M":"September",
    "W":"Fri",
    "Country" : "Canada",
    "State" : "Ontario",
    "City" : "Toronto",
    "Price":284,
    "Quantity":24
  }
];

/**
* The data can be set using addJSON() and setReport() API calls 
* only after component is ready
*/
var pivot = $("#pivotContainer").flexmonster({
	toolbar: true,
        ready: function () {
		pivot.addJSON(jsonData);
	}
});

/**
* flexmonsterAddJSON() function illustrates how to set JSON data 
* that is already on the page and define a slice based on this data.
*/
function flexmonsterAddJSON() {
  flexmonster.addJSON(jsonData);
  var slice = {
    rows: [{ uniqueName: "Color" }],
    columns: [{ uniqueName: "W" }, { uniqueName: "[Measures]" }],
    measures: [{ uniqueName: "Price"}]};
  flexmonster.runQuery(slice);
}

To add JSON data using setReport() API call:

/**
* The data can be set using addJSON() and setReport() API calls 
* only after component is ready
*/
var pivot = $("#pivotContainer").flexmonster({
	toolbar: true,
        ready: function () {
		flexmonsterSetReport();
	}
});

/**
* flexmonsterSetReport() function illustrates how to compose report based on JSON data that is already on the page.
*/
function flexmonsterSetReport() {
  var report = {
    dataSource:
    {
    	data: jsonData
    },
    slice:
    {
    	rows: [{ uniqueName: "M" }],
    	columns: [{ uniqueName: "Geography" }, { uniqueName: "[Measures]" }],
    	measures: [{ uniqueName: "Quantity"}]},
    options:
    {
    	configuratorActive: true,
    	viewType: "grid"
    }
  };
  flexmonster.setReport(report);
}

Open local JSON file:

/**
* connectLocalJSONHandler() function 
* illustrates how to connect to local JSON data in file.
*/
function connectLocalJSONHandler() {
  flexmonster.connectTo({ dataSourceType: "json", browseForFile: true });
}

Connect to remote JSON file:

/**
* connectRemoteJSONHandler() function 
* illustrates how to connect to remote JSON file.
*/
function connectRemoteJSONHandler() {
  var url = "Url to remote JSON file";
  flexmonster.connectTo({ dataSourceType: "json", filename: url });
}