Visualize: Multiple Ad Hoc View

Test plugins

by Pavel Savushchyk

HTML

<script src="http://localhost:8080/trunk/client/visualize.js?_opt=true"></script>


<div id="firstContainer"></div>
<div id="secondContainer"></div>
<div id="thirdContainer"></div>

CSS

html,
body {
  height: 100%;
}

#firstContainer {
  width: 50%;
  height: 100%;
  float: left;
}

#secondContainer,
#thirdContainer {
  width: 50%;
  float: left;
  height: 50%;
}

JavaScript

visualize({
  auth: {
    name: "superuser",
    password: "superuser"
  }
}, function(v) {
  var first = v.adhocView({
    resource: "/public/Samples/Ad_Hoc_Views/04__Product_Results_by_Store_Type",
    container: "#firstContainer",
    linkOptions: {
      events: {
        click: function(ev, data, defaultHadlder, extendedData) {
          console.log(data, extendedData);
        }
      }
    },
    success: function() {
      console.log("First Container view rendered");
    },
    error: function(e) {
      console.log(e);
    }
  });
  var second = v.adhocView({
    resource: "/public/Samples/Ad_Hoc_Views/11__Top_5_Products_by_City",
    container: "#secondContainer",
    linkOptions: {
      events: {
        click: function(ev, data, defaultHadlder, extendedData) {
          console.log(data, extendedData);
        }
      },
      beforeRender: function(pairs) {
        console.log(pairs);
      }
    }
  });
  var third = v.adhocView({
    resource: "/public/Samples/Ad_Hoc_Views/01__Geographic_Results_by_Segment",
    container: "#thirdContainer",
    linkOptions: {
      events: {
        click: function(ev, data, defaultHadlder, extendedData) {
          console.log(data, extendedData);
        }
      }
    },
    success: function() {
      console.log("Third Container View rendered");
    },
    error: function(e) {
      console.log(e);
    }
  });
});