We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Documentation for hosting chart created with AngularJS in Google App Engine

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:

https://console.cloud.google.com/project 

 

                 Note: If project is already created, ignore this step 

 

  • Install and then initialize the Google Cloud SDK: 

           https://cloud.google.com/sdk/docs/ o

 

                Note: 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 

 

 

                Note: 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.  

 

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

of the project” section in following link https://cloud.google.com/appengine/docs/python/getting-started/hosting-a-static-website 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.

 

 

  • 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 http://csg.syncfusion.com 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: https://ejchart-149705.appspot.com/ 

 

The output of above link is depicted in following screenshot

Figure 1: Chart with trackball feature

 

 

 

Sample Link:

http://www.syncfusion.com/downloads/support/directtrac/167462/ze/default1916269040 

 

 

Article ID: Published Date: Last Revised Date: Platform: Control:
7165 12/02/2016 12/02/2016 JavaScript ejChart
Did you find this information helpful?
Add Comment
You must log in to leave a comment

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.