Как нарисовать динамический график на основе JSON с помощью API amcharts в asp.net?

Я Каушик.

Я хочу создать диаграмму типа столбца, используя api диаграммы amcharts на веб-странице asp.net, скажем, "display.aspx". Требование состоит в том, что диаграмма принимает данные в форме данных "json" и рисует график. Мое требование состоит в том, чтобы получить данные с сервера sql, а затем преобразовать эти данные в json и заполнить диаграмму сгенерированными данными json. Я сделал то же самое. Но я не увенчался успехом, поскольку на веб-странице не было диаграммы, которая отображалась при запуске веб-сайта в визуальной студии. Вот два файла кода, которые у меня есть: JSONData.aspx и JSONData.aspx.cs

Это страница JSONData.aspx, которая у меня есть.

<%@ 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>

  1. Здесь находится вторая страница, код файла 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)
        {
            
        }
        
    }
}

Вот пример изображения базы данных, которое я хотел бы прикрепить. Посетите эту ссылку, чтобы получить картину. " https://drive.google.com/file/d/0B-JER42be41TSGJmVVV3bXJEcEk/view?usp=sharing "

Основная цель состоит в том, чтобы сгенерировать данные из базы данных и преобразовать их в данные JSON и заполнить свойство / метод диаграммы "dataProvider" этими данными JSON, чтобы нарисовать диаграмму. В основном, ось X будет содержать предметы, а ось Y будет содержать метки, закрепленные студентом.

Теперь я хотел бы знать, что на самом деле идет не так в части кодирования. Я был бы очень благодарен тем, кто поделится своим ценным временем в ответе на этот вопрос. Огромное спасибо.

Источник

1 ответ

Попробуйте проанализировать ваши данные JSON, что-то вроде

 chart.dataProvider = JSON.parse(j);

Это может быть работой для вас.

Источник
Другие вопросы по тегам