I'm Kaushik.
I want to generate a column type chart using the amcharts chart api on an asp.net webpage, say, "display.aspx". The requirement is that the chart takes data in the form of "json" data and draw a graph. My requirement is to retrieve the data from sql server and then produce that data into json and thus populate the chart with the generated json data. I did the same. But, i'm not successful as there is no chart that is being shown on the webpage when I ran the website in visual studio. Here, are the two code files that I have : JSONData.aspx and JSONData.aspx.cs
This is the JSONData.aspx page that I have.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JSONData.aspx.cs" Inherits="New_DataQuest.JSONData" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<%--<script type="text/javascript">
$('Button1').click(function () {
$.ajax({
type: "POST",
url: "/JSONData.aspx.cs/GetJsonData",
data: "[]",
contentType: "application/json;chartset=utf-8",
dataType: "json",
async: true,
cache: false,
});
return false;
});
</script>--%>
<script type="text/javascript">
// code to draw the chart in javascript as given in the website "http://www.amcharts.com/tutorials/your-first-chart-with-amcharts/"
$(AmCharts).ready(function () {
var chart = new AmCharts.AmSerialChart();
var j = '<%=GetJsonData()%>';//this statement should get the json data from code behind page to the variable "j"
chart.dataProvider = j;//the json data in the var j is given to the data provider.
chart.categoryField = "subject";
var graph = new AmCharts.AmGraph();
graph.valueField = "marks";
graph.type = "column";
chart.addGraph(graph);
//var categoryAxis = chart.categoryAxis;
//categoryAxis.autoGridCount = false;
//categoryAxis.gridCount = chart.dataProvider.length;
//categoryAxis.gridPosition = "start";
//categoryAxis.labelRotation = 90;
//graph.fillAlphas = 0.2;
chart.write('chartdiv');
});
</script>
<%--This code is to check whether the json data from the code behind file is getting generated or not. --%>
<%--<script>
var js = '<%=jsondata%>';
$(document).ready(function () {
alert(js);
});
</script>--%>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Show JSON data" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Draw Chart" />
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<div id="chartdiv" style="width:1300px;height:500px"></div>
</div>
</form>
</body>
</html>- Here, is the second page, the code behind file JSONData.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Data.SqlClient;
using System.Data.Sql;
using System.Text;
using System.Web.Services;
namespace New_DataQuest
{
public partial class JSONData : System.Web.UI.Page
{
public string jsondata = GetJsonData();
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]//webmethod for a static getjsondata function so that the method can be accessed using jquery in aspx page.
public static string GetJsonData()
{
//sql connection
SqlConnection con = new SqlConnection();
con.ConnectionString = "Initial Catalog=asti;Data Source=KAUSHIK;user ID=sa;password=kaushik1993";
string query = "select [Subject Name], [Total] from [asti_data] where [Year]='1' and [Student ID]='11M91A0527'";
con.Open();
SqlCommand cmd = new SqlCommand(query, con);
SqlDataReader dr;
dr = cmd.ExecuteReader();
//create a JSON string to describe the data from the database
StringBuilder JSON = new StringBuilder();
string prefix = "";
JSON.Append("[");
while(dr.Read())
{
JSON.Append(prefix+"{");
JSON.Append("\"subject\":"+"\""+dr[0]+"\",");
JSON.Append("\"marks\":" + dr[1]);
JSON.Append("}");
prefix = ",";
}
JSON.Append("]");
return JSON.ToString();
}
protected void Button1_Click(object sender, EventArgs e)
{
//Response.Write(jsondata);
}
protected void Button2_Click(object sender, EventArgs e)
{
}
}
}Here, is the sample database picture that i would like to attach. Visit this link to get the picture. "https://drive.google.com/file/d/0B-JER42be41TSGJmVVV3bXJEcEk/view?usp=sharing"
The main aim is to generate the data from the database and convert it into JSON data and populate the chart's "dataProvider" property/method with this JSON data in order to draw a chart. Basically, the x-axis would contain the subjects and the y-axis would contain the marks secured by the student.
Now, I would like to know what is actually going wrong in the coding part. I would be really thankful to those who would share their valuable time in answering this question. Thank you so much.
