End-User documentation

On this site you will find some examples and explanations on how to use the Empa.ModelDataBrowser to display data on your website.

Getting started

There are 2 different interfaces on this web-application that can be used to gather and display data:

ASPX (ASP.NET) pages, that can be embeded in your website to display the data in html
A webservice (only for plot data)

Including ASPX pages on your website

Loading the necessary javascript files

You have the possibility to include ASPX pages (Microsoft equivalent of PHP) in your website via an iFrame.
However you shouldn't use the <iFrame> tag for this, because it has some limitations and it isn't able to auto-resize its size according to the content of the iFrame.

The Empa.ModelDataBrowser contains some javascript libraries that you can include in the <head> section of your page in order to use and display a page from this web-application.
Those javascript library depend on jQuery. So you have to load jQuery before you include the libraries from this web-application.
There is also a jQuery version that lays on this web-application, so you are able to include all javascript files needed from this web-application.

If you have already included a jQuery version, that is higher than v1.10, then you have to include the migration plugin.
This is because the jQuery API has changed from v1.9 to v1.10. The migration plugin will add those API functions to the jQuery version v1.10 so that older plugins still work.
The migration plugin is also located on this web-application so you can include it straight from here.

So, if you have jQuery already included, then you only need to add those two lines to the end of your <head> tag:

Code

        <head>
            ...
           <script type="text/javascript" src="http://carbocount.empa.ch/Resources/Scripts/jquery.ba-postmessage.min.js"></script>
           <script type="text/javascript" src="http://carbocount.empa.ch/Resources/Scripts/Empa.ModelDataBrowser.iFrame.js"></script>
        </head>

When you also need the migration plugin, add those lines to the end of your <head> tag:

Code

         <head>
             ...
            <script type="text/javascript" src="http://carbocount.empa.ch/Resources/Scripts/jquery-migrate-1.2.1.min.js"></script>
            <script type="text/javascript" src="http://carbocount.empa.ch/Resources/Scripts/jquery.ba-postmessage.min.js"></script>
            <script type="text/javascript" src="http://carbocount.empa.ch/Resources/Scripts/Empa.ModelDataBrowser.iFrame.js"></script>
        </head>

If you haven't referenced jQuery in your page yet, then you need to load all javascript libraries from this web-application by adding those lines to the end of your <head> tag:

Code

        <head>
            ...
           <script type="text/javascript" src="http://carbocount.empa.ch/Resources/Scripts/jquery-1.10.2.js"></script>
           <script type="text/javascript" src="http://carbocount.empa.ch/Resources/Scripts/jquery-migrate-1.2.1.min.js"></script>
           <script type="text/javascript" src="http://carbocount.empa.ch/Resources/Scripts/jquery.ba-postmessage.min.js"></script>
           <script type="text/javascript" src="http://carbocount.empa.ch/Resources/Scripts/Empa.ModelDataBrowser.iFrame.js"></script>
        </head>

Displaying an ASPX page

Alright, now that you have all necessary files included, you have to define which page you want display.

To display a page you have to add following javascript after the file-includes to your <head> section:

Code

    <head>
         ...
        <script type="text/javascript" language="javascript">
            CreateEmpaFrame("#iframe", "http://carbocount.empa.ch/<page>?<parameters>");
        </script>
    </head>

Where "#iframe" is the ID of your <div> tag where the content should be loaded in to

Available pages

There are several different pages that you can include to display exactly that data that you need.

Page	Parameters	Example call	Description
Main.aspx	dataset: The dataset-name from which to display the data [deactivateModels]: Optional parameter. When set to "true" it will disable the feature that opens the corresponding model when clicking on a point in the plot.	http://carbocount.empa.ch/Main.aspx?dataset=carbocount	Main entry point. Contains all features. Displays dropdowns to select stations and sensors from the given dataset. Displays a plot to the choosen sensors and opens modeldata when clicking on a point inside the plot.
DisplayPlot.aspx	dataset: The dataset from which to display the data station1: The name of the station corresponding to the first sensor station2: The name of the station corresponding to the second sensor station3: ... start: The datetime for the start time of the plot (format: yyyy-MM-ddTHH:mm:ss.sssZ) end: The datetime for the end time of the plot (format: yyyy-MM-ddTHH:mm:ss.sssZ) sensor1: The name of the 1st sensor to display on the plot sensor2: The name of the 2nd sensor to display on the plot sensor3: ... [deactivateModels]: Optional parameter. When set to "true" it will disable the feature that opens the corresponding model when clicking on a point in the plot. [displayMode]: Optional parameter. Defines in what mode the plots shall be rendered (possible modes: default, stackPlots, correlationPlot)	http://carbocount.empa.ch/DisplayPlot.aspx?dataset=carbocount&station1=Laegern&start=2011-01-01T00:00:00&end=2014-01-01T00:00:00.000Z&sensor1=CO2&deactivateModels=true	Displays a plot containing all the given sensors. You can define as many sensors as you want, however you need to specifiy at minimum 1 sensor.
GetModelDataImage.aspx	modeldata: The name of the modeldata-definition from which to display the 2d image datetime: The datetime from which to display the data (format: yyyy-MM-ddTHH:mm:ss.sssZ) [sliceValue]: Optional parameter defining the value of the slice variable	http://carbocount.empa.ch/GetModelDataImage.aspx?modeldata=LaegernNest&datetime=2012-10-01T00:00:00.000Z	Displays the visualized image of 2D data for the given model and datetime
ViewGeographicModelData.aspx	datetime: The datetime for which to get and display the model (format: yyyy-MM-ddTHH:mm:ss.sssZ) dataset: The name of the dataset, that the station belongs to station: The name of the station from which to get the models	http://carbocount.empa.ch/ViewGeographicModelData.aspx?datetime=2012-10-01T00:00:00.000Z&dataset=carbocount&station=Laegern	Displays the visualized 2d image as an overlay on Google Maps. Also has a slider for the different slice values.

Examples

Here you can find examples on how to include the pages from this web-application on your page.
All the examples include the jQuery files. You have to remove them if you already got jQuery referenced in your page.

Displaying Main.aspx

This example displays the Main.aspx on a html page. You can view a live demo here: examples/Main.htm

Code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>

            <!--Include Scripts-->
            <script type="text/javascript" src="http://carbocount.empa.ch/Resources/Scripts/jquery-1.10.2.js"></script>
            <script type="text/javascript" src="http://carbocount.empa.ch/Resources/Scripts/jquery-migrate-1.2.1.min.js"></script>
            <script type="text/javascript" src="http://carbocount.empa.ch/Resources/Scripts/jquery.ba-postmessage.min.js"></script>
            <script type="text/javascript" src="http://carbocount.empa.ch/Resources/Scripts/Empa.ModelDataBrowser.iFrame.js"></script>

            <!--Create Empa Frame-->
            <script type="text/javascript" language="javascript">
                CreateEmpaFrame("#iframe", "http://carbocount.empa.ch/Main.aspx?dataset=carbocount");
            </script>
        </head>
        <body>
            <div id="page">
                <h1>Displaying Main.aspx</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p>
                <p>Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. </p>
                <p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. </p>
                <div id="iframe">
        
                </div>
            </div>
        </body>
    </html>

Displaying DisplayPlot.aspx

This example shows the DisplayPlot.aspx on a html page. You can view a live demo here: examples/DisplayPlot.htm

Code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>

        <!--Include Scripts-->
        <script type="text/javascript" src="http://carbocount.empa.ch/Resources/Scripts/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="http://carbocount.empa.ch/Resources/Scripts/jquery-migrate-1.2.1.min.js"></script>
        <script type="text/javascript" src="http://carbocount.empa.ch/Resources/Scripts/jquery.ba-postmessage.min.js"></script>
        <script type="text/javascript" src="http://carbocount.empa.ch/Resources/Scripts/Empa.ModelDataBrowser.iFrame.js"></script>

        <!--Create Empa Frame-->
        <script type="text/javascript" language="javascript">
            CreateEmpaFrame("#iframe", "http://carbocount.empa.ch/DisplayPlot.aspx?dataset=carbocount&station1=Laegern&start=2011-01-01T00:00:00&end=2014-01-01T00:00:00.000Z&sensor1=CO2&deactivateModels=true");
        </script>
    </head>
    <body>
        <div id="page">
            <h1>Displaying Main.aspx</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p>
            <p>Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. </p>
            <p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. </p>
            <div id="iframe">
        
            </div>
        </div>
    </body>
    </html>

WebService

What is a webservice?

A webservice is a tool that is used for machine to machine communication. They mostly communicate over the http or net-tcp protocol via xml data.
So if you need to do some caluclating or different visualisation on the data, then you can use the webservice interface to work with the data

This particular webserivce communicates over the http protocol and uses xml as interface language (it's a WCF webservice)
You can view the xml interface in your browser. Just navigate to ModelDataBrowserSerivce.svc?wsdl. The ?wsdl tells the service you want to view the interface definition.
Every language that supports webservices should be able to communicate with this webservice.
The full URL of the webservice is as following: http://carbocount.empa.ch/ModelDataBrowserSerivce.svc

Functions

The webservice holds some functions, which are mainly used for AJAX requests.

Function name	Parameters	Returns	Description
GetPlotData	dataset (string): Name of the dataset station (string): Name of the station sensor (string): The name of the sensor start (DateTime): The start date from which to select data end (DateTime): The end date to which to select data	A dictionary where the key is the date of the point and the value is the points value	Gets data used to display a plot in form of an array containing a datetime and a value for each element.
GetMultpilePlotData	dataset (string): Name of the dataset stations (string[]): Name of the station, array index gets mapped to the sensors index sensors (string[]): The name of all the sensors start (DateTime): The start date from which to select data end (DateTime): The end date to which to select data	An array of VOSensorData objects containing on element per sensor. This object holds following properties: DateTimePoints: An array of of all datetime values (indexes are corresponding to Values) Values: An array of all values (indexes are corresponding to DateTimePoints) SensorName: The name of the sensor, that this data belongs to	Gets the plot data for multiple sensors in one call.
GetModelDataVar	dataset (string): Name of the dataset station (string): Name of the station dateTime (DateTime): The datetime value for the model variable	Returns a javascript-executable string	Gets the modelData variable as javascript-executable string. This function is used for the next / last button in the geographic-modeldata-viewer

All the "GetPlotData" functions return a diffrent resolution of the data depending on the timespan. This way the data transferred can be held at a minimum

Examples

How to call GetMultpilePlotData via Javascript using jQuery, json2.js (http://carbocount.empa.ch/Resources/Scripts/json2.min.js) and json2.addins.js (http://carbocount.empa.ch/Resources/Scripts/json2.addins.js):

Code

        var startDateTime = new Date(2012, 10, 01);
        var endDateTime = new Date(2013, 10, 01);

        var ajaxCall = $.ajax({
            url: "http://carbocount.empa.ch/ModelDataBrowserSerivce.svc/GetMultpilePlotData",
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            data: "{ \"dataset\": " + JSON.stringify("carbocount") +
                       ", \"stations\": " + JSON.stringify(["Laegern", "Fruebuel"]) +
                       ", \"sensors\": " + JSON.stringify(["CO2", "CH4"]) +
                       ", \"start\": " + JSON.stringifyWcf(startDateTime) +
                       ", \"end\": " + JSON.stringifyWcf(endDateTime) + " }",
            success: function (result) {
                // Event when AJAX call finished and data returned
                // The data is stored inside the property result.d
                alert("data loaded from server");
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // Event when AJAX call fails
                alert(textStatus);
            }
        });