All geek questions in one place

Multiple Google Charts

I am trying to create several google charts but I cannot get it to work. I tried everything I could find on Stack Overflow. I recently tried to fix this , but it did not work. I think I'm missing something. Can someone see something wrong with the code as it is now?

Expected Behavior:

The page displays a histogram. Then, a line graph is displayed below the histogram.

Current behavior:

The page displays a histogram. The line graph is not displayed.

Here is the JSFiddle . On the side of the note, JavaScript seems to work inline in JSFiddle. If I moved it to a JavaScript section, it did not work properly. Maybe this has something to do with the external resource that was called?

Regardless of the fact I'm currently doing all this for this experiment.

HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="https://www.google.com/jsapi" type="text/javascript">
    </script>
    <script type="text/javascript">
    // Load the Visualization API and the chart packages.
    google.load('visualization', '1.1', {
        packages: ['line', 'bar', 'corechart']
    });
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
    // Callback that creates and populates a data table,
    // instantiates the charts, passes in the data and
    // draws them.
    function drawChart() {
        // Create the data table.
        var BarData = new google.visualization.arrayToDataTable([
            ['', 'Customer', 'Segment Avg'],
            ['TTM Sales', 4, 2],
            ['TTM Orders', 5, 3],
            ['TTM Categories', 7, 4]
        ]);
        // Create the data table.
        var LineData = new google.visualization.arrayToDataTable([
            ['Year', 'Customer', 'Segment Avg'],
            ['2011', 4, 5],
            ['2012', 5, 3],
            ['2013', 4, 2]
        ]);
        // Set chart options
        var BarOptions = {
            chart: {
                title: 'Performance',
            },
            width: 900,
            height: 500
        };
        // Set chart options
        var LineOptions = {
            chart: {
                title: 'Sales History'
            },
            width: 900,
            height: 500
        };
        // Instantiate and draw our chart, passing in some options.
        var BarChart = new google.charts.Bar(document.getElementById(
            'bar_chart'));
        BarChart.draw(BarData, BarOptions);
        var LineChart = new google.charts.Line(document.getElementById(
            'line_chart'));
        LineChart.draw(LineData, LineOptions);
    };
    </script>
    <title>Test Chart Page</title>
</head>
<body>
    <!--Divs that will hold the charts-->
    <div id="bar_chart"></div>
    <div id="line_chart"></div>
</body>
</html>
+4
source share
4 answers

It seems that some changes have been made to the latest version of the Google Charts API, which causes similar behavior, but there is a reliable way to display multiple charts on the same page. The idea is to display the next graph as soon as the previous one is displayed, for this purpose you can use an event handler ready.

Having said that, replace

var barChart = new google.charts.Bar(document.getElementById('bar_chart'));
barChart.draw(barData, barOptions);
var lineChart = new google.charts.Line(document.getElementById('line_chart'));
lineChart.draw(lineData, lineOptions);

from

var barChart = new google.charts.Bar(document.getElementById('bar_chart'));
google.visualization.events.addOneTimeListener(barChart, 'ready', function () {
      var lineChart = new google.charts.Line(document.getElementById('line_chart'));
      lineChart.draw(lineData, lineOptions);
});
barChart.draw(barData, barOptions);

Working example

google.load('visualization', '1.1', {
        packages: ['line', 'bar', 'corechart']
    });
    // Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawCharts);

function drawCharts() {
    // Create the data table.
    var barData = new google.visualization.arrayToDataTable([
        ['', 'Customer', 'Segment Avg'],
        ['TTM Sales', 4, 2],
        ['TTM Orders', 5, 3],
        ['TTM Categories', 7, 4]
    ]);
    // Create the data table.
    var lineData = new google.visualization.arrayToDataTable([
        ['Year', 'Customer', 'Segment Avg'],
        ['2011', 4, 5],
        ['2012', 5, 3],
        ['2013', 4, 2]
    ]);
    // Set chart options
    var barOptions = {
        chart: {
            title: 'Performance',
        },
        width: 900,
        height: 500
    };
    // Set chart options
    var lineOptions = {
        chart: {
            title: 'Sales History'
        },
        width: 900,
        height: 500
    };


    var barChart = new google.charts.Bar(document.getElementById('bar_chart'));
    google.visualization.events.addOneTimeListener(barChart, 'ready', function () {
        var lineChart = new google.charts.Line(document.getElementById('line_chart'));
        lineChart.draw(lineData, lineOptions);
    });
    barChart.draw(barData, barOptions);
};
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<div id="bar_chart"></div>
<div id="line_chart"></div>
Run codeHide result
+8
source

, setTimeout. , ,   .

fiddle

<script type="text/javascript">
    // Load the Visualization API and the chart packages.
    google.load('visualization', '1.1', {
        packages: ['line', 'bar', 'corechart']
    });
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
    // Callback that creates and populates a data table,
    // instantiates the charts, passes in the data and
    // draws them.
    function drawChart() {
        // Create the data table.
        var BarData = new google.visualization.arrayToDataTable([
            ['', 'Customer', 'Segment Avg'],
            ['TTM Sales', 4, 2],
            ['TTM Orders', 5, 3],
            ['TTM Categories', 7, 4]
        ]);
        // Create the data table.
        var LineData = new google.visualization.arrayToDataTable([
            ['Year', 'Customer', 'Segment Avg'],
            ['2011', 4, 5],
            ['2012', 5, 3],
            ['2013', 4, 2]
        ]);
        // Set chart options
        var BarOptions = {
            chart: {
                title: 'Performance',
            },
            width: 900,
            height: 500
        };
        // Set chart options
        var LineOptions = {
            chart: {
                title: 'Sales History'
            },
            width: 900,
            height: 500
        };
        // Instantiate and draw our chart, passing in some options.
        var BarChart = new google.charts.Bar(document.getElementById(
            'bar_chart'));

        var LineChart = new google.charts.Line(document.getElementById(
            'line_chart'));
        LineChart.draw(LineData, LineOptions);
        setTimeout(function(){


        BarChart.draw(BarData, BarOptions);
    },50);

        };
    </script>
    <body>
        <!--Divs that will hold the charts-->
        <div id="bar_chart"></div>
        <div id="line_chart"></div>
    </body>
+1

setTimeout:

// Instantiate and draw our chart, passing in some options.
var BarChart = new google.charts.Bar(document.getElementById(
    'bar_chart'));
setTimeout(function() {
  BarChart.draw(BarData, BarOptions);
}, 0);
var LineChart = new google.charts.Line(document.getElementById(
    'line_chart'));
setTimeout(function() {
  LineChart.draw(LineData, LineOptions);
}, 1e3);

JSFiddle

0

Source: https://habr.com/ru/post/1611621/

More articles:


All Articles