In general, the essence is simple: there is a function that, when activated, loads data from the server using an AJAX into the Google chart. The code itself:
google.charts.load('current', {'packages':['corechart']}); function showChart(id,obj,dataname,datatype,start,end){ $.ajax({ type: "POST", url: path_to+"ajax.php", data: { 's': start, 'e': end, 'title': id, 'p': datatype, 'f': 'crt' }, dataType: "json", success: function(data){ if(Object.keys(data).length){ $('#chart_div').css('display','block'); var chda = new google.visualization.DataTable(); chda.addColumn('datetime', 'Время'); chda.addColumn('number', dataname); for(i in data) chda.addRow([new Date(data[i]['date']+' '+data[i]['datetime']),parseInt(data[i][datatype])]); var options = { title: obj+': '+dataname, vAxis: {minValue: 0}, backgroundColor: '#123', areaOpacity: 0.5, theme: 'maximized', hAxis: { viewWindowMode: 'explicit', title: '', titleTextStyle: {color: '#333'}, gridlines: { count: -1, units: { days: {format: ['MMM dd']}, hours: {format: ['HH:mm', 'ha']}, } }, minorGridlines: { units: { hours: {format: ['HH:mm', 'ha']}, minutes: {format: ['HH:mm a Z', ':mm']} } } } }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(chda, options); $('#chart_div').css('display','none'); $('rect').attr('fill','rgba(0,0,0,0.9)'); $('text').attr('fill','#DBDDDF'); $('#chart_div').slideToggle('slow').after('<div onClick="$(\'#chart_div\').slideUp(\'slow\');$(this).remove();" id="chartclose" style="cursor:pointer;position:absolute;top:10px;right:10px;width:50px;height:50px;line-height:50px;font-size:26px;border-radius:50%;border:3px solid #CB9051;background-color:rgb(68, 67, 72);text-align:center;color:orange;">X</div>'); } else alert('Данных не найдено'); } }); }
In all browsers, everything works without problems, but the safari, as always, suits me with another problem. As a result, I get the error: TypeError: 'undefined' is not an object (evaluating 'new google.visualization.DataTable')
I have no idea how to deal with this, googling did not help.
<script src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
- Diskyp