locked
Pass JSON data to JavaScript RRS feed

  • Question

  • User-1821620314 posted

    I want to create a Fusion Column Chart by taking values from Database. For that I am using JSON.

    My Database Table name is Student with Sid, Sname and Smarks columns.

    I have done the following coding.

    Declaration of 2 variables and DataTable Object.

    DataTable dt = new DataTable();
    public string JSON_X { get; set; }
    public string JSON_Y { get; set; }

    For X Axis of the chart.

    public string PassJSON_X(DataTable dt)
    {
          SqlDataAdapter ad = new SqlDataAdapter("select Sname from Student", con);
          ad.Fill(dt);
          JSON_X = JsonConvert.SerializeObject(dt);
          return JSON_X;
    }

    For Y Axis of the chart.

    public string PassJSON_Y(DataTable dt)
    {
          SqlDataAdapter ad = new SqlDataAdapter("select Smarks from Student", con);
          ad.Fill(dt);
          JSON_Y = JsonConvert.SerializeObject(dt);
          return JSON_Y;
    }

    I have called both the methods in Page_Load() method.

    The JavaSript code is

    <script type="text/javascript">
            const dataSource = {
                chart: {
                    caption: "Student wise Marks",
                    subcaption: "Out of 100",
                    xaxisname: "Student Name",
                    yaxisname: "Student Marks",
                    theme: "fusion"
                },
                data: [
                    {
                        label: <%=JSON_X%>,
                        value: <%=JSON_Y%>,
                    }
                ]
            };
    
            FusionCharts.ready(function () {
                var myChart = new FusionCharts({
                    type: "column2d",
                    renderAt: "chart-container",
                    width: "100%",
                    height: "100%",
                    dataFormat: "json",
                    dataSource
                }).render();
            });
        </script>

    I have used CDNs as

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <!-- FusionCharts -->
        <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <!-- jQuery-FusionCharts -->
    <script type="text/javascript" src="https://rawgit.com/fusioncharts/fusioncharts-jquery-plugin/develop/dist/fusioncharts.jqueryplugin.min.js"></script>
    <!-- Fusion Theme -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>

    I want to display 'Sname' as X Axis labels and columns based on values of 'Smarks' on Y Axis. For that I want 'Sname' in front of label and 'Smarks' in front of value in JavaScript code

    I kindly request to provide me the perfect solution ASAP.

    Thursday, December 31, 2020 12:05 PM

All replies

  • User753101303 posted

    Hi,

    Look at what actually happens rather than reading the code (F12 Console doesn't show an error message?)

    For now data seems an array with a single object having label and value properties each being an array which is not what I would expect. Create a Chart Using FusionCharts | FusionCharts seems to confirm this ie it should be a single array each object having both a label and value property.

    So I would rather try something such as:
    - having a single SQL statement such as "select Sname AS label, Smarks as value FROM Student"
    - and having data:<%=JSON%>

    Thursday, December 31, 2020 1:40 PM
  • User-1821620314 posted

    I am using CDN directly. There is a single array as 'Data'. The statement you have given is not working.  

    Friday, January 1, 2021 6:07 AM
  • User753101303 posted

    Same ie don't stop at seeing that "it doesn't wokr". If not seeing any error message, use browser tools to check for JavaScript or file errors (ie F12 Console or F12 Network) or the JavaScript debugger etc... to see what happens.

    Else others have to spend few minutes to try and as I see here it may work or fail for some other reason...

    Do you really use ASP.NET Core or rather Web Forms? Maybe a confusion between the <%=value%> syntax for ASPX and the @value syntax for Razor?

    I tried with ASPX, data: <%=JSON%> and a test page such as:

        public partial class _Default : Page
        {
            public string JSON { get; set; }
            protected void Page_Load(object sender, EventArgs e)
            {
                var dt = new DataTable();
                dt.Columns.Add("label");
                dt.Columns.Add("value", typeof(int));
                dt.Rows.Add("A", 10);
                dt.Rows.Add("B", 15);
                JSON= JsonConvert.SerializeObject(dt);
            }
        }
    

    and it works. Could you confirm if you are using ASP.NET Core with Razor?

    Friday, January 1, 2021 10:48 AM
  • User-1821620314 posted

    I don't want to create a DataTable. I am fetching values from SQL Table whose name is Student in object of DataTable.

    On front end after Inspecting code I am getting following messages in Console.

    DevTools failed to load SourceMap: Could not load content for https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE


    DevTools failed to load SourceMap: Could not load content for http://localhost:3052/3.16.0/map/eval/fusioncharts.common.js.map: Connection error: net::ERR_CONNECTION_REFUSED


    DevTools failed to load SourceMap: Could not load content for http://localhost:3052/3.16.0/map/eval/fusioncharts.charts.js.map: Connection error: net::ERR_CONNECTION_REFUSED

    But the thing is when I put other data in front of label and value inside Data, then it is working neatly.

    Friday, January 1, 2021 11:17 AM
  • User753101303 posted

    Map files are to help debugging minimized js files. Shouldn't be a problem.

    I'm using a shortcut to avoid having to create a db and a table for testing but as I told earlier you should get the same result with:

    public string PassJSON_X(DataTable dt)
    {
          SqlDataAdapter ad = new SqlDataAdapter("select Sname AS label,Smarks AS value from Student", con);
          ad.Fill(dt); // at this step you have a DataTable with label and value columns as in my sample
          JSON_X = JsonConvert.SerializeObject(dt);
          return JSON_X;
    }

    You both assign the property and return the value which is likely uneeded. Perhaps PassJSON_X is not called from an appropriate place.

    If still seeing nothing obvious I would have a look at the generated code. Do you see something such as:  (edit: by using "view source" in your browser)

            },
            data: [{"label":"A","value":10},{"label":"B","value":15}]
         }
    

    Debugging is also about "closing doors" and it could help to understand if you still have a problem in rendering the correct data shape to your JavaScript code or if this is another problem (likely earlier if incorrect, later if this part is fixed). BTW you have a <div id="chart-container"></div> in your markup?

    Friday, January 1, 2021 12:53 PM