Oracle JET pie/bar Component using data file

Hi Guys,
Today i'll share one experience which i have done in my one of real time project.
I implemented pie and bar chart static data sing json file.
to implement the graph using file we need to change the code in default JET project.
below are the steps by which we can get the graph using file system.
S1- create and run a JET project using below cmd in CLI.

S2- Now create a json file in js folder. right click on js-->New --> JSON File .

S3- enter some data for reference copy and paste below data.

data.json file -

[{

        "name": "Pedestrians",

        "items": [42]

    },

    {

        "name": "Vehicles",

        "items": [55]

    },

    {

        "name": "Bicycles",

        "items": [36]

    },

    {

        "name": "Buses",

        "items": [22]

    },

    {

        "name": "Trains",

        "items": [22]

    },

    {

        "name": "Bullcart",

        "items": [11]

    },

    {

        "name": "Horsecart",

        "items": [15]

    }]

S4- open the incidents.js file and add json file reference and parse the json file.

       define(['ojs/ojcore', 'knockout', 'jquery', 'text!data/data.json', 'ojs/ojchart'],

       function(oj, ko, $, file) {

      var data=JSON.parse(file);

      self.datasource = ko.observableArray(data);

S5- Now change the incidents.html file.

<!--

 Copyright (c) 2014, 2018, Oracle and/or its affiliates.

 The Universal Permissive License (UPL), Version 1.0

 -->

<div class="oj-hybrid-padding">

  <h1>Incidents Content Area</h1>

  

  <oj-chart type="bar"

series="[[datasource]]">

  </oj-chart>

  

  <oj-chart type="pie"

series="[[datasource]]">

  </oj-chart>

  <div>

      To change the content of this section, you will make edits to the incidents.html file located in the /js/views folder.

  </div>

</div>

S6- Now run the project and see the output in the browser-

That is how to load data from json file into JET Application.

Cheers Guys :)