Recently I had the chance to develop a dashboard Pie chart. The earlier dashboard was too old and don't have effects such as mouse-over and tool tips. I have first chosen Google chart and it has nice effects and looked not effective in old browsers. But later I chose jqPlot as it is a jQuery plugin to generate pure client-side java-script charts in your web pages.
The below is the HTML code for the above chart. You can download all the js and css files from the jQplot web site and can find a lot of samples with different varieties of charts.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jqPlot Examples</title>
<link rel="stylesheet" type="text/css" href="../style.css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
<script class="include" language="javascript" type="text/javascript" src="jqplot.pieRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="jqplot.highlighter.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="jqplot.cursor.min.js"></script>
<script class="code" type="text/javascript">
$(document).ready(function () {
var data = [
['Chrome - 100,500', 100500], ['Firefox - 80,000', 80000], ['Internet Explorer - 50,000', 50000], ['Safari - 20,000', 20000]
];
var plot1 = jQuery.jqplot('chart1', [data],
{
gridPadding: { top: 20, bottom: 0, left: 0, right: 0 },
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
highlightMouseOver: true,
sliceMargin: 0,
fill:true,
lineWidth: 5,
dataLabels: 'percent',
dataLabelFormatString: '%d%',
padding: 10, sliceMargin: 0
}
},
legend: {
show: true,
location: 'e',
rendererOptions: {
numberColumns: 1
}
}
});
$("#chart1").bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) {
var $this = $(this);
var value = data[1];
var num = '$' + value.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
$this.attr('title', data[0]);
}) ;
$("#chart1").bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) {
var $this = $(this);
$this.attr('title',"");
});
$legentIndex = 0;
});
</script>
</head>
<body>
<p class="text">jqPlot - Browser Statistics</p>
<div id="chart1" style="height:200px; width:350px;"></div>
</body>
</html>
The below code snippets are the implementation of the above code in SharePoint web part and I am not going to explain in detail about web part as it is out of scope of this document. If you are a beginner learn web part development from MSDN.
protected override void Render(HtmlTextWriter writer)
{
EnsureChildControls();
//Display data
StringBuilder sb = new StringBuilder();
LiteralControl litCssJs = new LiteralControl(sb.ToString());
litCssJs.RenderControl(writer);
sb = GetValue();
//Header Items
LiteralControl litControlTable = new LiteralControl(sb.ToString());
litControlTable.RenderControl(writer);
}
protected StringBuilder GetValue()
{
StringBuilder sb = new StringBuilder();
string sqlConnString = string.Format("Data Source={0};Initial Catalog={1};{2}", server, database, auth);
//stored procedure
string L_QueryApps = query;
object value = new object();
DataTable appDetail = new DataTable();
SqlConnection sqlAppConnection = new System.Data.SqlClient.SqlConnection(sqlConnString);
SqlDataAdapter sqlAppDataAdapter = new System.Data.SqlClient.SqlDataAdapter();
System.Data.SqlClient.SqlCommand sqlSelectAppCommand = new System.Data.SqlClient.SqlCommand(L_QueryApps, sqlAppConnection);
sqlAppDataAdapter.SelectCommand = sqlSelectAppCommand;
sqlAppDataAdapter.Fill(appDetail);
if (appDetail != null && appDetail.Rows != null && appDetail.Rows.Count >= 3)
{
string strType = string.Empty;
string strDemandDollar = string.Empty;
string strDemandPercentage = string.Empty;
string rowData = string.Empty;
int i = 0;
//double currValue;
//string currFormat = "C0";
string strArrayData = string.Empty;
foreach (DataRow dr in appDetail.Rows)
{
strType = appDetail.Rows[i][1].ToString();
//strDemandDollar = appDetail.Rows[i][2].ToString();
string currencyValue = string.Empty;
if (appDetail.Rows != null && appDetail.Rows[i] !=null)
{
currencyValue = appDetail.Rows[i][2].ToString();
}
DataColumnFormatWithCurrency(appDetail.Rows[i], ref strDemandDollar, ref value, 2, "en-CA", "C0");
//strDemandPercentage = string.Format("{0}%", appDetail.Rows[i][3].ToString());
DataColumnFormatWithPercentage(appDetail.Rows[i], ref strDemandPercentage, ref value, 3);
//Loop Items
if (i == appDetail.Rows.Count - 1 && strArrayData.Length>0)
{
//Remove last char in the string.
strArrayData = strArrayData.Remove(strArrayData.Length - 1);
}
else
{
strArrayData += string.Format("['{0} ({1}) - {2}', {3}],", strType, strDemandPercentage, strDemandDollar, currencyValue);
}
//sb.AppendLine(rowData);
i++;
}
sb.AppendLine("");
sb.AppendLine("");
}
return sb;
}
