title: Multiple Chart.js Charts in Partial Views Overwriting Each Other
body: <p>Using Asp.Net MVC, I am trying to create a web page that displays multiple bar charts on a single page using the <a href="http://www.chartjs.org/docs/#bar-chart" rel="nofollow noreferrer">chart.js</a> library. Each chart has different data and is created in its own partial view. Instead of creating multiple different charts though, the last chart data is overwriting the first chart on the page, and all the remaining charts appear blank. As you can see in the picture below, the "Title and Segments" data and legend overwrote the "Producers" data, and the "Title and Segments" chart is empty.</p>
  
  <p><a href="https://i.stack.imgur.com/XNBtQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XNBtQ.png" alt="enter image description here"></a></p>
  
  <p>On the main view page, I use a foreach loop to render the same partial view for each report.</p>
  
  <pre><code>@foreach (Report report in Model.Reports)
  {
      @Html.Partial("BarChartPartialView", report);
  }
  </code></pre>
  
  <p>In my partial view, I create a dynamic ID name for the canvas object based on a value in the Model. This was an attempt to overcome the issue mentioned in <a href="https://stackoverflow.com/questions/24673622/chart-js-multiple-line-charts-only-show-last-chart#24675646">Chart.js - Multiple Line Charts - Only Show Last Chart</a>.</p>
  
  <pre><code>@{
      string name = "canvas" + Model.CurrentReport.ID;
  }
  </code></pre>
  
  <p>I then create a canvas object using the dynamic ID.</p>
  
  <pre><code>&lt;canvas id="@name"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>In the chart.js script that is also in my partial view, I used eval() to create dynamic ctx and myBar variables. (Source of idea: <a href="https://stackoverflow.com/questions/5944749/how-do-i-declare-and-use-dynamic-variables-in-javascript">How do i declare and use dynamic variables in javascript?</a>)</p>
  
  <pre><code>&lt;script&gt;
      var barChartData = {
          labels: [@Html.Raw(Model.Labels)],
          datasets: [@Html.Raw(Model.Data)]
      };
  
      $(document).ready(function () {      
          eval("var ctx" + "@name" + "=document.getElementById('@name').getContext('2d');");
  
          var temp = new Chart(eval('ctx' + '@name'), {
              type: 'bar',
              data: barChartData,
              options: {
                  elements: {
                      rectangle: {
                          borderWidth: 2,
                          borderColor: 'rgb(0, 255, 0)'
                      }
                  },
                  legend: {
                      position: 'bottom'
                  },
                  title: {
                      display: true,
                      text: '@Model.CurrentReport.Name'
                  }
              }
          });
  
          eval('window.myBar' + '@name' + "= temp;");
      });
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <p>I've seen other similar questions, yet none seemed to have a solution for my problem:<br>
  <a href="https://stackoverflow.com/questions/24555823/multiple-chartjs-in-the-same-page/35093197#35093197">multiple chartjs in the same page</a><br>
  <a href="https://stackoverflow.com/questions/18860445/rendering-html5-charts-in-partial-views-show-only-blank-data">Rendering HTML5 Charts in partial views show only blank data</a></p>