ChartWrapper is not displaying the graph - javascript

I'm using the google-chart-api to draw a graph using ChartWrapper class and ControlWrapper class. Here is the code I have been using.
This is the function to load hard-coded data.
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['TimeLine', 'Time-Option', 'LOC', 'Comments'],
['Monthly', '1', 200, 20],
['Monthly', '2', 300, 30],
['Weekly', '1', 150, 15],
['Weekly', '3', 35, 3],
['Daily', '1', 230, 23],
['Daily', '2', 178, 17],
]);
This is my ControlWrapper.
var timelinePicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control',
'options': {
'filterColumnLabel': 'Timeline',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
And this is my ChartWrapper.
var lineChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart',
'options': {
'width': 900,
'height': 500,
'chartArea': {top: 0, right: 0, bottom: 0}
},
'view': {'columns': [1, 2]}
});
new google.visualization.DashBoard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);
}
google.setOnLoadCallback(drawVisualization);
And to view the graph,
<body>
<div id="chart">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart"></div>
</td>
</tr>
</table>
</div>
</body>
But still, I don't get any output. Any idea what has gone wrong here?

Strong suggestion: always try to debug your own code first. There are oh-so-many careless mistakes in there that could be easily caught if you used firebug or the like to catch errors.
Error #1: DashBoard -> Dashboard
Wrong: new google.visualization.DashBoard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);
Right:
new google.visualization.Dashboard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);`
Error #2: TimeLine -> Timeline
Wrong: 'filterColumnLabel': 'Timeline',
Right: 'filterColumnLabel': 'TimeLine',
Error #3: chart -> dashboard
Wrong: new google.visualization.Dashboard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);
Right: new google.visualization.Dashboard(document.getElementById('dashboard')).bind(timelinePicker, lineChart).draw(data);
Correct the HTML as well (you have two divs with the 'chart' id):
<body>
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart"></div>
</td>
</tr>
</table>
</div>
</body>
Final Working Version
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<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.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['TimeLine', 'Time-Option', 'LOC', 'Comments'],
['Monthly', '1', 200, 20],
['Monthly', '2', 300, 30],
['Weekly', '1', 150, 15],
['Weekly', '3', 35, 3],
['Daily', '1', 230, 23],
['Daily', '2', 178, 17],
]);
var timelinePicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control',
'options': {
'filterColumnLabel': 'TimeLine',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var lineChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart',
'options': {
'width': 900,
'height': 500,
'chartArea': {top: 0, right: 0, bottom: 0}
},
'view': {'columns': [1, 2]}
});
new google.visualization.Dashboard(document.getElementById('dashboard')).bind(timelinePicker, lineChart).draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart"></div>
</td>
</tr>
</table>
</div>
</body>
</html>

Related

How to remove title and bulletins from google charts

I'm using google donut chart, but it's showing the title and bullets.
I need to know how to remove them and make the chart fit inside the card.
<div class="col-xl-4 col-lg-12 col-md-4 col-sm-12 col-12">
<div class="card">
<h5 class="card-header">Credits History</h5>
<div class="card-body">
<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'],
['Work', 11],
['Eat', 2]
]);
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
</script>
<div id="donutchart" style="width: 220px; height: 155px;"></div>
</div>
</div>
</div>
to remove the chart title, remove the title option from the chart options.
as for the bullets, or bulletins, that is the chart's legend,
to remove, add the following option --> legend: 'none'
and you can use the chartArea option to maximize the chart within the container.
var options = {
chartArea: {
height: '100%',
width: '100%'
},
legend: 'none',
pieHole: 0.4
};
see following working snippet...
google.charts.load("current", {
packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2]
]);
var options = {
chartArea: {
height: '100%',
width: '100%'
},
legend: 'none',
pieHole: 0.4
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donutchart" style="width: 220px; height: 155px;"></div>

error with adjusting height of pie chart using highcharts

I want my chart to be inline with other div and with the main div , but I am not able to fix the height of the piechart div , I want the extra padding to be removed . how do i achieve that ?
chart.html
<html>
<head>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="chart1.js"></script>
</head>
<body>
<div style="width:175px; height :200px">
<div >
<table style="width:100%;border:1px solid green">
<tr>
<td>Execution %</td>
<td style="text-align:right">70</td>
</tr>
<tr>
<td>Pass %</td>
<td style="text-align:right">90</td>
</tr>
</table>
</div>
<div id="chartdiv" style="min-width: 100px; max-width:100%;max-hright:100%;border:3px solid black ">
</div>
</div>
the js file for rendering this chart is :-
$(function() {
var chart = new Highcharts.Chart('chartdiv',{
chart: {
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
credits: {
enabled: false
},
title: {
text: null
},
plotOptions: {
pie: {
size:'100%',
slicedOffset: 0,
dataLabels: {
enabled: false
}
}
},
series: [{
type: 'pie',
name: 'Months',
data: [
['Jan', 45.0],
['Feb', 26.8],
['Mar', 8.5],
['June', 6.2],
['July', 21.0]
]}]
});
});
add style for chart div - "chartdiv"
width:100% !important;
height:100% !important;

linewidth is not working in google line chart

I have used the google line chart, applied the line width as 5px but it is not working. I have used the following code,
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {
'packages': ['corechart']
});
var options, data, chart;
$(function () {
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
var tweets_table = $('#tweet-table');
function getData() {
// Create array to hold our values for data table
// Each key is an array which represents a "row" of data
var values = [];
// get our values
$('#tweet-table tr').each(function (i, v) {
// Create a new "row"
values[i] = [];
// Get either th or td and loop
$(this).children('th,td').each(function (ii, vv) {
if ($(this).is('td.tweet-count')) {
// if we're looking at a numeric column be sure
// to pass a integar to the Chart API
values[i][ii] = parseFloat($(this).html());
} else {
// otherwise just get the text string
values[i][ii] = $(this).html();
}
});
});
return values;
}
function drawChart() {
var values = getData();
// Create the data table.
data = google.visualization.arrayToDataTable(values);
// Set chart options
options = {
'width': '100%',
'height': 500,
fontSize: 16,
fontName: 'Arial',
tooltip: {isHtml: true},
titlePosition: 'none',
colors: ['#000'],
areaOpacity: 0.1,
pointSize: 15,
pointShape: "circle",
chartArea: { width: '90%' },
lineWidth: 5,
legend: {
position: 'none'
},
hAxis: {
textStyle: {
fontSize:'16',
color:'#555555',
fontName: 'Arial'
},
format: '0.00',
minValue: -1 ,
},
vAxis: {
textStyle: {
fontSize:'16',
color:'#555555',
fontName: 'Arial'
},
titleTextStyle: {color: "#000",bold: "true",italic: "false"},
title: "Total sales",
gridlines: {
color: '#ddd',
count: 6
},
baselineColor: '#522fa1',
},
};
var formatter = new google.visualization.NumberFormat({prefix: '', negativeColor: 'red', negativeParens: true});
formatter.format(data, 0); // Apply formatter to first column
var formatter2 = new google.visualization.NumberFormat({ fractionDigits: 5});
formatter2.format(data, 1);
// Instantiate and draw our chart, passing in some options.
chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
});
$(window).smartresize(function () {
chart.draw(data, options);
});
And this is the html code,
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Charted Tweets</title>
<meta name="description" content="My Twitter RT's plotted on Google charts for netmag">
<!-- Google will often use this as its description of your page/site. Make it good. -->
<meta name="author" content="David Smith">
<link rel="stylesheet" href="_/css/normalize.css">
<link rel="stylesheet" href="_/css/grid.css">
<link rel="stylesheet" href="_/css/typo.css">
<link rel="stylesheet" href="_/css/bootstrap.min.css">
<link rel="stylesheet" href="_/css/site.css">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<body class="">
<div class="page">
<h1>Tweets by #get_dave by date</h1>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="position: relative; ">
</div>
<table class="table table-striped" id="tweet-table">
<caption>#get_dave's Tweets by date</caption>
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Tweets</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tweet-date">03/03/12</td>
<td class="tweet-count">2</td>
</tr>
<tr>
<td class="tweet-date">04/03/12</td>
<td class="tweet-count">1</td>
</tr>
<tr>
<td class="tweet-date">05/03/12</td>
<td class="tweet-count">1</td>
</tr>
<tr>
<td class="tweet-date">06/03/12</td>
<td class="tweet-count">8</td>
</tr>
<tr>
<td class="tweet-date">07/03/12</td>
<td class="tweet-count">4</td>
</tr>
<tr>
<td class="tweet-date">07/03/12</td>
<td class="tweet-count">0</td>
</tr><tr>
<td class="tweet-date">07/03/12</td>
<td class="tweet-count">0</td>
</tr>
<tr>
<td class="tweet-date">08/03/12</td>
<td class="tweet-count">3</td>
</tr>
</tbody>
</table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="_/js/debounce.js"></script>
<script src="_/js/functions.js"></script>
</body></html>
and my output is
In output, the line width on the baseline is lighter than other linewidth. I need to equalize the line width at all places..
The issue is that the horizontal axis is interfering with your line. This is due to the minimum value of the vertical axis.
I played around with a jsfiddleto replicate the issue. Notice the minValue: -1 on the vAxis parameter. It looks like you put that on the hAxis.
var options = {
lineWidth: 5,
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity',
minValue: -1
}
};

Padding-right has no effect, help please?

Here is my HTML and JS. I have tried putting the padding on both bottomWrapper and topList, but for some reason neither seems to work for padding-right. The other styles seem to be fine. Nothing is floated or anything that I know of. Any ideas? This is a WebView for Android, but really shouldn't matter in this case I get the same behavior when I just render this code in a browser.
<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(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 614.6],
['2005/06', 135, 1120, 599, 1268, 288, 682],
['2006/07', 157, 1167, 587, 807, 397, 623]
]);
var options = {
// title : 'Top Texters',
legendTextStyle: { color: 'white' },
// titleTextStyle: { color: 'white' },
vAxis: {
title: "Points",
titleTextStyle: { color: 'white' },
textStyle:
{color: 'white'},
},
hAxis: {
title: "Month",
titleTextStyle: { color: 'white' },
textStyle:
{color: 'white'},
},
seriesType: "bars",
series: {5: {type: "line"}},
backgroundColor: { fill:'transparent' }
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body style="background-color:#02071D;">
<div id="topWrapper" style="width:100%;">
<h1 style="color: white; padding-left: 22px; margin-bottom: -28px;">Top Texters</h1>
<div id="chart_div" style="width: 80%; height: 350px;margin:0 auto;"></div>
</div>
<div id="bottomWrapper" style="width:100%">
<div id="topList" style="width:100%;height:200px;background-color:#FFFFFF;padding:15px;"></div>
</div>
</body>
</html>
The div is droped out of the browserwindow. Just give the div with the padding a box-sizing: border-box; and all is fine!

Google Charts External Javascript Issue

My Problem is, when i put js code of any google chart in an external javascript file. it start loading page and dosen't display any thing. in case of inline javascripts its working fine.
following is my HTML code "google barchart.html"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<input type="button" id="btn" value="Show Graph" />
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</body>
</html>
and this is my js file "test.js"
$(document).ready(function() { $('#btn').click(function() { //alert("hi");
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'Your Restaurant', 'Other Restaurants'],
['Question1', 5, 4],
['Question2', 4, 5],
['Question3', 3, 2],
['Question4', 5, 1]
]);
var options = {
//title: 'Company Performance',
hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
} }); });
*NOTE: it also working fine in external js when this piece of code is not in any js function. but i want to use this in Javascript function.
Thnx in advance.
Moaz
I fixed up your code into 2 working solutions you may use (tested working with IE, Chrome and Mozilla).
JavaScript loads with index page
JavaScript loads after button click
.
Solution 1: JavaScript loads with index page
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<input type="button" id="btn" value="Show Graph">
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</html>
test.js
google.load('visualization', '1', {'packages':['corechart']});
$(document).ready(function() {
$("#btn").click(function() {
$("#chart_div").load("", function(){
var data = google.visualization.arrayToDataTable([
['', 'Your Restaurant', 'Other Restaurants'],
['Question1', 5, 4],
['Question2', 4, 5],
['Question3', 3, 2],
['Question4', 5, 1]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
tooltip: {trigger: 'hover'}};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
});
});
Solution 2: JavaScript loads after button click
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
function loadjsfile(filename, filetype)
{
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
document.getElementsByTagName("head")[0].appendChild(fileref)
}
</script>
</head>
<input type="button" id="btn" value="Show Graph" onclick="loadjsfile('test2.js','js')">
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</html>
test2.js
$("#chart_div").load("",function(){
var data = new google.visualization.arrayToDataTable([
['', 'Your Restaurant', 'Other Restaurants'],
['Question1', 5, 4],
['Question2', 4, 5],
['Question3', 3, 2],
['Question4', 5, 1]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
tooltip:{trigger: 'hover'}};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options)
});

Categories

Resources