updateData(connectionParameters: Object, options: Object)
[starting from version: 2.3]
Helps to update data for the report without cleaning the report. Only the dataSource
is updated, whereas the slice, all defined options, number and conditional formatting, the scroll position stay the same. For all data sources, updateData
allows connecting to a new data source. For a JSON data source, it is also possible to update only some part of the data.
connectionParameters
– DataSourceObject. It contains connection parameters. options
optional – Object. Contains additional options: partial
optional – Boolean. Use partial
to update data partially: add, update, or remove certain records of the JSON array. Only for the "json"
data source type.partial
to true
and add a field of the "id"
type to your dataset. For more information, check this example.false
.ignoreSorting
optional – Boolean. Set ignoreSorting: true
and current sorting defined in the report will be ignored when you update the data. Default value: false
.ignoreScroll
optional – Boolean. Set ignoreScroll: true
and current scroll position in the pivot table will be ignored when you update the data. Default value: false
. 1) Update data from Microsoft Analysis Services:
flexmonster.updateData({
type: 'microsoft analysis services',
proxyUrl: 'https://olap.flexmonster.com/olap/msmdpump.dll',
catalog: 'Adventure Works DW Standard Edition',
cube: 'Adventure Works'
});
Open the example on JSFiddle.
2) Update data from CSV data source:
flexmonster.updateData({
type: 'csv',
filename: 'data/data.csv'
});
Try on JSFiddle.
3) Update data from JSON inline data:
let jsonData = [ { "Category": "Accessories", "Size": "277 oz", "Color": "red", "Destination": "United Kingdom", "Business Type": "Warehouse", "Country": "United Kingdom", "Price": 1000, "Quantity": 730, "Discount": 38 }, { "Category": "Accessories", "Size": "47 oz", "Color": "white", "Destination": "United States", "Business Type": "Warehouse", "Country": "United States", "Price": 7941, "Quantity": 73, "Discount": 53 }, { "Category": "Bikes", "Size": "264 oz", "Color": "white", "Destination": "Australia", "Business Type": "Specialty Bike Shop", "Country": "Australia", "Price": 6829, "Quantity": 19, "Discount": 56 } ]; flexmonster.updateData({ data: jsonData });
Check out on JSFiddle.
4) How to use updateData
for adding/updating/removing partial data:
First of all, we add id
and delete
types to the mapping:
dataSource: { data: getData(), mapping: { "Category": { type: "string" }, "Price": { type: "number" }, "RowId": { type: "id" }, "DeleteRow": { type: "delete" } } }
Then, when defining the data, we specify an id
field for every object the following way:
function getData() { return [ { "Category": "Accessories", "Price": 242, "RowId": 1 } ] }
To add or update only some of the records, use partial: true
:
let dataForUpdate = [{ "Category": "Cars", "Price": 51844, "RowId": 4 }] flexmonster.updateData({data: dataForUpdate}, {partial: true});
To delete the records, specify id
and delete
fields:
let dataForUpdate = [{ "RowId": 3, "DeleteRow": true }] flexmonster.updateData({data: dataForUpdate}, {partial: true});
See a live example on JSFiddle.