Visualize: render adhoc crosstab

Test plugins

by Pavel Savushchyk

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<!--Provide URL to visualize.js-->
<script src="http://localhost:8080/trunk/client/visualize.js?_opt=true"></script>

<!--Provide container to render your visualization-->
<div id="container"></div>

CSS

/*Datatable header style*/

#container .jr-mDatatable-cellRowlabel.jr-mDatatable-cellField.jr,
#container .jr-mDatatable-cellColumnlabel.jr-mDatatable-cellField.jr,
#container .jr-mDatatable-header.jr .jr-mDatatable-row.jr {
  background-color: #CD853F;
  color: #FFF8DC;
}


/*Datatable header font color*/

#container .jr-mDatatable-header.jr .jr-mDatatable-row.jr .jr-mDatatable-cell.jr {
  color: #FFF8DC;
}


/*Datatable group background color*/

#container .jr-mDatatableCrosstab-header-rowlabelsContainer.jr .jr-mDatatable-cellRowlabel.jr,
#container .jr-mDatatable-row.jr-mDatatable-rowGroup.jr .jr-mDatatable-cell.jr {
  background-color: #DEB887;
  color: #FFF8DC;
}


/*Datatable odd row background color*/

#container .jr-mDatatable-rowOdd.jr {
  background-color: #FFF8DC;
}


/*Datatable even row background color*/

#container .jr-mDatatable-rowEven.jr {
  background-color: #FFEBCD;
}


/*Datatable text style*/

#container .jr-mDatatable-cell-text.jr {
  line-height: 30px;
  font-style: italic;
}

JavaScript

visualize({
  auth: {
    name: "superuser",
    password: "superuser"
  }
}, function(v) {
  var ahv = v.adhocView({
    resource: "/public/Samples/Ad_Hoc_Views/11__Top_5_Products_by_City",
    container: "#container",
    linkOptions: {
      events: {
        click: function(ev, data, defaultHandler, extendedData) {
          console.log(data);
        }
      }
    }
  });
});