We Keep Coding

Why doesn't my Google chart work on Safari?

I am trying to draw a chart on screen using Google charts. It works on every browser except for Safari. The following is the code:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the bar chart package.
google.charts.load("current", {"packages":["corechart", "line"]});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: "/get-data-for-chart",
data: {"objectId": 807},
dataType: "json"
}).then(function(response) {
// Create our data table out of JSON data loaded from server.
rawData = response;
if (rawData.rows != null) rawData.rows = rawData.rows.map(row => ({ c: [{ v: new Date(row.c[0].v) }, row.c[1]] }));
var data = new google.visualization.DataTable(rawData);
// Instantiate and draw our chart, passing in some options.
var options = {
chart: {
title: "Title of the chart"
},
width: 900,
height: 500,
hAxis: {
title: "Time Axis",
format: "MM-dd",
gridlines: {count: 15}
},
vAxis: {
gridlines: {color: "none"},
minValue: 0,
format: "currency"
}
};
var date_formatter = new google.visualization.DateFormat({
pattern: "MMM dd, yyyy HH:mm"
});
date_formatter.format(data, 0);
var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
chart.draw(data, options);
});
}
</script>
<!--Div that will hold the chart-->
<div id="chart_div"></div>
What actually happens on Safari is that the area for the chart loads, but with incorrect labels I guess. And the actual chart does not load at all. Moreover, there are no errors shown in the console, so I can't debug this in a usual way. As mentioned earlier, this works with all other browsers. Also for the record, the Safari is running on MacOS Mojave. Any help is greatly appreciated! Thanks.

Reloading and then refreshing in same function jquery

In my PHP application I'm using 2 php files.
chart.php - Page contains a google chart.
<div id="chart_div" style="height:100%;width:100%">
</div>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
title: 'Chess opening moves',
width: 900,
legend: { position: 'none' },
chart: { title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', selectHandler);
};
function selectHandler() {
window.location.href = "chart.php";
}
</script>
2. index.php - Home page where I'm including chart.php in a div
<div style="width:40%">
require_once 'chart.php';
</div>
On clicking the chart in index.php page , it will call selectHandler() and redirect to chart.php.
The issue is, the chart in chart.php (after redirecting from index.php) is showing in small size similar to the chart display in index.php. Once I refreshes the chart.php it will display the chart in correct size.
Is there any function in jquery to refresh a page by reloading other than using location.reload().
Can anyone help me to fix this issue? Thanks in advance.

try redrawing the chart,
use an inline function on your select handler,
so you can still access your chart, data, and options.
google.visualization.events.addListener(chart, 'select', function () {
window.location.href = "chart.php";
chart.draw(data, options);
});

Wrapping text of x-Axis Labels for Google Visualization Charts

I cannot seem to wrap my label for my column chart. I tried fiddling around with the options but it doesn't make any difference.
This is my current chart view, as you can see the label for column 2 has completely disappeared as the column 1 label has overlapped:
this is my Column Chart View:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", { packages: ["bar"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Faculty Name', 'Book', 'Book Chapter', 'Journal Article', 'Conference'],
#Html.Raw(rows)]);
var options = {
title: '',
'width': 800,
'height': 500
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data1, options);
}
</script>
<div id="columnchart_material" style="width: 800px; height: 500px;"></div>

You can reduce the font size down to 11 to get the label to show...
var options = {
'title': '',
'width': 800,
'height': 500,
'hAxis': {'textStyle': {'fontSize': 11}}
};
To do so, you will need to convert your options...
chart.draw(data1, google.charts.Bar.convertOptions(options));

you may draw a classical ColumnChart (when it is an option):
google.load("visualization", "1.1", {
packages: ["corechart"]
});
google.load("visualization", "1.1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Faculty Name', 'Book', 'Book Chapter', 'Journal Article', 'Conference'],
['Commerce, Law and Managment', 4, 9, 9, 1],
['foobar',2,2,2,3],
['Health Sciences', 0,2,3,1],
['Humanities', 0, 1, 1, 0],
['Science', 0, 0, 0, 1]
]);
var options = {
title: '',
'width': 800,
'height': 500,
vAxis: {
gridlines: {
count: 10
}
}
};
var chart = new google.visualization
.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data1, options);
}
<div id="columnchart_material" style="width: 800px; height: 500px;"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

Google Line chart from CSV

I am quite new to java-script and html stuff.. I am trying to make a basic line chart with Google chart using example.csv file but something is wrong. I dont see any chart. Nothing is being displayed. Please help. I came up with code after reading some similar codes
All i need is to start with this basic working code and develop into more advanced shape
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery.csv-0.71.js"></script>
<script type="text/javascript">
//google.load('visualization', '1', {packages: ['corechart', 'line']});
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(BasicLine);
function BasicLine() {
// grab the CSV
$.get("example.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
var data = new google.visualization.arrayToDataTable(arrayData);
]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Temperature'
},
backgroundColor: '#f1f8e9'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
My CSV File is as below
Hour, Temperature
1, 70
2, 65
3, 60
4, 65
5, 67
6, 69

There is an syntax-error(the console should have told you about this).
Fixed version:
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(BasicLine);
function BasicLine() {
$.get("example.csv", function(csvString) {
var arrayData = $.csv.toArrays(csvString,
{onParseValue: $.csv.hooks.castToScalar}),
data = new google.visualization.arrayToDataTable(arrayData),
options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Temperature'
},
backgroundColor: '#f1f8e9'
},
chart = new google.visualization
.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
'text');
}
</script>

Google Stacked Bar chart not displayed when data is omitted

I am trying to implement google charts in my project.
Where I want to display marks of last x tests on bar graph.
But the issue is, user can take any number of subjects for the test like only Math and History.So I only want to show that subjects in a bar chart.
I can not display 0 since "0" might infer that user got 0 marks in that subject. I just want to include those subjects which the user gives test for.
Is this possible in google Chart or any other library ?
Here is the code:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Math', 'Science', 'History', 'Geography', { role: 'annotation' } ],
['#1', 10, 24, 20, ''],
['#2', 16, 22, 23, ''],
['#3', 28, 19, 29, '']
]);
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
I tried morris.js, but I was unsuccessful.
Any help will be appreciated. Thanks!