Articles in this section
Category / Section

Documentation for hosting chart created with AngularJS in Google App Engine

2 mins read

Essential chart can be hosted in Goggle app engine. To host chart in google app engine, follow the below steps.

  • Create a new Cloud Platform Console project or retrieve the project ID of an existing project to use: 




If project is already created, ignore this step 



  • Install and then initialize the Google Cloud SDK: 





If Google Cloud SDK is already installed, ignore this step 




  • Create a folder in the name of the project. 


  • Create app.yaml file with the following contents 


runtime: python27
api_version: 1 
threadsafe: true 
- url: / 
   static_files: www/index.html 
   upload: www/index.html 
- url: /(.*) 
   static_files: www/\1 
                 upload: www/(.*) 



app.yaml file contains the configuration for the application. We have used python 2.7 runtime to run our application.Index.html is the static html file with chart created using AngularJS.



  • Create a folder named “www” inside the project folder.  



This folder is not necessary. We have added it based on the “Basic structure                  

of the project” section in following link to separate the HTML, CSS, JavaScript and image files required for the application. 


  • Create index.html (html file mentioned in app.yaml) inside “www“ folder with chart widget using AngularJS. The required scripts are mentioned below.


    <title>Essential Chart - Trackball</title> 
    <script src="js/jquery-3.0.0.min.js"></script> 
    <script src="js/angular.min.js"></script> 
    <script src="js/ej.core.min.js"></script> 
    <script src="js/"></script> 
    <script src="js/ej.globalize.min.js"></script> 
    <script src="js/ej.chart.min.js"></script> 
    <script src="js/ej.unobtrusive.min.js"></script> 
    <script src="js/ej.widget.angular.min.js"></script> 
    <script src="js/ChartData.js"></script> 
<div ng-app="syncApp" ng-controller="angularChart"> 
        <div id="chartContainer" style="width: 100%" ej-chart>
        angular.module('syncApp', ['ejangular']) 
                  .controller('angularChart', function ($scope) { 


  • Create a folder named js inside the www folder. We are placing the scripts required by chart widget inside this folder. 
  • Place the scripts required for rendering chart widget inside the js folder. We can use the online script generator to generate the script required for chart widget. 


  • Deploy the project using the command gcloud app deploy –project <project id>

Eg: gcloud app deploy --project default 


  • We can view our application in browser using the command gcloud app browse --project <project id> 

Eg: gcloud app browse --project default 


Hosted Link

We have prepared a simple chart with trackball feature enabled using AngularJS and hosted it in the following link: 


The output of above link is depicted in following screenshot

Chart with trackball feature enabled using AngularJS

Figure 1: Chart with trackball feature


Sample Link: 

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment