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
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
Hi Sadakar,
ReplyDeleteI 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);
};
});
Do you have any error log when you build the code ?
ReplyDeleteNo I didn't face any error. It was problem with highchart3d libarary. I was using wrong file may be.
ReplyDeleteHi
ReplyDeleteMeanwhile While taking export of report from server c6.3 in pdf format I am getting empty space in place of cvc component[chart].
Please suggest possible cause.
Tried with phantomjs 1.9.7 and 2.1.1. Also, in jasperereport.properties I have made all the required changes i.e configuring path of require.js, phantomjs and customvisualisation scripts.
Though we are getting output on server after publishing report on server but the chart is not coming in report.