Purpose of This Post
In this post we introduce you to two very cool features of scriptr.io:
- Native support for Google charts,
- Support for sub-domains.
Using the first feature you can generate any type of chart based on data structures returned by your scripts and serve them either as HTML pages, embedded constructs or links. This provides you with the capability to build very sophisticated dashboards in a snap. The sub-domain feature is the capability to expose your scriptr.io APIs and charts using a domain name prefix of your choice, e.g. https:// mydashboard.scriptrapps.io. This allows you to have your organization or company name in your API path.
In this scenario, the goal is to display variations of 5 days forecast temperature and humidity in a line chart. The chart will be made available to end users through a link. The link’s location will leverage scriptr.io’s sub-domain capability.
The scenario steps are as follows:
1. We create a script that invokes a weather forecast API and returns the temperature and humidity average values in a chart-readable format.
2. We create a Google chart script that displays the outcome of the latter script in a line chart.
3. Lastly, we create a sub-domain and use it in the URL of our chart script.
- A scriptr.io account
- An API Key from the weather API
Note: you can always see the tutorial’s results using the demo links available throughout this post, even if you do not have any of the above.
Step 1: Obtaining Weather Forecast Data
In this first step, we implement a script that returns weather forecast data in a format that is suitable to a line chart. Since the
weather API we are using does not return data in such a format, we will use our script to do some filtering and schema transformation. Indeed, the weather forecast API actually returns estimations for the five coming days, into 3 hour brackets. Since we are only interested in the daily average temperature and humidity, we need to calculate it and get rid of the remaining data. Once this is done, we transform the resulting data structure into one that is readable by a line chart.
The details of the implementation of this script are out of the scope of this post, however you can check the code here. You can also see the outcome of the script by clicking this demo link (temperature is in Celsius).
For the sake of this exercise, you can check-out the aforementioned script into your scriptr.io account (or copy/paste its content into a new script).
Step 2: Creating the Google Chart Script
The concept behind Google chart scripts is pretty simple: it displays data in the chart type that you select. Data is retrieved from one of your existing scripts and will be structured according to the targeted chart’s requirements.
To create a Google chart script, click on the arrow next to the “New Script” action, and select the “Google Chart” option.
In the editor section, you are presented with a list of recommended charts. Clicking on “More” or on the “Charts” tab allows you to see the whole list of available graphs.
In the list, click on the “Line” option (top of the list) then select the first graph.
You now have to connect the selected chart to the data it displays. As mentioned earlier, this implies selecting the script that returns that data, i.e. our weather forecast script.
The script you selected is automatically executed and retrieves the data used to populate the chart (if not, just save your current script).
Note: If you are wondering about the data structure that is expected by each type of chart, check the “Samples” tab at the right of the editor. It contains multiple examples illustrating the data structures that fit each type of graph.
As you might have noticed, some default values are displayed on our line chart, such as “Chart title”. To customize the title (as well as many other components of your graph), just click on the “Customize” tab. In the customization form, modify the content of the title field. Your changes are automatically reflected on the chart.
You are now done and can try your mini-dashboard. Make sure to save your work then click on the “Embed URL” at the right of the editor. Copy/paste the provided URL (or right-click/open it) in a new tab of your browser to view your dashboard. Notice that scriptr.io also provides the complete HTML code of your graph, as well as an iFrame to embed it into other HTML pages.
You can also try our demo link.
Step 3: Creating Your Sub-domain
Creating your sub-domain is simple: click on your username on the top left corner of the screen, then on “account” to open your account settings. There, click on “sub-domain”, enter your desired sub-domain name in the corresponding field and save your changes. You now can invoke any of your scripts using the resulting custom URL (https://your-sub-domain.scriptrapps.io).
You can verify that the link to your dashboard (Google chart script) is now using your sub-domain.
Note: notice that when using sub-domains, your callers won’t have to pass your anonymous token anymore to invoke anonymous scripts!