Google Chart API

The Google Chart API lets you dynamically generate charts with a URL string and embed these charts on a web page, or download the image for local or offline use. The Google Chart Tools enable adding live charts to any web page. They provide advantages such as a rich gallery of visualizations provided as image charts and interactive charts and they can read live data from a variety of data sources. Users embed the data and formatting parameters in an HTTP request, and Google returns a PNG image of the chart. Many types of chart are supported, and by making the request into an image tag the chart can be included in a web page.

Install the following,

Step1 - Create a web app with .NET

  • mkdir DemoGoogleChart
  • cd DemoGoogleChart
  • dotnet new mvc

Open the DemoGoogleChart folder in Visual Studio Code (VS Code) and select the Startup.cs file.

ASP.NET Core

Press Debug (F5) to build and run the program.

VS Code starts the Kestrel web server and runs your app. Notice that the address bar shows localhost:5000 .

ASP.NET Core

Step2

In VS Code, select the EXPLORER icon and then control-click (right-click) Controllers > New File and name the new file as PopulationController.cs.

ASP.NET Core

Add the following code.

  1. public class PopulationController: Controller
  2. {
  3. public IActionResult Index() {
  4. return View();
  5. }
  6. //This method is to return JSO data the population for each states.
  7. public JsonResult PopulationChart() {
  8. var populationList = PopulationDataHelper.GetUsStatePopulationList();
  9. return Json(populationList);
  10. }
  11. }

Step4

Return JSON Data from InMemory collection. Here, we can write the code to pull the data from different sources; i.e. DB or XML.

ASP.NET Core

Step5

Select the EXPLORER icon and then control-click (right-click) Views > New File and name the new file as Index.cshtml. Here, copy the below code.

  1. <title>@ViewData["Title"] - DemoGoogleChart</title>
  2. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  3. <div id="chart_div"></div>
  4. <script type="text/javascript">
  5. google.charts.load('current', {
  6. packages: ['corechart', 'bar']
  7. });
  8. google.charts.setOnLoadCallback(LoadData);
  10. function LoadData() {
  11. $.ajax({
  12. url: '@Url.Action("PopulationChart","Population")',
  13. dataType: "json",
  14. type: "GET",
  15. error: function(xhr, status, error) {
  16. var err = eval("(" + xhr.responseText + ")");
  17. toastr.error(err.message);
  18. },
  19. success: function(data) {
  20. PopulationChart(data);
  21. return false;
  22. }
  23. });
  24. return false;
  25. }
  27. function PopulationChart(data) {
  28. var dataArray = [
  29. ['City', '2010 Population', '2000 Population']
  30. ];
  31. $.each(data, function(i, item) {
  32. dataArray.push([item.cityName, item.populationYear2010, item.populationYear2000]);
  33. });
  34. var data = google.visualization.arrayToDataTable(dataArray);
  35. var options = {
  36. title: 'Population of Largest U.S. Cities',
  37. chartArea: {
  38. width: '50%'
  39. },
  40. colors: ['#b0120a', '#ffab91'],
  41. hAxis: {
  42. title: 'Total Population',
  43. minValue: 0
  44. },
  45. vAxis: {
  46. title: 'City'
  47. }
  48. };
  49. var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  50. chart.draw(data, options);
  51. return false;
  52. }
  53. </script>

Step 6

Edit the Views/Shared/_Layout page to add new menu; i.e. US Population Chart.

ASP.NET Core
  1. <div class="navbar-collapse collapse">
  2. <ul class="nav navbar-nav">
  3. <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
  4. <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
  5. <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
  6. <li><a asp-area="" asp-controller="Population" asp-action="Index">US Population Chart </a></li>
  7. </ul>
  8. </div>

Step 7

Now, run the application and click on the Players list from the start page.

ASP.NET Core

That's it. Thanks for reading.