Prism Business Intelligence Tools - Tips and How-to's

This is where we post tips and how-to's in response to questions we get from Prism users.

February 2012 - Posts

  • Prism Web & Google Analytics Script

    In some cases you want some script to run every time a dashboard loads, some examples can be loading js package for using it in all dashboards via API or running Google Analytics script to get usage stats

    Questions like where in the globe your users are coming from and which dashboards they are using are very important for understanding what kind of analysis you really need and what is useless for others.


    In this sample you will learn how to run JS when any dashboard loads.

    First you will need to create a script file and put it in your Prism Web folder. For using this script you will need to extract your account ID from Google Analytics website.

       var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'YOUR-ACCOUNT-ID']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    Call this file ganalytics.js and put it in the resources folder of PrismWeb.

    Now we need to locate the configuration file to set our script to run every time a dashbaord loads, the file can be located at PrismWeb\App_Data\Configurations\dashboard_client_code.js

    Now lets edit this file and add the following line right after the <App Type="customdashboardjs"> tag:

            <FileSource Path="%prismweb%\Resources\ganalytics.js"/>

    Save your file and restart PrismWeb in your IIS.

    Posted Feb 11 2012, 04:57 PM by Adi with no comments
    Filed under: , , ,

  • Sparklines within a Pivot!

    Did you know you can easily modify any pivot using java script?

    Today I’ll show you how to add Sparklines into a pivot using JS API in Prism web.

    First you will need to create a Pivot in BI-Studio, one with a single dimension on the rows, a single measure on the background and some time or any other sequential dimension over the columns.



    Now publish it to Prism Web. File->Publish

    Next step is to edit the JS controlling the Pivot look and feel, so using the admin user open the dashboard with the Pivot you have just published and click on the Customize Script (<>) button.

    [The JS Editor allows you to customize the Pivot and even hide it and add a different visualization with the same data.]

    You will need to modify the function that is being called after results loaded,so not so surprisingly it is called this.afterResultLoaded = function (args) {} . next we need to import the js file that will help us creating the sparkline visualization, it is called jquery sparklines (more info http://omnipotent.net/jquery.sparkline/).

    First we will add the import script call:
    $.getScript('http://[SERVER ADDRESS]/jquery.sparkline.js', function(data, textStatus)
    {
       //some code here  
    }

    of-course we need to copy the file to our Prism Web folder before we can run it.

    The code below should be within the get script brackets (Explanations within the code).

    1. var i = 0, r, rows = $("tr", args.element), l = rows.length;
    2. //Add new column for each values row
    3. for (; i < l; i++) {
    4.    r = $(rows.get(i));
    5.    // Check if the row is not defined and make sure we start adding form row 3 only
    6.    if (!defined(r) || $(r).hasClass('rdMiddle') || i < 3) {
    7.       // Add the columns header a Chart text
    8.       if (i === 2) {
    9.          var clone = $($(r).find('td').eq(2)).clone(true);
    10.          //Replace the header
    11.          $(clone).find('div span').text('Chart ') // Add the cloned cell after the first column
    12.          $(r).find('td').eq(0).after(clone);
    13.          }
    14.       continue;
    15.       }
    16.    //Set the parameters to know how many cells are in each row
    17.    var vals = '',
    18.    c;
    19.    var cells = $("td",
    20.    r);
    21.    var cl = cells.length //Loop the cells and add the Sparkline charts
    22.    for (c = 1; c < cl; c++) {
    23.       var cellData = $(r).find('td').eq(c);
    24.       //Get the text and remove all comma's
    25.       var cellText = $(cellData).text().replace(',',
    26.       '');
    27.       //Create rows values string
    28.       if (defined(cellText)) {
    29.          if (c === cl - 1) vals += cellText;
    30.          else vals += cellText + ',';
    31.          }
    32.       }
    33.    //Copy the column 2 style
    34.    var cClone = $($(r).find('td').eq(2)).clone(false);
    35.    //Setting the values attribute for the Sparklines script use
    36.    $(cClone).attr('values', vals);
    37.    //Replace the span in the clone td
    38.    $(cClone).find('span').replaceWith('<span class="sparklines" values="' + vals + '"></span>');
    39.    // Add the new Sparkline column after the first one
    40.    $(r).find('td').eq(0).after(cClone);
    41.    }
    42. //Set Sparklines script and some properties like type color etc.
    43. $('.sparklines').sparkline('html',
    44. {
    45.    type : 'line', lineColor : 'blue'}
    46. );

    This is the result of the code modifications:


    Live demo can be found here:
    Pivot Sparklines

    Posted Feb 11 2012, 04:30 PM by Adi with no comments
    Filed under: , , ,