Google chart does not draw graph in Safari browser

80 views

Skip to first unread message

rodman publi

unread,

Jul 1, 2021, 4:11:23 PM7/1/21

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>

Fenil Mendapara

unread,

Jul 6, 2021, 2:28:53 PM7/6/21

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