mardi 1 mars 2016

Google charts don't display lines in LineChart

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