This project is read-only.

Industrial Chart


This widget display industrial process related charts. Typically process charts require several panes, several scales and the ability to signal events, sections and digital variables.

Each pane contains one or more analog variables and one or more analog scales. The scales can be calculated automatically or can be specified from the database.
The digital variables (ie. those than can only be 0 or 1) are displayed in a special pane. The digital variables can also have an associated legend.

The events are displayed in the analog panes and can be of several types, they also have associated legends. Sections are scopes of the x axis that are marked with a special semi-transparent, ideal to indicate process phases.

As all Industrial Dashboard widgets this one is configured almost completely from a database stored procedure.
The widget has to be included in a html page that may contain other widgets including other Industrial Charts.


The HTML page that holds the widgets is a regular static web page.

Head Section

In order to instruct the browser to download the proper javascript files and CCS files we must include the following references in the header:

Style Sheets (CSS) Files

<link href="/IndustrialDashboard/Widgets/IndustrialSidebarMenu/Styles/IndustrialSidebarMenuDefault.css" rel="stylesheet" type="text/css" />
    <link href="../Styles/Standard.css" rel="stylesheet" type="text/css" />
    <link href="/IndustrialDashboard/Widgets/IndustrialChart/Styles/IndustrialChart.css" rel="stylesheet" type="text/css" />

Widget code

    <script src="/IndustrialDashboard/Widgets/FX/Scripts/FX.js" type="text/javascript"></script>
    <script src="/IndustrialDashboard/Scripts/IndustrialDashboard.js" type="text/javascript"></script>
    <script src="/IndustrialDashboard/Widgets/IndustrialChart/Scripts/IndustrialChart.js" type="text/javascript"></script>
    <script src="/IndustrialDashboard/Widgets/IndustrialChart/Scripts/dateformat.js" type="text/javascript"></script>
    <script src="/IndustrialDashboard/Widgets/IndustrialChart/Scripts/canvastext.js" type="text/javascript"></script>

Required by Internet Explorer to support the HTML5 Canvas tag

    <!--[if IE]>      
    <script type="text/javascript" src="/IndustrialDashboard/Widgets/IndustrialChart/Scripts/excanvas.js"></script>


All widgets need a HTML container as a parent to hold all its contents; we usually use <DIV> elements. The <DIV> tags created to hold widgets must have at least an ID property to be able to be referenced in javascript code. The position and size of this <DIV> will be used by the widget code to locate and scale its internal visual objects.
Any way if the size is not set it the widget will use and set a default size. The size only can set it in the tag of the container or by javascript, the widget doesn't support set the size of its container by CSS Stylesheets.

        <div id="pIC" style="position:relative;height:700px;width:98%;margin-top:45px;left:0px;margin-left:1%;"></div>


Javascript code is execute as soon as is loaded into the browser’s memory, but running javascript code without being sure that the rest of the page is already loaded can lead to run time errors, so the typical start up code is placed inside the OnReady event of the page.

icOptions = { 'URL': '/IndustrialDashboard/DALService.svc/CallProcedure'
                    , 'DatabaseParameters': {
                         'Procedure': 'dbo.GetChartData'
                    , 'allowResize': true
         //Create an Instance of IndustrialChart
         ic = new IndustrialChart(document.getElementById('pIC'), icOptions);

Initialization options

The following table depicts the initialization options of Industrial Chart. If an option is not specified, the default value will be applied.

External Options:
  • URL : [string] The path of the wcf service or other file that receive the request parameters and return the JSON data. Default: '/IndustrialDashboard/DALService.svc/CallProcedure'
  • DatabaseParameters : [object] Necessary only when the service operation selected is CallProcedure. Its properties are the parameters to configure the connection with the DB. Include the follow suboptions:
    • Procedure : [string] The name of the stored procedure to execute. Default = ''
    • DBEngine : [string] (optional) The database engine to use. Default = 'SQLServer'
    • ConnnectionStringName : [string] (optional) The name of the connection string set it in the web config. Default = 'IndustrialDashboard'
    • TablesCount : [int] (optional, only to use Oracle) The count of tables that the stored procedure will be return. Default = 0
  • JSONFile : [string]
  • ConnectionParameters : [object] (optional) The request connection parameters. Include the follow suboptions:
    • Method : [string] The request method (post,get,etc). Default = 'POST'
    • Async : [bool] Set the request asynchronic or synchronic. Default = 'POST'

Internal Options: all optional
  • AllowResize : [bool] Allow the widget to resize itself when the browser screen's size change. Default = false
  • Title : [string] The title of the chart. Default = 'Industrial Chart 2.0'
  • Events : [object] The widget custom events. Include the follow suboption:
    • onError : [function] Fired when the widget throw an exception. Pass to the user function the exception threw. Default = function(error){}
    • onComplete : [function] Fired when the widget complete to redraw itself (before canvas render) . Default = function(){}

Public methods

Getters and Setters

  • SetDatabaseEngine : [string newDatabaseEngine('SQLServer' | 'Oracle')] Set the database engine.
  • GetDatabaseEngine : [string] Get the database engine.
  • SetConnectionStringName : [string newConnectionStringName] Set the connection string name.
  • GetConnectionStringName : [string] Get the connection string name.
  • SetTablesCount : [int newTablesCount] Set the tables count needed to use Oracle.
  • GetTablesCount : [int] Get the tables count needed to use Oracle.
  • SetProcedure : [string newProcedure] Set the stored procedure.
  • GetProcedure : [string] Get the stored procedure.

Refresh Function

Some charts require parameters, and they usually come from other widgets (also called filters ) such as calendar picker o drop down pickers.
Whenever the filters widgets are changed a refresh function that updates all widgets is called. This same function is also called as soon as the initialization finishes.
This refreshData method receive a QueryParameters object, another class included in the IndustrialDashboard.js. The QueryParameters object can be initialized manually or it can be returned by a Picker Widget.

var QueryParams = new QueryParameters();
QueryParams.add('MyParameterName', 'MyParameterType', 'MyParametersValue');

Stored Procedure

The following picture indicates the tables that the stored procedure has to output in order to configure an IndustrialChart.


Last edited Jun 24, 2010 at 4:21 PM by nlareu, version 23


No comments yet.