dimanche 19 avril 2015

clonig google pie chart with jquery triggers XMLHttpRequest error

I have a google pie chart which displays correctly on my page. Now I want to clone that chart in another div of my website. It's unfornuately throwing a XMLHttpRequest error :



XMLHttpRequest cannot load http://ift.tt/1JWNuXN. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://foodmeup.dev' is therefore not allowed access.



How can I overcomethis ?


My view :



<div id="piechart" style="height: 220px;"></div>
<div id="profile_completion_graph" class="responsive">
//the div in which I want to clone the graph
</div>

<script type="text/javascript">
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Nom', 'Valeur'],
["Profil rempli à ", {{ completeness }}],
['Manque', {{ 100 - completeness }}]
]);

var options = {
backgroundColor: { fill:'transparent'},
pieSliceBorderColor : 'transparent',
pieHole: 0.8,
legend: {position: 'top'},
width: 220,
height: 220,
tooltip: {trigger: 'none'},
pieStartAngle: -90,
pieSliceTextStyle :{fontsize : 16, color: 'transparent'},
slices: {
0: { color: '#09b4ff'},
1: { color: '#444'}
},
chartArea : {width: '90%', height: '90%'}
};

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);
}

google.load('visualization', '1', {callback : function(){drawChart();}, 'packages':['corechart']})


</script>

<script>
$(function(){
var $graphs = $('#chart_picture').clone();
$('#profile_completion_graph').eq(0).html($graphs);
});
</script>

Aucun commentaire:

Enregistrer un commentaire