Was this page helpful?

Flot Charts

    Table of contents
    1. 1. Functions
    2. 2. Script Source
    3. 3. Samples

    if somebody is interested here is an extension which enables to add Flot ( (javascript plotting library) graphs on a page. Developed for and tested on Lyons version.
    First you need to download flot library files (http://code.google.com/p/flot/) : jquery.flot.pack.js and excanvas.pack.js and put them on server path - ( /skins/common/jquery/).
    Then activate script extension. Parameters for flot.graph function are almost same as for Flot plot js function - so see its documentation for details.

     

    Author
    Ivan Zderadicka
    Type Script
    Categories Graphs
    Requires MindTouch Core 1.8.3 or later
    Status Stable
    License Free/Open Source
    Manifest http://developer.mindtouch.com/@api/deki/files/4602/=flot.xml

     

    Install Script
    To add  this script to your site, enter the address of your MindTouch installation (ex: http://www.mindtouch.com) and click the Add Script button.  This will open your control panel and prepopulate the necessary values.  You will still need to manually add configuration settings if required.  Note that no changes are made to your site until you confirm the action in your control panel.
    Your site address:     


    Table of Contents

    See also How to add a script, Using the Extension Dialog, Learn about DekiScript, Extensions Directory.


    Functions

    Script Source

    
            

    Samples

     

    DekiScript:

    //Prepare some sample data
    var serie1=[];
    var serie2=[];
    var samples=1000;
    foreach (var na in list.new(samples))  {
    var x= (__count * 4 * 3.14)/samples;
    // Item of a serie could be either a tuple [x,y]
    let serie1 ..= [[x, num.abs(num.sin(x))]];
    // or item could be any map, then we must specify later name of x and y element
    let serie2 ..= [{x_field:x, y_field: num.abs(num.round(num.sin(x)))}];
     }
    
    //Create graph
    flot.graph( [{data:serie1, color:'blue', label:'Analog'},
                {data:serie2, color: 'green', x: 'x_field', y:'y_field', label:'Digital'}],
                {grid: {tickColor:'#ccccff'}, legend: {position:'ne', containerWidth:120}}, 800,  400);

    will create a chart like this:

    graph1.png

     

    And this code:

    var data=[[0,10], [1, 5], [2, 8], [3,19], [4, 12], [5, 7], [6, 10], [7, 11], [8, 4], [9, 16]];
    flot.graph([data], {bars:{show:true}, colors:['red']});

    will create this small bar chart:

    graph2.png

    Was this page helpful?
    Tag page

    Files 3

    FileVersionSizeModified 
    • v1
    • 24.38 kB
    • 02:45, 16 Jul 2009
    •  
    Viewing 7 of 7 comments: view all
    great tool, but on my system your example code for the first example does not produce the output as shown in graph1.png - i guess i only have to look into the flot documentation. - Has something to do with the german/english notation for the decimal point - in german it is , and therefore i get for x= (__count * 4 * 3.14)/samples; values starting from 0 - 1,256 - 2,512 and so on which are then misinterpreted by the extension as thousands instead of decimals. Too bad i can't force my user to english. Actually of course it is even worse ... flot takes the values as 0, 1, 256, 2, 512 ... now i at least understand the funny plot. Does somebody know what to do with the 3.14 on a german server? edited 09:29, 16 Jul 2009
    Posted 09:01, 16 Jul 2009
    I guess problem might be in outputing numbers to js.
    Could you try to put <eval:js value="3.14"/> on some test page on your wiki with German locals?
    If the output is 3,14 - eg with local decimal point, then I guess it's a bug of the eval:js function - because js number literals should be in US notation. Then I propose to file a bug report on this.
    If this is the cause of problem then temporary solution would be to use different way to serialize to JSON - try Json.Emit :
    <eval:expr value="json.emit(3.14)"></eval:expr>
    If this has same problem then the solution is to build something own for JSON serialization or patch the code.
    Posted 23:20, 16 Jul 2009
    <eval:js value="3.14"/> returns 314 on the page so it translates it to 3,14 (german notation) and then with US interpretation back to 314 (shouldn't this then be 3140?). It is the same with <eval:expr value="json.emit(3.14)"></eval:expr> - it also shows 314. edited 01:00, 17 Jul 2009
    Posted 00:58, 17 Jul 2009
    Then I assume it's bug - you can try if latest version has it too and eventually file a bug report.
    Posted 02:59, 17 Jul 2009
    I've tried latest Lyons version - 9.02.4 - I switched there to German Language and everything worked fine. So looks like upgrade is way to go.
    Posted 03:15, 17 Jul 2009
    thanks. will test that on monday at latest. - Unfortunately it didn't work out for me (running 9.2.4.15075 now). I don't think switching to german language in Mindtouch changes anything apart from how it looks like... edited 00:09, 20 Jul 2009
    Posted 04:43, 17 Jul 2009
    Could you update the extension to support flot charts 0.7? Not it supports up to 0.5, because .js files in the new versions are split. edited 09:57, 14 Sep 2011
    Posted 09:57, 14 Sep 2011
    Viewing 7 of 7 comments: view all
    You must login to post a comment.

    Copyright © 2011 MindTouch, Inc. Powered by