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

Monday, May 09, 2016

D3 Chord diagram visualization example using Custom Visualization Component(CVC) in Jaspersoft Design Studio 6.2 CE/Pro


D3 Chord diagram visualization example using CVC component in J.D.S 6.2 or 6.2.1 CE/Pro

Development Credits : Abhi 

Working with passionate guys  always fun and results best solutions :-) 

Sadakar Pochapmalli  

1 comment:

  1. Hi Sadakar,

    I have created a CVC to generate leafletjs based map in a report. But I did not get the output in JAVA. I am only getting output in HTML format.

    I am unable to get the SVG part in the code. Please check the below code. Can you please look into it and let me know where I am going wrong.


    define('LeafletMap',["leaflet","LeafletMap"], function (Leaflet) {

    return function (instanceData) {

    var w = instanceData.width,
    h = instanceData.height;
    //L.Icon.Default.imagePath = 'D:/JasperWorkJava/CVC/l_map/images' //L.Icon.Default.imagePath = '/sites/all/libraries/leaflet/dist/images'
    var margin = 20;
    var series0 = instanceData.series[0];
    var map = L.map(instanceData.id).setView([-0.179901, -78.462982], 7);
    /* var base = L.tileLayer(
    'https://mapssl.location-world.com/ArcGIS/rest/services/GlobalWMA/MapServer/tile/{z}/{y}/{x}', {
    maxZoom: 19,
    attribution: 'Map data © Location-World'
    }).addTo(map); */

    for (var index = 0; index < series0.length; ++index) {

    var record = series0[index];

    /* var MMarker = L.MakiMarkers.icon({
    icon: "circle",
    color: '#f03',
    size: "m"
    }); */
    /* var marker1 = L.marker([record.Latitude,record.Longitude]).addTo(map); */
    var circle = L.circle([record.Latitude,record.Longitude], record.Amount, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5

    /* var svg = Leaflet.select("#" + map ).append("div")
    .attr("id", instanceData.id + "svg")
    .style("width", w + "px")
    .style("height", h + "px")
    .attr("width", w)
    .attr("height", h)
    .attr("transform", "translate(.5,.5)"); */