I'm using Google Chart with EmberJS 2. I don't use component cause don't support promises I needed, so I created a service. And I'm using two charts on the same callback. Follow a fiddle to show code work and a print when don't work in my application.
var reviews = [{
"creation": { "created": 1421881568000 },
"statistics": { "rating": 2 }
},
{
"creation": { "created": 1415449027000 },
"statistics": { "rating": 5 }
},
{
"creation": { "created": 1381797902000 },
"statistics": { "rating": 1 }
},
{
"creation": { "created": 1378908249000 },
"statistics": { "rating": 5 }
},
{
"creation": { "created": 1376907381000 },
"statistics": { "rating": 4 }
},
{
"creation": { "created": 1372939458000 },
"statistics": { "rating": 4 }
},
{
"creation": { "created": 1350954490000 },
"statistics": { "rating": 5 }
},
{
"creation": { "created": 1350954289000 },
"statistics": { "rating": 1 }
},
{
"creation": { "created": 1322225085000 },
"statistics": { "rating": 5 }
}];
google.charts.load('43', {'packages':['corechart']});
google.charts.setOnLoadCallback(function() {
var ratingByDate, dataToPie, dataToLine, options, lineChart, pieChart;
dataToPie = new google.visualization.DataTable();
dataToPie.addColumn('string', 'Avali\ç\ões');
dataToPie.addColumn('number', 'Total');
dataToPie.addRows([
["1 estrela", 1],
["2 estrelas", 2],
["3 estrelas", 1],
["4 estrelas", 2],
["5 estrelas", 4]
]);
pieChart = new google.visualization.PieChart($('.pie-chart')[0]);
pieChart.draw(dataToPie, {
title: 'Porcentagem das 50 avalia\ç\ões',
pieHole: 0.3,
height: 300,
width: 400,
colors: ['#BBBBBD', '#F00745', '#C00337', '#5A4237', '#EE0B56'],
tooltip: { isHtml: true},
});
ratingByDate = reviews.map(review => [
new Date(review.creation.created),
+review.statistics.rating
]);
dataToLine = new google.visualization.DataTable();
dataToLine.addColumn('date', 'Data');
dataToLine.addColumn('number', 'Avaliações');
dataToLine.addRows(ratingByDate);
lineChart = new google.visualization.LineChart($('#lineChart')[0]);
lineChart.draw(dataToLine, {
title: 'Avaliações',
legend: { position: 'bottom' },
curveType: 'function',
pointSize: 3,
pointsVisible: true,
crosshair: { trigger: 'both' }
});
});
<script src="http://ift.tt/1JDUibz"></script>
<script src="http://ift.tt/1oMJErh"></script>
<div class="pie-chart"></div>
<div id="lineChart"></div>
The Fiddle is much close which I do in my application.
Aucun commentaire:
Enregistrer un commentaire