Visualize: Conditional formating

Test plugins

HTML

<script type='text/javascript' src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>

<button id="changeConditions">Change conditions for numeric column</button>

<div id="container"></div>

JavaScript

visualize({
  auth: {
    name: "superuser",
    password: "superuser"
  }
}, function(v) {
  //discover name through JRXML (field name by default)
  var salesColumnName = "_detail_level__sales_fact_ALL.sales_fact_ALL__store_sales_2013",
    report = v.report({
      resource: "/public/Samples/Reports/04._Product_Results_by_Store_Type_Report",
      container: "#container",
      success: function(data) {
        console.log(data);
      },
      error: showError
    });

  $("#changeConditions").click(function() {
    report.updateComponent(salesColumnName, {
        conditions: [{
          operator: "greater",
          value:'test' ,
          backgroundColor: null,
          font: {
            color: "FF0000",
            bold: true,
            underline: true,
            italic: true
          }
        }, {
          operator: "between",
          value: [ 'test', 156],
          backgroundColor: "00FF00",
          font: {
            color: "0000FF"
          }
        }]
      })
      .then(printConditions)
      .fail(showError);
  });

  function printConditions(component) {
    console.log("Conditions: " + component.conditions);
  }

  function showError(err) {
    alert(err);
  }
});