Highcharts Demo

author(s): Torstein Hønsi

by Yuriy Bablyukh

HTML

<script src="http://localhost:8080/jasperserver-pro/client/visualize.js?_opt=false">
</script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>




<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="view_container"></div>
<div id="report_container"></div>
<div id="inputControls_container"></div>
<div id="dashboard_container"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  title: {
    text: 'Monthly Average Temperature'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ]
  },
  yAxis: {
    title: {
      text: 'Temperature'
    },
    labels: {
      formatter: function() {
        return this.value + '°';
      }
    }
  },
  tooltip: {
    crosshairs: true,
    shared: true
  },
  plotOptions: {
    spline: {
      marker: {
        radius: 4,
        lineColor: '#666666',
        lineWidth: 1
      }
    }
  },
  series: [{
    name: 'Tokyo',
    marker: {
      symbol: 'square'
    },
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
      y: 26.5,
      marker: {
        symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
      }
    }, 23.3, 18.3, 13.9, 9.6]

  }, {
    name: 'London',
    marker: {
      symbol: 'diamond'
    },
    data: [{
      y: 3.9,
      marker: {
        symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)'
      }
    }, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
  }]
});


visualize({

}, function(v) {
  var report = v.report({
    resource: "/public/01._Geographic_Results_by_Segment_Report",
    container: "#report_container",
    error: showError
  });
  
   var inputControls = v.inputControls({
   container: "#inputControls_container",
    resource: "/public/01._Geographic_Results_by_Segment_Report",
    success: function(controls) {
      console.log(controls);
    },
  });

 var ahv = v.adhocView({
    resource: "/public/Samples/Ad_Hoc_Views/04__Product_Results_by_Store_Type",
    container: "#view_container"
  });

  
  var dashboard = v.dashboard({
    container: "#dashboard_container",
    resource: "/public/Samples/Dashboards/1._Supermart_Dashboard",
    success: function(data) {
    	console.log(data);
    },
    error: showError
  });

 ...