Jaspersoft BI Tools

iReport,Jaspersoft Design Studio,Jaspersoft Server, Schema Workbench,Analysis,Dashboards, Self Service BI, Domains,Topics,Ad-Hoc Reports, Jaspersoft ETL, Embedding BI,HTML-5 charts, Fusion Charts,JFree Charts,Drill down reports , Drill down Dashboards,Visualize.js, Performance Tuning, D3 Charts, Jaspersoft Customization

Friday, May 06, 2016

D3 Pie Chart visualization using Custom Visualization Component (CVC) in Jasper Design Studio 6.2 CE/Pro

Hi,

D3 Pie Chart Visualization Example 


Populate SQL result set as JSON format using Java Script :
  
               var data = [];

               var series0 = instanceData.series[0];
              
                for (var index = 0; index < series0.length; ++index) {
                   
                             var record = series0[index];                  
                             data.push({label:record.testprop, value: record.testvalue});
                    }


Development Credits : Sadakar 

Sadakar Pochampalli 

3 comments:

  1. Hi Sadakar,

    I have developed highchar-Pie chart in jasper using CVC component.I am able to get 2D pie chart . I need 3D PIE chart for that i have to include highcharts-3D library. But,somehow I am not getting any output after addding highchart-3D lib.Please suggest.


    build.js code:-

    ({
    baseUrl: '',
    paths: {
    jquery_hc: "jquery",
    hchart_hd: "highcharts-3d.src",
    hchart: "highcharts.src",
    hc_sparklines: 'hc_sparklines'
    },
    shim: {
    'hchart' : {
    deps: ['jquery_hc','hchart_hd'],
    exports: 'Highcharts'
    }
    }
    },
    name: "hc_sparklines",
    out: "hc_sparklines.min.js"
    })

    3D_pie_Chart.js:

    define(['jquery_hc','hchart_hd','hchart'], function ($,Highcharts) {

    return function (instanceData) {


    var data = [];

    var series0 = instanceData.series[0];
    for (var index = 0; index < series0.length; ++index) {
    var record = series0[index];
    data.push(record.value);
    }

    // Create the chart
    var config = {
    chart: {
    type: 'pie',
    renderTo: instanceData.id,
    backgroundColor: null,
    borderWidth: 0,
    type: 'area',
    margin: [2, 0, 2, 0],
    width: instanceData.width,
    height: instanceData.height,
    options3d: {
    enabled: true,
    alpha: 45,
    beta: 0

    }
    },

    title: {
    text: ''
    },
    legend: {
    enabled: false
    },
    tooltip: {
    pointFormat: '{series.name}: {point.percentage:.1f}%'
    },
    plotOptions: {
    pie: {
    allowPointSelect: true,
    cursor: 'pointer',
    depth: 45,
    dataLabels: {
    enabled: true,
    format: '{point.name}'
    }
    }
    },

    series: [{
    type: 'pie',
    data: [
    ['More than 8 days remaining', 32],
    ['1-7 days remaining', 0],
    ['less than 1 day Remaining', 68]
    ]
    }],
    };

    new Highcharts.Chart(config);

    };

    });

    ReplyDelete
  2. Do you have any error log when you build the code ?

    ReplyDelete
  3. No I didn't face any error. It was problem with highchart3d libarary. I was using wrong file may be.

    ReplyDelete