[Chartjs]-Reopening a "ChartJS" chart in a new window (VS, C#, ChartJS)

by

2👍

✅

Yeah, all the instances of charts are can be accessed through the Chart.instances variable, you can use pass these value from one page to another page using several JS methods such as localStorage, keyValue pair etc.

Once you can access the Chart.instances variable in the other page, just loop through and create charts passing the using the config property of Chart.instances. See the below code where I have copied a chart using Chart.instances. Here I have created a fixed canvas placeholder for the chart, you can create that also dynamically or create four canvas placeholders in the other page beforehand. Fiddle -> http://jsfiddle.net/Lzo5g01n/7/

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255,99,132,1)',
      borderWidth: 1
    }, {
      label: '# of Votes1',
      data: [17, 9, 13, 9, 20, 13],
      backgroundColor: 'rgba(54, 162, 235, 0.2)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1
    }, {
      label: '# of Votes2',
      data: [1, 6, 13, 12, 20, 5],
      backgroundColor: 'rgba(255, 206, 86, 0.2)',
      borderColor: 'rgba(255, 206, 86, 1)',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

function copyChart() {  
  Chart.helpers.each(Chart.instances, function(instance) {
    var ctxCopy = document.getElementById("myChartCopy").getContext('2d');
    new Chart(ctxCopy, instance.config);
  });
}

Leave a comment