Hello All,
This blog Describes how to load Data from a Local JSON file with an AJAX request and render A VIZ chart using that Data.
for more information about VIZ charts UI5 CVOM HTML5 Charts – sap.viz.ui5 , Table – SAPUI5 Demo Kit
Development Tools required for this can be downloaded from SAP Development Tools for Eclipse
Create A project can be of any type (sap.ui.commons or sap.m)
- create a sap.ui.commons project with an initial view blog (JSON view)
- create a folder for the JSON file as show below
- add sap.viz library in your index.html
Open the blog view and copy paste the below lines of code.
createContent : function(oController) {
//Data set Creation
var dataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [ {
axis : 1,
name : ‘Products’,
value : “{Product}”
} ],
measures : [
{
name : ‘Litre’,
value : ‘{Sale}’
}
],
data : {
path : “/d/Products”
}
});
var column2 = new sap.viz.ui5.Column({
id : “column2”,
width : “490px”,
height : “292px”,
plotArea : {
‘colorPalette’ : [‘#B22400’]
},
title : {
visible : true,
text : ‘Daily Production’
},
dataset : dataset
});
// JSON Model Creation
var AuModel = new sap.ui.model.json.JSONModel();
// AJAX call
var url =”/blog_VIZ/jsonFiles/dailyProductin.json”;
$.ajax({
type : “GET”,
url : url,
contentType : “application/json”,
dataType : “json”,
data : {},
success: function(data){
AuModel.setData(data);
},
error:function(jqXHR,textStatus,errorThrown){
alert(“hi”+textStatus.toString());
}
});
column2.setModel(AuModel);
return column2;
}
Data in JSON File :
{
“d”:
{
“Products”: [
{
“Product”:”Milk”,
“Sale”:”70″
},
{
“Product”:”Water”,
“Sale”:”64″
},
{
“Product”:”Coke”,
“Sale”:”55″
},
{
“Product”:”Sprite”,
“Sale”:”30″
},
{
“Product”:”BP”,
“Sale”:”45″
},
{
“Product”:”King fisher”,
“Sale”:”59″
}
]
}
}
we are now ready to run & see the result , Right click on your index.html & click on Run —–> Web App Preview and open the url in chrome Browser (prefered)
Here we go 🙂 🙂 🙂 🙂 🙂
Cheers
Pandu
Thanks for writing this up. If we implement charts in our project, I will reference this post.
Thanks Andy Bostian
Hi All,
I have created split app. am getting lot of errors, Am a bigineer. Could anybody help me. my email id is madhu88lathanaidu@gmail.com
2016-12-29 17:58:40 Device API logging initialized – DEVICE
sap-ui-core.js:80 2016-12-29 17:58:40 registerResourcePath (”, ‘resources/’) – sap.ui.ModuleSystem
sap-ui-core.js:80 2016-12-29 17:58:40 registerResourcePath (‘practice_myfiori0ui5’, ‘./’) – sap.ui.ModuleSystem
sap-ui-core.js:80 2016-12-29 17:58:40 URL prefixes set to: – sap.ui.ModuleSystem
sap-ui-core.js:80 2016-12-29 17:58:40 (default) : resources/ – sap.ui.ModuleSystem
sap-ui-core.js:80 2016-12-29 17:58:40 ‘practice_myfiori0ui5’ : ./ – sap.ui.ModuleSystem
sap-ui-core.js:27 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/.
send @ sap-ui-core.js:27
http://localhost:55307/Practice_MyFiori0UI5/resources/sap-ui-core.js Failed to load resource: the server responded with a status of 404 (Not Found)
send @ sap-ui-core.js:27
sap-ui-core.js:144 Uncaught Error: resource practice_myfiori0ui5/App.view.xml could not be loaded from ./App.view.xml. Check for ‘file not found’ or parse errors. Reason: Not Found
at Object.error (sap-ui-core.js:80)
at t (sap-ui-core.js:27)
at Object.fireWith [as rejectWith] (sap-ui-core.js:27)
at z3 (sap-ui-core.js:27)
at b (sap-ui-core.js:27)
at Object.send (sap-ui-core.js:27)
at Function.ajax (sap-ui-core.js:27)
at Object.jQuery.sap.loadResource (sap-ui-core.js:80)
at Object.X.loadTemplate (XMLTemplateProcessor.js:6)
at d.a.initViewSettings (XMLView.js:6)
http://localhost:55307/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)
Thanks
Madhulatha