Performance Line Graph Widget

Third party dependencies

Do not add libraries if you are already using then in your website. For expample Jquery.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="http://webwidgets-qa.longboatatanalytics.com/bower_components/jquery-ui-1.11.2.custom/jquery-ui.min.css" />
<script src="http://webwidgets-qa.longboatatanalytics.com/bower_components/handlebars/handlebars.min.js"></script>
<script src="http://webwidgets-qa.longboatatanalytics.com/bower_components/jquery/dist/jquery.min.js"></script>
<script src="http://webwidgets-qa.longboatatanalytics.com/bower_components/jquery-ui-1.11.2.custom/jquery-ui.min.js"></script>
<script src="http://webwidgets-qa.longboatatanalytics.com/bower_components/flot/jquery.flot.js"></script>
<script src="http://webwidgets-qa.longboatatanalytics.com/bower_components/flot/jquery.flot.time.min.js"></script>
<script src="http://webwidgets-qa.longboatatanalytics.com/bower_components/flot/jquery.flot.selection.min.js"></script>

WebWidgets Library

Add always these files to your website.

<link rel="stylesheet" href="http://webwidgets-qa.longboatatanalytics.com/Stylesheet/widgets.css" />
<script src="http://webwidgets-qa.longboatatanalytics.com/Scripts/Widgets.js"></script> 

Demo code

Add the following HTML code to your website.

<div id="PerfLineGraph_container">
    <!-- Genetared code will be inserted here -->
</div>

Execute the following JavaScript code.

// Configure WebWidgets library
var LAWWGT = new LongboatAnalyticsWebWidgets({
    apiKey: "db34b5f1-08c5-4ef7-8027-b4d2363ce350",
    serviceHost: "http://webwidgets-qa.longboatanalytics.com/" // remove -qa in production
});

// Initialize WebWidgets library
LAWWGT.initialize(function () {

    // Fund details
    var entities = [
        { entityType: LAWWGT.EntityTypeEnum.Fund, id: 25000256, countryCode: "IE", selected: true },
        { entityType: LAWWGT.EntityTypeEnum.Fund, id: 25000257, countryCode: "IE", selected: false },
        { entityType: LAWWGT.EntityTypeEnum.Fund, id: 25000258, countryCode: "IE", selected: false },
        { entityType: LAWWGT.EntityTypeEnum.Fund, id: 25000259, countryCode: "IE", selected: false },
        { entityType: LAWWGT.EntityTypeEnum.Fund, id: 25000260, countryCode: "IE", selected: true },
        { entityType: LAWWGT.EntityTypeEnum.Fund, id: 25000261, countryCode: "IE", selected: false },
        { entityType: LAWWGT.EntityTypeEnum.Fund, id: 25000262, countryCode: "IE", selected: false },
        { entityType: LAWWGT.EntityTypeEnum.Fund, id: 25000263, countryCode: "IE", selected: true },
        { entityType: LAWWGT.EntityTypeEnum.Fund, id: 25000264, countryCode: "IE", selected: false },
        { entityType: LAWWGT.EntityTypeEnum.Fund, id: 25000265, countryCode: "IE", selected: false },
        { entityType: LAWWGT.EntityTypeEnum.Fund, id: 25001038, countryCode: "IE", selected: true },
        { entityType: LAWWGT.EntityTypeEnum.Fund, id: 25001251, countryCode: "IE", selected: false },
        { entityType: LAWWGT.EntityTypeEnum.Fund, id: 25001254, countryCode: "IE", selected: false },
        { entityType: LAWWGT.EntityTypeEnum.Fund, id: 25001340, countryCode: "IE", selected: true },
        { entityType: LAWWGT.EntityTypeEnum.Fund, id: 25001341, countryCode: "IE", selected: false },
        { entityType: LAWWGT.EntityTypeEnum.Fund, id: 25001342, countryCode: "IE", selected: false }
    ];

    // Create Performance Line Graph Widget
    var PerfLineGraphWgt = new LAWWGT.widgets.LineGraphWidget({
        placeholder: "#PerfLineGrap_container",
        entities: entities,
        dateFrom: new Date().setFullYear((new Date().getFullYear() - 1)) // ONE YEAR FROM TODAY
        dateTo: new Date().getTime(), // TODAY
    });

    // initialize widget
    PerfLineGraphWgt.initialize();
});

Live Demo

Copyright © 2014 Longboat Analytics