JSON data source

Data source

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<button id="btn1" onclick="updateData()" >updateData</button>
<button id="btn2" onclick="runQuery()" >runQuery</button>
<div id="pivot-container"></div>

JavaScript

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

var pivot = new Flexmonster({
	container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
		toolbar: true,
		report: {
			dataSource: {
				data: jsonData
			},
			slice: {
				rows: [
				{ uniqueName: "Color" },
				{ uniqueName: "[Measures]" }
				],
				columns: [
				{ uniqueName: "Country" }
				],
				measures: [
				{
					uniqueName: "Price", 
					aggregation: "sum" 
				}
				]
			},
      options: {
          grid: {
             type: "flat"
          }
      }
		}
	});
  
  
function updateData() {
   flexmonster.updateData({data: [
	{
		"Color" : "green",
		"Country" : "Canada",
		"State" : "Ontario",
		"City" : "Toronto",
		"Price" : 174,
		"Quantity" : 22, 
    "newColumn": 34
	}]}, {partial: false});
}

function runQuery() {
flexmonster.runQuery({
				rows: [{ uniqueName: "Country" }, {uniqueName: "newColumn"},
				{ uniqueName: "Color" },
				{ uniqueName: "[Measures]" }
				],
				columns: [
				
				],
				measures: [
				{
					uniqueName: "Price", 
					aggregation: "sum" 
				}
				]
			})
}