HTML Table based Charts:
The technique used below is to generate line charts with the help of html tables and 3d images. It draws the table calibrate a 3d image to fit in the row as per the given x\y axis value. Hence become very lightweight and supported on any .net framework\ other platforms. Below is the sample screen shot
Please see the complete details about the code at http://manishsati.blogspot.com/2010/04/html-table-based-chart-control-in.html
public partial class SMDashboardChart : System.Web.UI.UserControl
{
private String _sXAxisTitle="X-Axis Title";
private String _sChartTitle="Chart Title";
private int _ichartWidth = 500;
private String[] _sXAxisValues;
private int[] _iYAxisValues;
private int _iColumnWidth = 30;
private string strErrMsg = "Data is not available to display on the chart";
public string ErrorMessage
{
set { this.strErrMsg = value; }
}
public int Chartwidth
{
get { return _ichartWidth; }
set { _ichartWidth = value; }
}
public int ColumnWidth
{
get { return _iColumnWidth; }
set { _iColumnWidth = value; }
}
public int[] YAxisValues
{
get { return _iYAxisValues; }
set { _iYAxisValues = value; }
}
public String[] XAxisItems
{
get { return _sXAxisValues; }
set { _sXAxisValues = value; }
}
public String XAxisTitle
{
get { return _sXAxisTitle; }
set { _sXAxisTitle = value; }
}
public String ChartTitle
{
get { return _sChartTitle; }
set { _sChartTitle = value; }
}
///<summary>
/// draw the graph
///</summary>
public void DrawGraph()
{
// As long as we have values to display, do so
if (_iYAxisValues != null)
{
// Color array
String[] sColor = new String[5];
sColor[0] = "Images/rowbk-B.JPG";
sColor[1] = "Images/rowbk-G.JPG";
sColor[2] = "Images/rowbk-P.JPG";
sColor[3] = "Images/rowbk-R.JPG";
sColor[4] = "Images/rowbk-y.JPG";
// Initialize the color category
int iColor = 0;
// Get the largest value from the available items
int iMaxVal = 0;
for (int i = 0; i < _iYAxisValues.Length; i++)
{
if (_iYAxisValues[i] > iMaxVal)
iMaxVal = _iYAxisValues[i];
}
// Take the user-provided maximum width of the chart, and divide it by the
// largest value in our valueset to obtain the modifier
//add one in the result if imod becomes zero to aviod divison by zero
if (iMaxVal > 0)
{
int iMod = Math.Abs(_ichartWidth / iMaxVal) ;
// This will be the string holder for our actual bars.
string sOut = "";
// Render a bar for each item
for (int i = 0; i < _iYAxisValues.Length; i++)
{
// Only display this item if we have a value to display
if (_iYAxisValues[i] >= 0)
{
sOut += "<tr><td align=right style=font-size:11px nowrap=false>" + _sXAxisValues[i] + " </td>";
//call function DRAWCOLUMN here
sOut += "<td class='styleBG'>" + DrawColumn(_iYAxisValues[i], iMaxVal, iMod, sColor[iColor], _sXAxisValues[i]) +
"</td></tr><tr><td height=10></td><td height=10></td></tr>";
iColor++;
// If we have reached the end of our color array, start over
if (iColor > 4) iColor = 0;
}
}
// Place the rendered string in the appropriate label
div1.InnerHtml = "<table class='ChartTable' align =center cellpadding=5><tr><td align=center style=font-size:13px>" + _sChartTitle +"<table cellspacing=0 cellpadding=0 >" + sOut + "</table></td></tr></table></td></tr>" +"<tr><td colspan=2 align=center style=font-size:13px>" + _sXAxisTitle + "</td></tr><TR><TD> </TD></TR></table>";
}
else
{
div1.InnerHtml = "<TABLE class ='ChartTable'><TR><TD align=center style=font-size:11px>" +
this.strErrMsg + "</TD></TR></TABLE>";
}
}
}
///<summary>
/// draws the columns of the chart
///</summary>
///<param name="iVal">value of the column</param>
///<param name="iMaxVal">maxumum value in the dataset</param>
///<param name="iMod">modifier value</param>
///<param name="sColor">path of the various images</param>
///<returns></returns>
private String DrawColumn(int iVal, int iMaxVal, int iMod, String sColor, string yval)
{
if (iMod <= 0)
iMod = 1;
//get the modified width of the column
int iWidth = iVal * iMod;
//if modified width is greater than chart width than divide it unless the value is not less than chart width
while (iMaxVal * iMod > _ichartWidth)
{
iWidth = Convert.ToInt32(iWidth / 1.5);
iMaxVal = Convert.ToInt32(iMaxVal / 1.5);
}
string tooltip = iVal.ToString();
StringBuilder sRet = new StringBuilder();
sRet.Append("<table border=0 cellpadding=0 cellspacing=0><tr><td bgcolor=#104983>");
sRet.Append("<img title=" + tooltip + " src='" + sColor + "' complete='complete' height=" + ColumnWidth + " width=" + iWidth + "/></td>");
sRet.Append("<TD style=font-size:11px>" + iVal + "</TD><TR></table>");
// sRet.Append("<TR></table>");
return sRet.ToString();
}
}