Skip to Content

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

 

blog.JPG  sap.viz.JPG

 

 

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 🙂 🙂 🙂 🙂 🙂

blog.JPG

 

 

 

 

 

 

 

 

Cheers

Pandu

 

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Madhu Latha

    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

    (0) 

Leave a Reply