I need to execute this .php file for different IE versions but the following errors appear when I emulate to:
IE 8:"gvjs_VL" is undefined.
IE <8: "JSON" is undefined.
I have tried also to use json2 when the IE version was <= 8 but it did not solve the issue.
What could be happening?
Thank you in advance. :)
<!DOCTYPE html>
<?php
$chartData = array(array("Area" , "Number of people"),
array("A" , 5000),
array("B" , 8000),
array("C" , 400),
array("D" , 40000),
array("E" , 1000),
array("F" , 1400 ));
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="chartContainer">
<div id="piechart" class="piechart">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable( <?php echo json_encode($chartData, JSON_NUMERIC_CHECK); ?>);
// Optional; add a title and set the width and height of the chart
var options = {fontName:'Arial', legend:{position: 'labeled', maxLines:15, alignment:'start'},
textStyle: {color: 'black', fontSize: 30},
pieHole: 0.4, sliceVisibilityThreshold:0.0,
chartArea: {
width: "100%",
top: "0%",
left: "0%"},
};
// Display the chart inside the div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</div>
</div>
</body>
I am not able to run your PHP code so I try to test the Google Charts Sample with JS.
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My Web Page</h1>
<div id="piechart"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['TV', 4],
['Gym', 2],
['Sleep', 8]
]);
// Optional; add a title and set the width and height of the chart
var options = {'title':'My Average Day', 'width':550, 'height':400};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</body>
</html>
Output in IE browser:
If you check the source code then you can notice that Google Charts using SVG in their charts. SVG is not supported in IE <= 8.
Reference:
SVG (basic support)
This can be the one of the reason that it is not working in IE <=8 versions.
At present, IE 8 and earlier versions are not supported. It is recommended to upgrade to IE 11 browser. It can help to avoid this issue.
Related
I'm trying to get a Graph from mySQL database, but somehow it doesn't show a graph on my webpage.
This is the graph.html file, which should be showing the graph on the webpage.
<h1>Graphs</h1>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var jsonData = null;
var json = $.ajax({
url: "data.php", // make this url point to the data file
dataType: "json",
async: false,
success: (
function(data) {
jsonData = data;
})
}).responseText;
// Create and populate the data table.
var data = new google.visualization.DataTable(jsonData);
// Create and draw the visualization.
var chart= new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10}}
);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 500px; height: 400px;"></div>
</body>
</html>
In the browser I get an error saying:
Uncaught (in promise) TypeError: $.ajax is not a function and
Error: Could not establish connection. receiving end does not exist.
Any idea how to fix this?
Thanks.
Edit:
In the head I've changed: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> to <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"></script>, I tought i used a slim version of jquery, so i've chand the head of the html file, but it still doesn't work.
I tried downloading jquery using npm install jquery, but that doesn't do anything for either.
Most of my code for the html page is from https://developers.google.com/chart/interactive/docs/php_example.
So i'm kind of lost where to look for errors.
i am using google pie chart but in chart No data massage show but when i run query and
display it coming perfect but same query for data No data show, below the code
please help me,
while running same query it give perfect result but not in chart
<?php require 'connection.php'; ?>
<?php $query = 'SELECT SBU, count(RG) AS State from regionmaster group by SBU';
$result = mysqli_query($conn, $query);
while ($value = mysqli_fetch_assoc($result)) {
// echo $value['SBU'] . $value['State'];
echo "['".$value['SBU']."',".$value['State']."],";
}
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pic Chart</title>
<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([
['Task', 'Hours per Day'],
<?php
while ($Chart = mysqli_fetch_assoc($result)) {
echo "['".$Chart['SBU']."',".$Chart['State']."],";
}
?>
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
I'm creating a simple bar chart using Google Charts with the data fetched from Mysql Database. The chart is displayed properly but I'm unable to format the title of the graph. I have referred to many sites and I'm sure the syntax for 'titleTextStyle' is fine. But the title does not change with the options at all. Can somebody tell me where the problem lies ?
I have attached my full code below.
Thanks in advance.
<?php
include("toconnect.php");
$result = mysqli_query($connection,"SELECT Product_name,COUNT(*) FROM Items_Sold GROUP BY Product_name");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Product Name', 'Frequency'],
<?php
if(mysqli_num_rows($result) > 0){
while($row = mysqli_fetch_array($result))
{
echo "['".$row["Product_name"]."','".$row["COUNT(*)"]."'],";
}
}
?>
]);
var options = {
chart: {
title: "Frequently Bought items",titleTextStyle:{ color: '#007DB0',fontName: "Times",fontSize: 60,bold: true},
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 800px; height: 500px;display:inline-block;"></div>
</body>
</html>
you are working with a material chart...
google.charts.Bar
the list of features not working in Material charts can be found here...
Tracking Issue for Material Chart Feature Parity #2143
which includes...
titleTextStyle
try working with a classic chart instead...
google.visualization.ColumnChart
with option...
theme: 'material'
I am using chart.js in php program to print chart using jquery but not able to display chart
I have also included bootstrap files in my original code
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="width: 400px;height:400px;">
<canvas id="myChart" width="400" height="400" style="color: red;"></canvas>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script>
$(document).ready(function(){
var data1 = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'My First dataset',
backgroundColor: '#16a085',
data: [10, 5, 2, 20, 30, 45]
}]
};
var options1 = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
};
var ctx = $('#myChart');
var piechart = new Chart(ctx).Bar(data1,options1);
});
</script>
</body>
</html>
Not able to display graph using
var piechart = new Chart(ctx).Bar(data1,options1);
but i can display chart using
var piechart = new Chart(ctx,{
type:'bar',
data:data1 ,
options: options1,
});
But I want to display chart using 1st method
I'm trying to get Google Charts to work from a MySQL DB.
I've created an array & can see that it is populated, when viewing source on the live page
However, the chart doesn't appear. Would anyone be able to advise me why this might be?
Head Script
<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([
['Date', 'Total Orders'],
['2017-9-6',200],['2017-8-6',1500],['2017-7-7',800],['2017-7-3',1,800],['2017-7-2',200],['2017-6-13',10000],['2017-10-5',800],['2017-10-12',4,500],['',],
]);
var options = {
title: 'Orders Per Day'
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
chart.draw(data, options);
}
</script>
Body Script
<h3>Column Chart</h3>
<div id="columnchart" style="width: 900px; height: 500px;"></div>