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
If project is already created, ignore this step
- Install and then initialize the Google Cloud SDK:
https://cloud.google.com/sdk/docs/ o
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 handlers: - 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
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.
<html>
<head>
<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/ej.data.min.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>
</head>
<body>
<div ng-app="syncApp" ng-controller="angularChart">
<div id="chartContainer" style="width: 100%" ej-chart>
</div>
</div>
<script>
angular.module('syncApp', ['ejangular'])
.controller('angularChart', function ($scope) {
});
</script>
</body>
</html>
- 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 https://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:
https://www.syncfusion.com/downloads/support/directtrac/167462/ze/default1916269040
