Google charts not displaying on browser - javascript

Below is the code I have for displaying the Chart . I am unsure as to what is going wrong here.
Please bear with me , this is the first time I have asked a question in this forum.
Thank you for your help
<html>
<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([
['Short Shipment', 'Product Questions', 'Product Service Request', 'Billing Question','Product Issue','Return or Exchange Request','- None -'],
[1, 3, 4, 8, 8, 11, 283]]);
var options = {
chart: {
title: 'Case Issue Summary'
},
bars: 'horizontal'
};
var chart = new google.charts.Bar(document.getElementById('BarChartCase'));
chart.draw(data, options);
}
</script>
</head>
<body padding="0.5in 0.5in 0.5in 0.5in" size="Letter">
<div id="BarChartCase" style="width: 200px; height: 100px;"> </div>
</body>
</html>

Your code is 99/100 copied from developers.google.com/chart/....
The only changes you made is the width and height to 200 and 100.
Change it to a greater number and you'll be able to see your bar chart.
codepen copy

Related

Google API: markers not showing up on arraytable on map (javascript)

I used arraytodatatable and tried to showed my data on the map, but I did not see any markers on the map.
Here is the code that I used
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src =
"https://www.gstatic.com/charts/loader.js"></script>
<script type = "text/javascript" src =
"https://www.google.com/jsapi"></script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['map'],'mapsApiKey': 'my
API'});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin:
0
auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
]);
// Set chart options
var options = {
showTip: true,
};
// Instantiate and draw the chart.
var chart = new
google.visualization.Map(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
The error message I got was:
maps.google.com/mapfiles/ms/micons/red-dot.png:1 GET
file://maps.google.com/mapfiles/ms/micons/red-dot.png
net::ERR_FILE_NOT_FOUND
Does this mean the image that marker used does not exist anymore? If so, is there a way for me to change the color the marker so I can get the problem fixed?

How do I display PHP array in Google Chart

I'd like to diplay my array in google stacked column chart. I generated the array looks like this.
array(n) { ["5pm"]=> int(4) ["6pm"]=> int(0),... } //Monday
array(n) { ["5pm"]=> int(5) ["6pm"]=> int(1),... } //Tuesday
...
array(n) { ["5pm"]=> int(4) ["6pm"]=> int(2),... } //Sunday
The number of entries in array needs to vary (depends on entries in database, but is the same for all days).
The JS from google charts needs to look like this
var data = google.visualization.arrayToDataTable([
['Hours', '5pm', '6pm',...],
['Mon', 4, 0],
['Tue', 5, 1],
...
['Sun', 4, 2]
]);
Thanks for the help ;)
Heer is a sample code where I'm getting data from PHP & passing that to JavaScript for plotting the chart. One thing needs to check that all rows should have an equal number of elements.
So, according to your question, all "Time Periods" rows should have an equal number of elements else, it'll not work.
<?php
$chartData = array(
array('Year', 'Sales', 'Expenses', 'Profit'),
array('2014', 1000, 400, 200),
array('2015', 1170, 460, 250),
array('2016', 660, 1120, 300),
array('2017', 1030, 540, 350)
);
$chartDataInJson = json_encode($chartData);
?>
<html>
<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(<?php echo $chartDataInJson; ?>);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
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;"></div>
</body>
</html>
Hope it'll clear all of your doubt.

Google Charts API: more than one label rows on x axis?

I have this chart which is a bar chart showing multiple data. The data is divided by year (2014, 2015) and quarter (Q1,Q2,Q3,Q4). I can show either the quarters on the x-axis or the year, but not both. I made a screenshot and put the years in there to show what I'd like to achieve.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['bar']});
google.setOnLoadCallback(drawBasic);
function drawBasic() {
//create data table object
var data = google.visualization.arrayToDataTable([
['','Sales', 'Expenses'],
['Q1',1000, 400],
['Q2',1000, 400],
['Q3',1170, 460],
['Q4',900, 500],
['Q1',1400, 420],
['Q2',1240, 750],
['Q3',1001, 360],
['Q4',788, 800]
]);
var options = {
width: 800, height: 600, is3D: false, title: 'Company Earnings'
};
var chart = new google.charts.Bar(
document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
<div id="chart_div"></div>
</body>
</html>
Here is the result (I added the years in paint):
Any ideas how to do this?
I remembered seeing the following post sometime back that lets you add multiple x-axis details. Perhaps this will help:
http://www.lornajane.net/posts/2011/adding-multiple-axis-labels-to-a-google-chart

Google chart does not appear even if no error

Here is my code to create google chart from csv data. ANd also no error. But even chart does not appear.
Here is the documentation for which works: http://economistry.com/2013/07/easy-data-visualization-with-google-charts-and-a-csv/
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://jquery-csv.googlecode.com/files/jquery.csv-0.71.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
// grab the CSV
$.get("Chart1-data.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
alert(arrayData);
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
// this view can select a subset of the data at a time
var view = new google.visualization.DataView(data);
view.setColumns([0,1]);
// set chart options
var options = {
title: "A Chart from a CSV!",
hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
vAxis: {title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},
legend: 'none'
};
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>
Chart1-data.csv
Category,
A,34
B,23
C,14
D,57
E,18
Other,5
Do I missing anything in the code?
Good news: Your Code is fine! Your CSV file is the bottleneck.
Column names can't be null, means Category, => Category,''
No additional line breaks between data rows, means
A,34
B,23
=>
A,34
B,23
Result:
Category,''
A,34
B,23
C,14
D,57
E,18
Other,5
That is all! :)
There doesn't seem any kind of problem with this Google chart code snippet.
Though in browser console there are some Uncaught JavaScript errors.
Most importantly there is
" Uncaught null "error which is in reference to blank space after "Category" so Category, ' ' should work fine

Can't figure out how to display 2 tables using the google chart API

So I have the following code I want to embed in my website, the purpose of which is to display daily and monthly website metrics in tabular form.
I'm trying to mock the page up, but I am running into a roadblock: I can't seem to find a way to render two different google charts using the google charts API.
I'm sure it's an incredibly silly mistake that I'm just not seeing, but I've been looking into this for about an hour now and just can't figure out how to display two tables.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawDailyTable);
function drawDailyTable() {
var Dailydata = new google.visualization.DataTable();
Dailydata.addColumn('string', 'Metric');
Dailydata.addColumn('number', 'Number');
Dailydata.addRows([
['Total Daily Unique Users', {v: 462, f: '462'}],
['Total Daily Visits', {v:6702, f: '6,702'}]
]);
var Dailytable = new google.visualization.Table(document.getElementById('table_div'));
Dailytable.draw(Dailydata, {showRowNumber: true});
}
</script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawMonthlyTable);
function drawMonthlyTable() {
var Monthlydata = new google.visualization.DataTable();
Monthlydata.addColumn('string', 'Metric');
Monthlydata.addColumn('number', 'Number');
Monthlydata.addRows([
['Total Monthly Unique Users', {v: 12875, f: '12,875'}],
['Total Monthly Visits', {v:37980, f: '37,980'}]
]);
var Monthlytable = new google.visualization.Table(document.getElementById('table_div'));
Monthlytable.draw(Monthlydata, {showRowNumber: true});
}
</script>
</head>
<body>
<div id='table_div'></div>
</body>
</html>
I figured it out, in my drawtable functions where it says: document.getElementById('table_div'), I just renamed the ID for each respective table to document.getElementById('dailytable_div') and document.getElementById('monthlytable_div'), and then edited my body to look like this:
<body>
<div id='dailytable_div'></div>
<div id='monthlytable_div'></div>
</body>
Problem solved!

Categories

Resources