Highcharts cloud API and the MEAN stack

Highcharts Cloud API, Node, mongo DB and AngularJS
Highcharts Cloud is now Everviz. If you have used Highcharts Cloud before, click here to read about what this means to you.
Otherwise, click here to try out Everviz!

Previously, I created a web application and RESTful API server to generate interactive charts using the Highcharts Cloud API. The code was built using NodeJS, Express, MongoDB, and jQuery. In this article, I will recreate the application using AngularJS instead of JQuery. By doing so, the application becomes a MEAN stack application (i.e. MongoDB, ExpressJS, AngularJS, and Node.js). For more information about the MEAN stack click here.

jQuery is a great tool for DOM manipulation, but I prefer using AngularJS, as it is more optimized for modern app development, and it keeps the project organized and modular. Learn more about Angular here.

Since this project is an iteration of the previous project, I will focus on what’s different about this approach rather than revisit commonalities in too much detail.

Let’s get started!

The user interface is set up using AngularJS (instead of jQuery). The user interface code is very compact and easy to maintain compared to the one built by jQuery. Compact, since it has only 28 lines compare to 99 lines previously. And easy to maintain, because there is only one simple function compare to five.

Let’s dive into the new interface code:

The code is mainly one function that takes the user requests and passes them to the local server.

The code starts with the definition of the module App:

var App = angular.module('App', []);

The function getRequest() (below) is launched when any button on the interface is clicked; the function gets the URL, from the interface, and sends the request to the local server (refer to the architecture above):

App.controller('Controller', function($scope, $http) {
  $scope.arrURL = {
    readDataFromDB: "http://localhost:3000/readDataFromDB",
    sendToHCCloud: "http://localhost:3000/sendToHCCloud",
    duplicateChart: "http://localhost:3000/duplicateChart",
    deleteChart: "http://localhost:3000/deleteChart"
  var urlIndex, label;

  $scope.getRequest = function(urlIndex, label) {
    $scope.url = $scope.arrURL[urlIndex];

    $http.get($scope.url).then(function successCallback(response) {
      //Read the status from myServer
      $scope.response = response;
      //Display the status
      $scope[label] = $scope.response.data.status;
    }, function errorCallback(response) {
      //Read the status from myServer
      $scope.response = response;
      //Display the status
      $scope[label] = $scope.response.data.status;

Notice that I made some modifications to the HTML file to make the binding with the js file.

<html ng-app="App">
    <title> HCCloud API and the MEAN stack</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="app.js"></script>

  <body ng-controller="Controller">
      <label class="bigLabel" id="readDataFromDBLabelTitle">Read data from database</label>
      <button id="readDataFromDB" ng-click="getRequest('readDataFromDB','readDataFromDBLabel')">Read data</button>
      <label class="smallLabel" id="readDataFromDBLabel">Status: {{ readDataFromDBLabel }}</label>
      <label class="bigLabel" id="sendToHCCloudLabelTitle">Send data to Highcharts cloud</label>
      <button id="sendToHCCloud" ng-click="getRequest('sendToHCCloud','sendToHCCloudLabel')">Send/create chart</button>
      <label class="smallLabel" id="sendToHCCloudLabel">Status: {{ sendToHCCloudLabel }}</label>
      <label class="bigLabel" id="duplicateChartLabelTitle">duplicate chart</label>
      <button id="duplicateChart" ng-click="getRequest('duplicateChart','duplicateChartLabel')">Duplicate chart</button>
      <label class="smallLabel" id="duplicateChartLabel">Status: {{ duplicateChartLabel }}</label>
      <label class="bigLabel" id="deleteChartLabelTitle">Delete chart</label>
      <button id="deleteChart" ng-click="getRequest('deleteChart','deleteChartLabel')">Delete chart</button>
      <label class="smallLabel" id="deleteChartLabel">Status: {{ deleteChartLabel }}</label>


That is it! The application is ready to be launched 🙂

1. Download the code

To get the demo app, go to this link on GitHub, and copy or clone the project.
Then, go to where you saved the project, open the folder, and create a config.json file and add your credentials.

2. Install the packages

Open a terminal, navigate to the folder you downloaded the code to, and type npm install and press Enter. This will install the module dependencies.

3. Launch the application

Launch the server by typing: node myServer.js

Open your Highcharts Cloud account, then go to the Charts section to see the result of the application operations.

Open a new window or tab in your web-browser and go to Click one button at a time, and wait for the status label to update before clicking on the next button in this sequence:

  1. Read data.
  2. Check the command line result and the label status.
  3. Send/create chart.
  4. Check the command line result, the label status, and the Highcharts Cloud Charts’ section.
  5. Duplicate chart.
  6. Check the command line result, the label status, and the Highcharts Cloud Charts’ section.
  7. Delete chart.
  8. Check the command line result, the label status, and the Highcharts Cloud Charts’ section.
  9. If everything went OK, you should have the following results:

I really enjoyed working on this project. Let me know your experience with Highcharts Cloud API, and feel free to share your thoughts and questions in the comment section below.