Create simple spark column chart from database using javascript in asp.net

Create simple spark column chart from database using javascript in asp.net

3:28:00 PM
Description:-

Spark charts are data-intensive, design-simple, word-sized graphics charts for embedding in a context of words, numbers and images.
In this section, you will be introduced to the:

1.       Basics of spark charts
2.       Types of spark charts
3.       Features of spark charts

Basics of Spark Charts

A typical chart is designed to show as much data as possible and is set off from the flow of text. A spark chart, however, is intended to be succinct, memorable, and located where they are discussed. The charts are used inline, which means that they are about the same height as the surrounding text. Spark charts can be intensively used in space-efficient executive dashboards to show a lot of KPIs in a single view.

Types of Spark Charts

The FusionCharts Suite XT offer three types of spark charts:

·         Spark Line Chart
·         Spark Column Chart
·         Spark Win-Loss Chart

Download File:- Fusioncharts.widgets.js, Fusioncharts.js

 Create Table:- 

CREATETABLE [dbo].[ZoomLine_Mst](
 [Day] [nvarchar](50)NOTNULL,
 [value] [int] NOTNULL
)ON [PRIMARY]

GO

Default.aspx:-

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
  <script src="JS/fusioncharts.widgets.js"type="text/javascript"></script>
  <script src="JS/fusioncharts.js"type="text/javascript"></script>
</head>
<body>
<form id="form1"runat="server">
<div>
  <asp:Literal ID="lt" runat="server"></asp:Literal>
  <div id="chart-container">Charts will Display here</div>
</div>
</form>
</body>
</html>

Default.aspx.cs:-

 
SqlConnection conn = new SqlConnection("ConnectionString");
protected void Page_Load(object sender, EventArgs e)
{
  BindChart();
}


private DataTable GetData()
{
  DataTable dt = new DataTable();
  string cmd = "SELECT top 30 Day,value FROM ZoomLine_Mst";
  SqlDataAdapter adp = new SqlDataAdapter(cmd, conn);
  adp.Fill(dt);
  return dt;
}


private void BindChart()
{
  DataTable dt = newDataTable();
  StringBuilder str = newStringBuilder();
  try
  {
     dt = GetData();

     str.Append(@" <script type='text/javascript'>
         FusionCharts.ready(function () {
           var sparkchart = new FusionCharts({
           type: 'sparkcolumn',
           renderAt: 'chart-container',
           width: '400',
           height: '100',
           dataFormat: 'json',
           dataSource: {
              ");
           str.Append("\"chart\":{ " + Environment.NewLine);
           str.Append("\"caption\": \"Revenue by Month\", " + Environment.NewLine);
           str.Append("\"subCaption\": \"Last year\"," + Environment.NewLine);
           str.Append("\"numberPrefix\": \"$\"," + Environment.NewLine);
           str.Append("\"canvasBorderThickness\": \"0\"," + Environment.NewLine);
           str.Append("\"canvasleftmargin\": \"145\"," + Environment.NewLine);
           str.Append("\"chartTopMargin\": \"10\"," + Environment.NewLine);
           str.Append("\"chartRightMargin\": \"10\"," + Environment.NewLine);
           str.Append("\"showBorder\": \"0\"," + Environment.NewLine);
           str.Append("\"showCanvasBorder\": \"1\"," + Environment.NewLine);
           str.Append("\"bgColor\": \"#ffffff\"," + Environment.NewLine);
           str.Append("\"plotFillColor\": \"#0075c2\"," + Environment.NewLine);
           str.Append("\"highColor\": \"#1aaf5d\"," + Environment.NewLine);
           str.Append("\"lowColor\": \"#8e0000\"," + Environment.NewLine);
           str.Append("\"showHoverEffect\": \"1\"" + Environment.NewLine);
           str.Append("}," + Environment.NewLine);
           str.Append("\"dataset\": [" + Environment.NewLine);
           str.Append("{" + Environment.NewLine);
           str.Append("\"data\": [" + Environment.NewLine);
    int count = dt.Rows.Count - 1;
    for (int i = 0; i <= count; i++)
    {
      if (count == i)
      {
         str.Append("{\"value\":\"" + dt.Rows[i]["value"].ToString() + "\"}" + Environment.NewLine);
      }
      else
      {
         str.Append("{\"value\":\"" + dt.Rows[i]["value"].ToString() + "\"}," + Environment.NewLine);
      }
    }
          str.Append("]" + Environment.NewLine);
          str.Append("}" + Environment.NewLine);
          str.Append("]" + Environment.NewLine);
          str.Append("}" + Environment.NewLine);
          str.Append("})" + Environment.NewLine);
          str.Append(".render();" + Environment.NewLine);
          str.Append("});" + Environment.NewLine);
          str.Append(" </script>");
          lt.Text = str.ToString();
   }
   catch (Exception ex)
   { }
}

Umesh Patel

Related Posts

Next
« Prev Post
Previous
Next Post »

Thanks for comments.....