Make your life easy with web based Charting and Data Representation.

NVD3 Re-usable charts for d3.js


Most of your web projects might have a portal for represent your collected data in a user friendly format. As I know developers facing difficulties in integrating a good report engine. There are some cases which reporting engine itself brings us a lot of burden to the project, or have only limited controls over the data manipulation. When I'm fighting with these issues I found a nice pretty interactive and responsive java script based API for charts.



It supports almost all the charts we required for an advance management information system. This JavaScript library is such that, it could be easily integrated with any project. All charts supports JSON data format. which would be really convenient to populate the charts on client side. NVD3 Charting API has a full support of responsive feature, this provides the flexibility of developing single chart which works in most of the available devices as of now [PC/ Mobiles]. 

Lets Take a look at NVD3.js.

Getting Started
  • Download d3.v3.js. This is the only required library for NVD3.
  • Download the latest nv.d3.js (version 1.1 beta). Get the development version, or minified production version.
  • Don’t forget the NVD3 css file!

Google Chrome is our best supported browser. NVD3 also works in Firefox, Opera, Safari and Internet Explorer 10

Checkout examples gallery for how to code your first chart. 


Basic javascript libraries required before you integrate your first chart.

<script type="text/javascript" src="d3/d3.js"></script>
<script type="text/javascript" src="d3/nv.d3.js"></script>

<link rel="stylesheet" type="text/css" href="../core/javascript/d3/nv.d3.css"  media="all" >
<link rel="stylesheet" type="text/css" href="../core/css/jquery.multiselect2side.css"  media="all" />


You can use following javascript wrapper written by self to easily integrate charts with your portal.

//-----------------------------------------------------------------------------------------------------
/**
 *  Charts. 
 *  
 *  @author Amila Silva
 *  @email amilasilva88@gmail.com
 * 
 */

/**
 * Line charts.
 * 
 * @param chartData
 *            chart data as JSON
 * @param elementId
 *            element id where should place in page
 */
function lineWithFocusChart(elementId, chartData) {
return nv.addGraph(function() {
var chart = nv.models.lineWithFocusChart();

chart.xAxis.tickFormat(d3.format(',f'));
chart.x2Axis.tickFormat(d3.format(',f'));

chart.yAxis.tickFormat(d3.format(',.2f'));
chart.y2Axis.tickFormat(d3.format(',.2f'));

d3.select('#' + elementId).datum(chartData).transition().duration(500)
.call(chart);

nv.utils.windowResize(chart.update);

return chart;
});
}

/**
 * Discrete Bar Chart.
 * 
 * @param chartData
 *            chart data as JSON
 * @param elementId
 *            element id where should place in page
 * @param xAxisLabel
 *            X axis label
 * @param yAxisLabel
 *            Y axis label
 */
function discreteBarChart(elementId, chartData, xAxisLabel, yAxisLabel) {
return nv.addGraph(function() {
var chart = nv.models.discreteBarChart().x(function(d) {
return resizeLengthyLabels(d.label);
}).y(function(d) {
return d.value;
}).staggerLabels(true) // Too many bars and not enough room? Try
// staggering labels.
.tooltips(true) // Don't show tooltips
.showValues(true) // instead, show the bar value right on top of each
// bar.
.transitionDuration(350);

chart.xAxis.axisLabel(xAxisLabel);
chart.yAxis.axisLabel(yAxisLabel);
chart.tooltipContent(function(key, label, value) {
return label + ':' + value;
});

d3.select('#' + elementId).datum(chartData).call(chart);

nv.utils.windowResize(chart.update);

return chart;
});
}

function resizeLengthyLabels(label) {
if (label.lastIndexOf("/", label.length) > 0) {
label = label.substring(label.lastIndexOf("/", label.length) + 1,
label.length);
// if (label.length > 15) {
// label = label.substring(0,7) + "..."
// + label.substring(label.length - 5, label.length);
// }
}
return label;
}

/**
 * Multi Bar chart.
 * 
 * @param chartData
 *            chart data as JSON
 * @param elementId
 *            element id where should place in page
 * @param showControls
 *            Allow user to switch between 'Grouped' and 'Stacked' mode
 * @param xAxisLabel
 *            x axis label
 * @param yAxisLabel
 *            y axis label
 */
function multiBarChart(elementId, chartData, showControls, xAxisLabel,
yAxisLabel) {
return nv.addGraph(function() {
var chart = nv.models.multiBarChart().x(function(d) {
return resizeLengthyLabels(d.label);
}).y(function(d) {
return d.values;
}).transitionDuration(500).reduceXTicks(true) // If 'false', every
// single x-axis tick
// label will be rendered.
.rotateLabels(0) // Angle to rotate x-axis labels.
.showControls(showControls) // Allow user to switch between
// 'Grouped' and 'Stacked' mode.
.groupSpacing(0.2) // Distance between each group of bars.
;

chart.xAxis.axisLabel(xAxisLabel).tickFormat(d3.format(',f'));
chart.yAxis.axisLabel(yAxisLabel).tickFormat(d3.format(',.1f'));

d3.select('#' + elementId).datum(chartData).call(chart);

nv.utils.windowResize(chart.update);

return chart;
});
}

/**
 * Pie charts.
 * 
 * @param chartData
 *            chart data as JSON
 * @param elementId
 *            element id where should place in page
 * 
 */
function pieChart(elementId, chartData) {
return nv.addGraph(function() {
var chart = nv.models.pieChart().x(function(d) {
return resizeLengthyLabels(d.label);
}).y(function(d) {
return d.value;
}).showLabels(true);

d3.select('#' + elementId).datum(chartData).transition().duration(1500)
.call(chart);

nv.utils.windowResize(chart.update);

return chart;
});
}


/**
 * line charts.
 * 
 * @param chartData
 *            chart data as JSON
 * @param elementId
 *            element id where should place in page
 * @param xAxisLabel
 *            x axis label
 * @param yAxisLabel
 *            y axis label
 * 
 */
function lineChart(elementId, chartData, xAxisLabel, yAxisLabel) {
return nv.addGraph(function() {
var chart = nv.models.lineChart().useInteractiveGuideline(true);

chart.xAxis.axisLabel(xAxisLabel).tickFormat(d3.format(',r'));
chart.yAxis.axisLabel(yAxisLabel).tickFormat(d3.format('.02f'));

d3.select('#' + elementId).datum(chartData).transition().duration(500)
.call(chart);

nv.utils.windowResize(chart.update);

return chart;
});
}

/**
 * Horizontal Bar Chart.
 * 
 * @param elementId
 *            element id where should place in page
 * @param chartData
 *            chart data as JSON
 * @param showControls
 *            Allow user to switch between 'Grouped' and 'Stacked' mode
 * @param xAxisLabel
 *            x axis label
 * @param yAxisLabel
 *            y axis label
 */
function horizontalBarChart(elementId, chartData, showControls, xAxisLabel, yAxisLabel) {
return nv.addGraph(function() {
   var chart = nv.models.multiBarHorizontalChart()
       .x(function(d) { return resizeLengthyLabels(d.label); })
       .y(function(d) { return d.value })
       .showValues(true)           //Show bar value next to each bar.
       .tooltips(true)             //Show tooltips on hover.
       .transitionDuration(500)
       .showControls(showControls);  //Allow user to switch between "Grouped" and "Stacked" mode.
   
   chart.xAxis.axisLabel(xAxisLabel);
chart.yAxis.axisLabel(yAxisLabel).tickFormat(d3.format('.1f'));
chart.tooltipContent(function(key, label, value) {
return label + ':' + value;
});

   d3.select('#' + elementId)
       .datum(chartData)
       .call(chart);

   nv.utils.windowResize(chart.update);

   return chart;
});
}
//---------------------------------------------------------------------------------------------------------



Usage of above javascript charting api.

var barChartData = getChartDataAsJson( "FETCH_BAR_CHART_DATA" );
    discreteBarChart("elementId", barChartData, '', ''); // This will draw a chart in webpage.


Enjoy NVD3 charting.....

you can find the example code here.









Comments

Popular posts from this blog

PostgreSQL bytea and oid

MySQL as Hive metadata store

Big Memory Go.