Razor - Display Dictionary Data in a PieChart using JavaScript

Question

Razor - Display Dictionary Data in a PieChart using JavaScript

776 views Asked by Raymundo Salazar At 05 December 2024 at 17:27

I create a dictionary in the model, which has The City as Key and The numbers of Kids as Value (@Model.dictionary). I want to make the pie chart dinamically so How can I use the dicionary data instead of the static data in my drawChart function.

I hope you can help me, thanks a lot.

   <html>
    <head>

    </head>
    <body>
        <div id="piechart_3d" style="width: 900px; height: 500px;"></div>

        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
          google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawChart);


          function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['City', 'Kids per Day'],
              ['LA',    100000],
              ['NY',    100000]
            ]);

            var options = {
              title: 'Kids per City',
              is3D: true,
            };

            var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
            chart.draw(data, options);
          }
        </script>
    </body>
    </html>

Original Q&A

There are 1 answers

**adricadar** · Accepted Answer · 2015-06-24 06:23:14

You can create a javascript array using razor, using this answer that converts a List to arra,y you can convert from Dictionary very easy:

var array = [@Html.Raw(String.Join(",", Model.dictionary.Select(x => "['" + x.Key + "', '" + x.Value +"']")))];

This will create

[
   ['LA',    100000],
   ['NY',    100000]
]

And you use it like this, with few modifications.

function drawChart() {
    var javaScriptArray = @Html.Raw(Json.Encode(Model.YourDotNetArray));


    var data = google.visualization.arrayToDataTable([
      ['City', 'Kids per Day'],
      @Html.Raw(String.Join(",", Model.dictionary.Select(x => "['" + x.Key + "', '" + x.Value +"']")))
    ]);

    var options = {
      title: 'Kids per City',
      is3D: true,
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
    chart.draw(data, options);
  }

TechQA.

Razor - Display Dictionary Data in a PieChart using JavaScript

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in C#

Related Questions in RAZOR

Related Questions in DICTIONARY

Related Questions in PIE-CHART

Popular Questions

Popular Tags

Trending Questions