Google chart does not draw graph in Safari browser

37 views
Skip to first unread message

rodman publi

unread,
Jul 1, 2021, 4:11:23 PMJul 1
to Google Visualization API

Hi all,
I have an issue while using google chart, all the charts are working fine on other browser but having issue on safari browser.I mentioned my code and also attached screenshot of chrome and safari.Please help me to figure out the issue.

  <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>


Selection_133.png

Fenil Mendapara

unread,
Jul 6, 2021, 2:28:53 PMJul 6
to Google Visualization API
also my google char is not show on safari
<script>
    // chart map
    var visitor = <?php echo $visitor ?>; // load google charts
    google.charts.load('current', {
        packages: ['annotationchart']
    }).then(function() {
        var arrayData = visitor;
        //console.log(arrayData);
        drawChart(arrayData);
    });

    var lasdate;
    var newlasdate;
    var dd;

    function drawChart(arrayData) {
        // convert string in first column to a date
        var newarr = arrayData;
        newarr.slice(0,2).map(function(row) {
            newlasdate = new Date(row[0]);
            dd = newlasdate.getDate();
            //console.log(lasdate);
        });
        arrayData = arrayData.map(function(row) {
            //console.log(dd);
            if (dd == new Date(row[0]).getDate() 
            && newlasdate.getMonth() == new Date(row[0]).getMonth()
            && newlasdate.getFullYear() == new Date(row[0]).getFullYear()
            )
            {
                //console.log('working');
                lasdate = new Date(row[0]);
            }
            else{
                //console.log('not working');
            }
            //console.log(lasdate);
            return [new Date(row[0]), row[1]];
        });
       // console.log(lasdate);
        var y = lasdate.getFullYear();
        var mm = lasdate.getMonth();
        var d = lasdate.getDate();
        var h = lasdate.getHours();
        var m = lasdate.getMinutes();
        // create google data table, chart, and options
        var data = google.visualization.arrayToDataTable(arrayData);
        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
        var options = {
            displayAnnotations: true,
            table: {
                sortAscending: true,
                sortColumn: 0   
            },
            annotations: {
                alwaysOutside: true,
                textStyle: {
                fontName: 'Times-Roman',
                fontSize: 18,
                bold: true,
                italic: true,
                // The color of the text.
                color: '#871b47',
                // The color of the text outline.
                auraColor: '#d799ae',
                // The transparency of the text.
                opacity: 0.8
                }
            },
            vAxis: {
            title: 'Price', 
            titleTextStyle: {color: 'grey'},
            format: 'decimal'
            },
            thickness:5,
            thickness: 1,
            scaleType: 'maximized',
            displayDateBarSeparator: true,
            fill: 80,
            scaleFormat: '$',
            zoomStartTime: new Date(y, mm, d, 9, 30),
            zoomEndTime: new Date(y, mm, d, 16, 00),
            displayZoomButtons: false,
            allowHtml: true,
            displayRangeSelector: false,


        };
        //console.log(new Date(y, mm, d, 9, 30));
        // draw chart
        chart.draw(data, options);
        // chart.setVisibleChartRange(new Date(2021, 2, 2, 9, 30), new Date(2021, 2, 2, 16, 00))

    }
    $(function() {
        $('#1d').on('click', function() {
            // load google charts
            google.charts.load('current', {
                packages: ['annotationchart']
            }).then(function() {
                var arrayData = visitor;
                //console.log(arrayData);
                drawChart(arrayData);
            });

            // draw chart
            var lasdate;

            function drawChart(arrayData) {
                // convert string in first column to a date
                arrayData = arrayData.map(function(row) {
                    lasdate = new Date(row[0]);
                    return [new Date(row[0]), row[1]];
                });

                var y = lasdate.getFullYear();
                var mm = lasdate.getMonth();
                var d = lasdate.getDate();
                var h = lasdate.getHours();
                var m = lasdate.getMinutes();
                // create google data table, chart, and options
                var data = google.visualization.arrayToDataTable(arrayData);
                var chart = new google.visualization.AnnotationChart(document.getElementById(
                    'chart_div'));
                var options = {
                    annotations: {
                        alwaysOutside: true
                    },
                    displayAnnotations: true,
                    thickness: 1,
                    displayDateBarSeparator: true,
                    fill: 80,
                    scaleFormat: '$',
                    zoomStartTime: new Date(y, mm, d, 9, 30),
                    zoomEndTime: new Date(y, mm, d, 16, 00),
                    displayZoomButtons: false,
                    allowHtml: true,
                    displayRangeSelector: false,
                };

                // draw chart
                chart.draw(data, options);
                // chart.setVisibleChartRange(new Date(2021, 2, 2, 9, 30), new Date(2021, 2, 2, 16, 00))

            }
        });
    });

</script>
Reply all
Reply to author
Forward
0 new messages