Visualize: JRS-1511

JRS-1511

by Yuriy Bablyukh

HTML

<script src="http://jscolor.com/example/jscolor/jscolor.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script type='text/javascript' src="http://localhost:8081/jasperserver-pro/client/visualize.js"></script>

<select id="columnList"></select>

<select id="tOperator">
    <option value="equal">Equals</option>
    <option value="not_equal">Is not equal to</option>
    <option value="greater">greater</option>
    <option value="greater_or_equal">greater_or_equal</option>
    <option value="less">less</option>
    <option value="less_or_equal">less_or_equal</option>
    <option value="between">Is between</option>
    <option value="not_between">not_between</option>
    <option value="contain">contain</option>
    <option value="not_contain">not_contain</option>
    <option value="start_with">start_with</option>
    <option value="not_start_with">not_start_with</option>
    <option value="end_with">end_with</option>
    <option value="not_end_with">not_end_with</option>
    <option value="end_with">end_with</option>
    
    
    <option value="on_or_before">Is on or before</option><option value="before">Is before</option><option value="on_or_after">Is on or after</option><option value="after">Is after</option></select>
<br>
Value 1:
<input id="conditionStart" type="text" name="conditionStart" value="">
Value 2:    <input id="conditionEnd" type="text" name="conditionEnd" value="">
    
        <br>
Text: <input id="colorText" size="6" class="color" value="000000">
Bagr:<input id="colorBack" size="6" class="color" value="ffffff">
            <br>
    <input type="checkbox" id="bould" value="bould">bould<br>
<input type="checkbox" id="Italic" value="Italic">Italic<br>

    <input type="checkbox" id="underline" value="underline">underline<br>
        
<button id="Add">Add</button>        

<button id="showConditions">Log current conditions for numeric column</button>


<div...

JavaScript

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    var columns,
    report = v.report({
        resource: "/public/Samples/Reports/04._Product_Results_by_Store_Type_Report",
        container: "#container",
        events: {
            reportCompleted: function (status, error) {
                if (status === "ready") {
                    
                    var cList=report.data().components;
                    cList.forEach(function(entry) {
                  
                        $("#columnList").append(new Option(entry.label, entry.id));
                    });
                    
                    columns = _.filter(report.data().components, function (component) {
                        return component.componentType == "tableColumn";
                    });
                }
            }
        },
        error: function (err) {
            alert(err);
        }
    });
    

    
    
    $("#showConditions").on("click", function() {
        console.log(columns);
        var numericColumn = _.findWhere(columns, { dataType: "numeric" });
        
        if (numericColumn) {
            console.log(numericColumn.conditions);
        }
    });
    
    $("#Add").on("click", function() {  

        var cOperator= $("#tOperator").val();
        var vStart= $("#conditionStart").val();
        var vEnd= $("#conditionEnd").val();
        vStart=parseFloat(vStart);
        vEnd=parseFloat(vEnd);
        var isBould=$('#bould').prop('checked');
        var isItalic=$('#Italic').prop('checked');
        var isUnderline=$('#underline').prop('checked');
        
        console.log(cOperator);
        console.log(vStart);
        report.updateComponent($("#columnList").val(), 
                               {
                               conditions: [
                                   {
                                     operator:cOperator ,
                                       value:...