Geeks With Blogs
Realizing Results my personal notes on C#, SharePoint and object oriented programming
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] + "&nbsp;</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>&nbsp;</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();
        }

    }

Posted on Thursday, September 16, 2010 5:26 PM | Back to top


Comments on this post: HTML table based chart control in ASP.NET\SharePoint

# re: HTML table based chart control in ASP.NET\SharePoint
Requesting Gravatar...
I'm trying to use your code to develop chart but you have used div1 and it is not declared anywhere.
Left by Linga Reddy Sama on Jan 21, 2011 4:35 PM

Your comment:
 (will show your gravatar)


Copyright © Manish Sati | Powered by: GeeksWithBlogs.net