Using Database Variables In JS?

Question

User768461249 posted

Hello,

I am new to Web-Development and am working on a website to display data for a company and its employees. The front-end side of my website is ready. I am working on displaying data from the database in charts, specifically using the Google Charts web service. Now the problem I am running into is that I need to store all the data in my database in an array and pass that array into JS so that I can use it to display the data visually.

What is my best approach to this?

I have looked for hours for online fourms/threads on this topic and cannot find any.

Thanks!

Answer 1

User475983607 posted

Hello,

I am new to Web-Development and am working on a website to display data for a company and its employees. The front-end side of my website is ready. I am working on displaying data from the database in charts, specifically using the Google Charts web service. Now the problem I am running into is that I need to store all the data in my database in an array and pass that array into JS so that I can use it to display the data visually.

What is my best approach to this?

I have looked for hours for online fourms/threads on this topic and cannot find any.

Thanks!

We need a bit more information to steer you in the right direction.

Do you have a database that holds the chart data and do you know how to query the data?  

What kind of application is this?  Is it Web Forms?  MVC?  SPA?

Answer 2

User768461249 posted

Yes, I have the database and have the query ready to grab the right information. The kind of application I am currently using is Web Forms in VS.

Thanks.

Answer 3

User475983607 posted

Yes, I have the database and have the query ready to grab the right information. The kind of application I am currently using is Web Forms in VS.

Simple, fetch the data on page load or whatever event causes the chart to load.  I imagine you would use Entity Framework or ADO.NET to fetch the data.  The Getting Started tutorials from the Learn link above explain how to fetch data if you are not sure how to write the code.

https://www.asp.net/web-forms/overview/presenting-and-managing-data

The next step is formatting the result set into the format expected by Google Charts which is JSON.  I would use Newtonsoft to convert an object to JSON format. 

https://www.newtonsoft.com/json/help/html/SerializingJSON.htm

Then simply render the JSON result directly in the JavaScript on the server.

Another option is crafting a Web Method and invoking the Web Method from JavaScript.  The Web Method queries the database and returns the chart data to your client application.  your client application assigns the data to the chart.  

https://www.aspsnippets.com/Articles/Calling-ASPNet-WebMethod-using-jQuery-AJAX.aspx

https://docs.microsoft.com/en-us/aspnet/web-forms/overview/older-versions-getting-started/aspnet-ajax/understanding-asp-net-ajax-web-services

Google charts support explains how to call external services form the API. 

Answer 4

User768461249 posted

Thanks you for your help! I appreciate it!