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