CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvcgoogle-visualization
user5661230
user5661230

Reputation:

Google Chart not displaying with the correct height and width

I'm having this problem with my google graph displaying in the default size (width: 400px and Height: 200px) while I want it to be a different size. I'm wondering if this has something to do with it being In a partial view or something, but it does sometimes display correct if I change the size in the code and refresh. If you could help me out thanks in advance.

@model ProjectServerside.PresentationModels.PMData

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { packages: ['corechart', 'bar'] });
    google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
          var data = google.visualization.arrayToDataTable([
            ['Element', 'Count', { role: 'annotation' }],
            ['Threads',@Html.DisplayFor(model => model.ThreadCount), 'Threads'],
            ['Votes', @Html.DisplayFor(model => model.VoteCount), 'Votes'],
            ['Comments',@Html.DisplayFor(model => model.CommentCount), 'Comments'],
          ]);

          var options = {
              chart: {
                  title: 'Interest Performance',
                  subtitle: 'Threads, Votes, and Comments',
                  width: 900,
                  height: 500
              }              
          };

          var chart = new google.charts.Bar(document.getElementById('graph'));

          chart.draw(data, options);
      }
</script>
<div id="graph" style="width: 900px; height: 500px"></div>

is not missing since it's on the layout html file thus is included in the header. Again if you could help me with this thank you in advance.

This is how it displays on the page now

Upvotes: 0

Views: 1641

Answers (2)

Dr.Molle
Dr.Molle

Reputation: 117354

there are no width/height-properties for options.chart

You must define width and height as properties of options

var options = {
                  width: 900,
                  height: 500,
                  chart: {
                           title: 'Interest Performance',
                           subtitle: 'Threads, Votes, and Comments'                      
                         }              
              };

Upvotes: 1

AlexanderGriffin
AlexanderGriffin

Reputation: 515

Firstly, ensure you include the semi-colon after your height.

<div id="graph" style="width: 900px; height: 500px;"></div>

Upvotes: 0

Related Questions