×

Please give details of the problem

Docs

Find

    Developer Guide

        1. Todo Validation
      1. Release Your User Login
      1. Process Reporting API
        1. CSS Examples
        2. CSS Personalization
      1. Performance
        1. List Reinitialization
        2. Holidays
        3. Number Currency Format
        4. Label Modification
        5. Array From WS
        6. Launch Process JQuery
        7. Column Inactivation
        8. Date
        9. Print JSONObject
        10. ArrayJSON to JSONArray
        11. Invalid Fields
        12. Round
        13. Initialization Widget Date
        14. JQuery
        15. Inject JSONObject
        16. Google Tables
        1. Summing Array
        2. API Listener
        3. User Lane Picker
        4. Retrieving Variables Values
          1. Chart Dashboard
          2. Report Chart
          3. Google Visualization
          4. Chart Dashboard Collection
        5. Tags
        6. Collection
        7. File Preview
        8. Dynamic List
        9. Dialog Window
        10. JavaScript Report
        11. Autocomplete Widget
          1. homepage.js
          2. homepage.css
        1. Logout
        2. Custom Login Page
        3. Header
        4. Mobile Devices
        5. Basket
        6. Redirection ExecutionMode
        7. Menu Bar
        8. Information Tags
      1. Composite API Example
      1. Markdown Template
        1. Task Reminder Email
        2. SubProcess
        3. PDF
        4. JavaScript Inclusion
        5. Variable Mapping
        6. Backloop
      2. Trigger
        1. File Visibility
        2. Number Currency Format
        3. Error Handling
        4. JSONObject Concatenation
        5. Loop
        6. Dynamic Variable
        7. List 1000+ Objects
        8. Metadata
        9. Freemarker Container Test
        10. JSONObject Keys Values
        11. List Hash Sequence
        12. Special Freemarker Characters
        13. Salesforce Computation
        14. Array To List
        15. JSONArray Conversion
        16. Lock
        17. JSONObject Creation
        18. Number Test
      1. Customer Management
        1. Messages
        2. Scheduled Process
        1. Custom Lists
          1. Web Interface Stylesheet Tab
          2. Web Interface Analytics Tab
          3. Web Interface Implementation Tab
          4. Web Interface Collection Tab
          5. Web Interface API Tab
          6. Web Interface Design Tab
          7. Web Interface JS Tab
            1. Report Widget
            2. List Widget
            3. JavaScript Widget
            4. History Widget
            5. RadioButton Widget
            6. FileUpload Widget
            7. StaticText Widget
            8. HTML Editor Widget
            9. ProgressBar Widget
            10. Section Widget
            11. Spinner Widget
            12. Image Widget
            13. Multi Checkbox Widget
            14. Tab Widget
            15. Tree Widget
            16. HTML Widget
            17. Checkbox Widget
            18. Button Widget
            19. Custom Widget
            20. URLInput Widget
            21. TextInput Widget
            22. Array Widget
            23. Captcha Widget
            24. Geolocation Widget
          1. Version
          2. Project Version Tab
          3. Project Definition Tab
          4. Project Description Tab
          5. Project Rights Tab
          6. Project Versioned Files Tab
          7. Project Collection Tab
          8. Project Files Tab
        2. Collections
          1. Providers
          2. Processes
          3. Connectors
        3. Revision
          1. Composite API Configuration Tab
          2. Composite API Design Tab
          1. Process Input Tab
          2. Process General Tab
          3. Process Measures Tab
          4. Process Variables Tab
            1. Gate
            2. Process Step Output Variables
              1. Process Task Functional Tab
              2. Process Task Connector Tab
              3. Process Task Script Tab
              4. Process Task Loop Tab
              5. Process Task SubProcess Tab
              6. Process Task Manual Tab
              7. Process Task Email Tab
            3. Process Step Input Variables
            4. Process Step Testing Variables
              1. Process Intermediary Event
              2. Process Start Event
              3. Process Timer Event
          5. Process Design
          1. Organization
          2. Roles entities
        1. My Applications
        2. Files
        3. Home
        1. Process Examples
        2. Connectors
        1. Web Interface Reports
          1. Execution Path
          2. Measuring
          3. Parameters
          4. Runtime Users
        1. Configuration
        2. Users
        3. Usage
      1. Mobile
      2. Offline
      1. Collections BackOffice
      2. Collections To List
      3. Collections To Array
      4. Collection JS Freemarker
      1. Access Rights
      2. Delegation
      3. Compound Organization Hierarchy
      4. Dynamic Lanes
      5. Scripted Lanes
      6. Runtime Lanes

    Charts Dashboard

    To configure a RunMyProcess dashboard with pie and column charts, we'll use Google Visualisation for chart rendering, and as source of data RunMyProcess reports feeds.

    Configure reports

    You already have several process instances on your account. Let's create a groupby report corresponding to the PieChart to be displayed.

    In this example, the main process is 'RFP flow' with a set of measures including 'Company'.

    To create a groupby process report to display Nb of RFP by Company:

    • Go to PROJECT > NEW > REPORT > PROCESS REPORT

    • Edit process report configuration:

    2013-01-11_161325

    • Then hit 'search result' to display data:

    2013-01-11_161411

    • Then click on rss feed 2013-01-11_161723 , this should display rss feed url + feed data in a new tab:

    2013-01-11_162214

    • Your feed url should look like:

    https://live.runmyprocess.com/live/621593453/analysis/process/COUNT? field=NUMBER&group=MEASURE_4&operator=EE%20EE%20NE%20IS%20EE&value=46610%20TEST%20%20NULL %2073086&filter=PROJECT%20MODE%20MEASURE_4%20PARENT%20PROCESS

    • As you can see, it contains all the filters you've configured. Do try to open in a new tab this url adding &media=json at the end:

    https://live.runmyprocess.com/live/621593453/analysis/process/COUNT? field=NUMBER&group=MEASURE_4&operator=EE%20EE%20NE%20IS%20EE&value=46610%20TEST%20%20NULL %2073086&filter=PROJECT%20MODE%20MEASURE_4%20PARENT%20PROCESS&media=json

    Let's give this url the name json_report_feed_url

    • This should display the same feed with json output (instead of xml output):

    2013-01-11_162551

    Note: if you are a Chrome user, you can use JSONView plugin to pretty print json feed

    Now you have your source of data, let's create the webinterface to display the dashboard containing the PieChart

    Configure Dashboard webinterface: embed a PieChart

    • Create a new Webinterface, title 'Dashboard'.

    • Go to Javascript tab:

    2013-01-11_164631

    (1) Insert as HEADER the google visualisation library

    1
    2
    https://www.google.com/jsapi?  
    autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22corechart%22%5D%7D%5D%7D
    

    (2) Insert as FOOTER the jQuery library to perform AJAX calls:

    1
    https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
    
    • Go to the Design tab

    2013-01-11_164539

    (1) Create a html widget with following code:

    Code

    1
    <div id="chart_div1"><div>
    

    This is the html area to display the PieChart.

    (2) Create a hidden split widget

    (3) Create a js widget with following code:

    Code

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    //Handle 0,1 or several records from report feed
    
    function get_array(my_father, my_son) {
    if (typeof(my_father) == "object") {
    if (my_father[my_son] != undefined) {
    if (my_father[my_son].length != undefined) {
    var my_array = my_father[my_son];
    } else {
    var my_array = [my_father[my_son]];
    }
    } else {
    var my_array = [];
    }
    } else {
    var my_array = [];
    }
    return my_array;
    }
    
    //Display a PieChart
    
    function drawPieChart(html_id, array_data, array_column, chart_title, chart_width, chart_height) {
     // Create our data table.
     var data = new google.visualization.DataTable();
     for (i = 0; i < array_column.length; i++) {
     data.addColumn(array_column[i].type, array_column[i].title);
     }
     var array_array_data = new Array();
     for (i = 0; i < array_data.length; i++) {
     array_array_data.push([array_data[i].label, array_data[i].value]);
     }
     data.addRows(array_array_data);
     // Instantiate and draw our chart, passing in some options.
     var chart = new google.visualization.PieChart(document.getElementById(html_id));
     chart.draw(data, {
     width : chart_width,
     height : chart_height,
     is3D : true,
     title : chart_title
     });
    }
    
    //Get report feed and then render the PieChart 1
    
    function draw_Pie1() {
     $.ajax({
     type : "GET",
     url : "json_report_feed_url",
     data : {},
     cache : false,
     async : true,
     dataType : "json",
     error : function () {
     alert('Error while loading credits.');
     },
     success : function (P_result) {
     var array_column = [{
     "type" : "string",
     "title" : "Company"
     }, {
     "type" : "number",
     "title" : "Nb RFP"
     }
     ];
     var my_entries = get_array(P_result.feed.entry.content.data, "result");
     var array_data = new Array();
     for (var i = 0; i < my_entries.length; i++) {
     array_data.push({
     "label" : my_entries[i].serie.value,
     "value" : parseFloat(my_entries[i].value)
     });
     }
     //alert(JSON.stringify(array_data));
     var html_id = "chart_div1";
     var chart_title = "Nb of RFP by Company";
     var chart_width = 0;
     var chart_height = 240;
     drawPieChart(html_id, array_data, array_column, chart_title, chart_width, chart_height);
     }
     });
    }
    
    //init charts
    
    draw_Pie1();
    

    In red, the code to replace:

    • charts labels/title

    • json_report_feed_url (cf previous chapter)

    • chart_div1 if you used a different name

    Save your webinterface and preview it.

    Note: Every chart will need its associated chart_divXX id to be diplayed.

    Note2: To create another PieChart, it's just about adding another draw_Pie2() function and include another chart_div2 html div.

    Other charts: embed a ColumnChart

    Column chart can be displayed using the same data feed. You just need a group by report as for the PieChart.

    To render a ColumnChart you can add the 2 following functions to previous script:

    Code

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    //Display a ColumnChart
    
    function drawColumnChart(html_id, array_data, array_column, chart_title, chart_width, chart_height) {
     // Create our data table.
     var data = new google.visualization.DataTable();
     for (i = 0; i < array_column.length; i++) {
     data.addColumn(array_column[i].type, array_column[i].title);
     }
     var array_array_data = new Array();
     for (i = 0; i < array_data.length; i++) {
     array_array_data.push([array_data[i].label, array_data[i].value]);
     }
     data.addRows(array_array_data);
     // Instantiate and draw our chart, passing in some options.
     var chart = new google.visualization.ColumnChart(document.getElementById(html_id));
     chart.draw(data, {
     width : chart_width,
     height : chart_height,
     is3D : true,
     title : chart_title
     });
    }
    
    //Get report feed and then render the ColumnChart 2
    
    function draw_ColumnChart2() {
     $.ajax({
     type : "GET",
     url : "json_report_feed_url2",
     data : {},
     cache : false,
     async : true,
     dataType : "json",
     error : function () {
     alert('Error while loading credits.');
     },
     success : function (P_result) {
     var array_column = [{
     "type" : "string",
     "title" : "Company"
     }, {
     "type" : "number",
     "title" : "RFP amount"
     }
     ];
     var my_entries = get_array(P_result.feed.entry.content.data, "result");
     var array_data = new Array();
     for (var i = 0; i < my_entries.length; i++) {
     array_data.push({
     "label" : my_entries[i].serie.value,
     "value" : parseFloat(my_entries[i].value)
     });
     }
     //alert(JSON.stringify(array_data));
     var html_id = "chart_div2";
     var chart_title = "RFP amount by Company";
     var chart_width = 0;
     var chart_height = 240;
     drawColumnChart(html_id, array_data, array_column, chart_title, chart_width, chart_height);
     }
     });
    }
    

    The same red code has to be replaced.

    To both render PieChart & ColumnChart:

    Code

    1
    2
    3
    //init
    draw_Pie1();
    draw_ColumnChart2();
    

    Enjoy!!