Data types in JSON

Data source

by Ian Sadovy

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<button onclick="addDataTypes()">Add data types</button>
<div id="pivot-container"></div>

JavaScript

var jsonData = [
    {
            "Color" : "",
            "Country" : "Canada",
            "State" : "Ontario",
            "City" : "Toronto",
            "Price" : 174,
            "Quantity" : 22
        },
        {
            "Color" : "August",
            "Country" : "Canada",
            "State" : "Ontario",
            "City" : "Toronto",
            "Price" : 174,
            "Quantity" : 22
        },
        {
            "Color" : "January",
            "Country" : "USA",
            "State" : "California",
            "City" : "Los Angeles",
            "Price" : 166,
            "Quantity" : 19
        }
    ];

    var jsonDataWithTypes = [
        {
            "Color": {type: "month"},
			"Country":{type: "level", hierarchy: "Geography", 
					level: "Country"},
			"State": {type: "level", hierarchy: "Geography", 
					level: "State", parent: "Country"},
			"City": {type: "level", hierarchy: "Geography", 
					parent: "State"},
			"Price": {type: "number"},
			"Quantity": {type: "number"}
        },
        {
            "Color" : "",
            "Country" : "Canada",
            "State" : "Ontario",
            "City" : "Toronto",
            "Price" : 174,
            "Quantity" : 22
        },
        {
            "Color" : "January",
            "Country" : "Canada",
            "State" : "Ontario",
            "City" : "Toronto",
            "Price" : 174,
            "Quantity" : 22
        },
        {
            "Color" : "August",
            "Country" : "USA",
            "State" : "California",
            "City" : "Los Angeles",
            "Price" : 166,
            "Quantity" : 19
        }
    ];

var pivot = new Flexmonster({
	container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      data: jsonData
    },
		slice: {
			rows: [
				{ uniqueName: "Color" },
				{ uniqueName: "[Measures]" }
			],
			columns: [
				{ uniqueName: "Country" }
			],
			measures: [
				{...