Real chart linkage
This is a real chart linkage demo using real charts in the grid data cell area.
※ Charts are not printed when exported.
Real chart include
Include “realchart.min.js” file for using Real Chart
<script type="text/javascript" src="/public/realchart.0.9.6/realchart.0.9.6.min.js"></script>Chart custom renderer settings
Setting a custom renderer for the “chart” column
var columns = [
{
name: "realchart",
header: {
text: "Chart (real chart)",
},
renderer: {
type: "renderer01",
},
editable: false,
width: 428,
},
...
];
gridView.registerCustomRenderer("renderer01", {
initContent: function (parent) {
var div = (this._div = document.createElement("div"));
div.className = "custom_render_div";
parent.appendChild(div);
config = {
title: {
visible:false
},
series: [
{
type: "pie",
pointLabel: {
visible: true;
position: "outside",
text: "${name}",
},
data: [
{ name: "GDP", y: 10 },
{ name: "GNI", y: 20 },
{ name: "PGNI", y: 20 },
{ name: "DIncome", y: 20 },
],
},
],
};
this._gridChart = RealChart.createChart(document, div, config);
},
clearContent: function (parent) {
this._gridChart = null;
},
render: function (grid, model, width, height, info) {
var data = grid.getValues(model.index.itemIndex);
var d = [];
d[0] = [data.GDPName, data.GDP, "#7cb5ec"];
d[1] = [data.GNIName, data.GNI, "#434348"];
d[2] = [data.PGNIName, data.PGNI, "#90ed7d"];
d[3] = [data.DIncomeName, data.DIncome, "#f7a35c"];
config.series[0].data = d.map(([name, value, color]) => ({
name,
y:value,
color: color,
}));
this._gridChart.load(config);
},
});