Skip to Content
One of the advantage of MII is that its web based interface which helps us to provide centrally maintained applications. These centrally managed applications can be of much use and may include mobile devices as well. Till now, Due to lack of JRE for mobile devices, I was using them to provide posting data and normal charts(images). The charts were not intercative. I was living a normal life until I stumbled upon a forum post on SDN which told me about nice little flot, a javascript based library which can do miracles for charts in mobile devices(viz iphone). So, I decided to write a blog on how to. The prerequistes of this activity are: * Knowledge of MII. * Basic knowledge of XSLT. * Basic knowledge about json.  In order to get this working, the first thing that you need to do is to download the library which can be found at http://code.google.com/p/flot/downloads/detail?name=flot-0.7.zip&can=2&q=  Here, I will be using XSLT to transform MII XML to json as the chart takes data in json format only. The line chart that I am going to use for demonstration uses data in following format. { “label”: “Label for the chart”, “data”:[          (x1, y1),  (x2, y2), …  (xn, yn)]}        (1999, 3),  (2000, 7),  (2001, 7),  (2002, 8),  (2003, 5),  (2004, 4),  (2005, 2),  (2006, 6),  (2007, 1),  (2008, 7),  (2009, 7),  (2010, 7)]}      h3. The HTML page The important element here is placeholder- The element in which chart will be formed      body{ background-color: #FDFDF0; font-family: Arial; }                                             h3. Mobile Charts for MII                              $(function () {  //function which will be called for getting the data from MII function update() {   $.ajax({   url: “http://server:port/XMII/Illuminator?QueryTemplate=MIIDemoHome/Musarrat/testSQL&Content-Type=text/xml&session=true“, // calling the query using URL cache : false,   success: function(data){ onDataReceived(eval(‘(‘ + $(data).find(“output”).text() + ‘)’)); // navigating to output element of what is returned from AJAX call   function onDataReceived(series) {                 data =  ( series );                            $.plot($(“#placeholder”), data, options); // specifying the data for the chart             }    }    });  }     var options = {         lines: { show: true },         points: {show:true },         xaxis: {tickDecimals}     };     var data = [];     var placeholder = $(“#placeholder”);         $.plot(placeholder, data, options);     var alreadyFetched = {};     $(“input.dataUpdate”).click(function () {         // reset data     window.setInterval(update, 1000);       }); });       The output of the above will be something like this(once you cli   | h4. Initial Page  | h4. After Update  | | |
To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Manisha Batabyal
    Hi Musarrat,
    This is a very interesting blog.I have few queries.I did download the zip file located in the location provided by you.But that zip file contains many files.Do we need to upload all the files in our workbench ??
    Suppose I want generate a Pie chart by using Flot,then what are the files I need to import in my workbench??

    Thanks
    Manisha

    (0) 
    1. Musarrat Husain Post author
      Hello Manisha,

      there are two various libraries in that zip file which can be used or not based on the requirement. Jquery.js, excanvas.js and jquery.flot.js are the main libraries. Most of the libraries are available in minimal version too so as too save the bandwidth.
      Suppose if you do not want to use the cross hair functionality in your pie chart, then you can exclude jquery.flot.crosshair library from your project.

      Personally I would suggest that you upload the whole API in the workbench and include the required file in the page in the project.

      (0) 

Leave a Reply