CHART VIEW

HTML

<div style="width:90%">
<div id="dataView" >
   
</div>
<div id="filterPanels"></div>
</div>

<link rel="stylesheet" href="http://localhost:8080/jasperserver-amber-adv/scripts/adhoc/api/css/adHocView.css" type="text/css" media="screen">

    <script type="text/javascript" src="http://localhost:8080/jasperserver-amber-adv/scripts/client/jasper.js"></script>

CSS

#chart{
    height: 500px;
}

#dataView{
    height: 500px;   
    width:80%;
}

JavaScript

var bi = jasper("http://localhost:8080/jasperserver-amber-adv");

//use configured script loader
bi([
    "jquery",
    "adhoc/api/AdHocViewFacade"
], function($, AdHocView){
    "use strict";
    
    var adHocView = new AdHocView({
        baseUrl: "http://build-master.jaspersoft.com:5780/jrs-pro-feature-amber-adhoc-rest-api",
        container: "#dataView",
        url: "/public/Samples/Ad_Hoc_Views/01__Geographic_Results_by_Segment",
        filters: "#filterPanels"
    });

     adHocView.run().then(function () { 
          //properties methods:
         /* 
         adHocView.dataModel.metadata().view().xAxisRotation(45); // number
         adHocView.dataModel.metadata().view().yAxisRotation(90); // number
         adHocView.dataModel.metadata().view().xAxisStep(2); // number
         adHocView.dataModel.metadata().view().yAxisStep(2); // number
         adHocView.dataModel.metadata().view().chartType("pie"); // propper chart type
         adHocView.dataModel.metadata().view().showDataPoints(true); // boolean
         adHocView.dataModel.metadata().view().showMeasureOnValueAxis(false); // boolean
         adHocView.components.ichart.changeDataLevel("rows", 1); // string, number, changes data level
         console.log(adHocView.components.ichart.getLevels("rows")); // string - get all levels for given axis 
         */
    });
});