Draw same google chart on the same page MVC - model-view-controller

Question

Hi there I am trying to display the same google chart on the same page. Here is my current code
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Bar chart
google.charts.load('current', { packages: ['corechart', 'bar'] });
google.charts.setOnLoadCallback(Mygraph);
function Mygraph() {
$.ajax({
async: false,
url: "GetGraph",
dataType: "json",
success: function (jsonData) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Question');
data.addColumn('number', 'My Perfomance');
data.addColumn('number', 'Peers Performance');
for (var i = 0; i < jsonData.length; i++) {
data.addRow([jsonData[i].rateName, jsonData[i].myRate, jsonData[i].peerRate]);
}
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "interval",
},
2, {
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "interval"
}]);
var options = {
title: '',
chartArea: { width: '50%' },
backgroundColor: '#ffffff ',
hAxis: {
title: 'Rating',
minValue: 0,
textStyle: {
bold: true,
fontSize: 12,
color: '#4d4d4d'
},
titleTextStyle: {
bold: true,
fontSize: 18,
color: '#4d4d4d'
}
},
vAxis: {
title: 'Performance',
textStyle: {
fontSize: 14,
bold: true,
color: '#848484'
},
titleTextStyle: {
fontSize: 14,
bold: true,
color: '#848484'
}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
});
}
</script>
Question is how to I display the same graph twice. Currently the graph is only showing once. I want it to display twice. I am using Google graphs api Please help. Looking forward to hearing from you. Thanks for your help