How to integrate custom D3.js Chart widget with PivotClient?
This KB illustrates that how to integrate custom D3.js Chart widget with JavaScript Pivot Client control.
Solution:
To add and render a custom D3.js Chart (third party), we can use our PivotChart JSON information, which can be transformed to an appropriate JSON format to render the D3.js Chart widget in the sample page. The same can be achieved in the script section, under a simple button click event. For creating a custom D3.js Chart widget, we need to refer the following JavaScript libraries under the HTML “head” tag.
JavaScript Libraries - D3.js Chart
<head> //… <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> </head>
The code sample below illustrates on how to add a custom D3.js Chart widget with PivotClient control.
CSS
<style>
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: orange;
}
.bar:hover {
fill: orangered;
}
.x.axis path {
display: none;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
Creates a small triangle extender for the tooltip .d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
Style northward tooltips differently .d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
Script
<script type="text/javascript">
function btnClick(args) {
var clientObj = $("#PivotClient1").data("ejPivotClient");
var chartObj = clientObj._pivotChart.element.find("#" + clientObj._pivotChart._id + "Container").data("ejChart"); // You can get our PivotChart object here.
// Initializing custom chart(D3) widget.
$("#" + clientObj._pivotChart._id + "CustomChart").remove();
var cstmchrt = document.createElement("div");
cstmchrt.id = clientObj._pivotChart._id + "CustomChart";
$(".content").append(cstmchrt);
var data = chartObj.model.series[0].dataSource; // You can get the JSON data here.
var margin = { top: 20, right: 20, bottom: 100, left: 40 },
width = parseInt(clientObj._pivotChart.model.size.width) - margin.left - margin.right,
height = parseInt(clientObj._pivotChart.model.size.height) - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
// You can add custom tooltip here.
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function (d) {
return "<strong> " + d.xValues.split("~~")[d.xValues.split("~~").length - 1] + ": </strong> <span style='color:red'>" + d.yValues + "</span>";
})
var svg = d3.select("#" + clientObj._pivotChart._id + "CustomChart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.call(tip);
// Data source can be provided here.
x.domain(data.map(function (d) {
return d.xValues.split("~~")[d.xValues.split("~~").length - 1];
}));
y.domain([0, d3.max(data, function (d) {
return d.yValues;
})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-.55em")
.attr("transform", "rotate(-90)");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 10)
.attr("dy", ".61em")
.style("text-anchor", "end")
.text("Value ($)");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function (d) { return x(d.xValues.split("~~")[d.xValues.split("~~").length - 1]); })
.attr("width", x.rangeBand())
.attr("y", function (d) { return y(d.yValues); })
.attr("height", function (d) { return height - y(d.yValues); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
function type(d) {
d.yValues = +d.yValues;
return d;
}
}
</script>
Screenshot Link:
Sample Link:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/PivotClientDemo-351381093
Conclusion
I hope you enjoyed learning about how to integrate a custom D3.js Chart widget with PivotClient.
You can refer to our JavaScript Pivot Client feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Pivot Client example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
