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
}
};
Related
Currently i am making this in which the graph plot is going down.
As i am entering the values they are added to the table but when i click the Add button as the data is added to the table the graph plot keeps going down.
As the number of entries in the table increases the graph plot keeps going down. How do i resolve this issue?
function myfunction(){
//INFRARED
var l=document.getElementById("no").value;
var a=7.81*Math.pow(10,11)*Math.exp(-48.8/l);
document.getElementById("show").innerHTML=a;
//ULTRAVIOLET
var x= 0.0175 ;
var b=((154.2*x)/((46.6*x)+60))*Math.pow(10,-2)*Math.exp(-4.43/l);
document.getElementById("demo").innerHTML=b;
//RAYLEIGH
var c=1.7*(0.085/l);
document.getElementById("rayleigh").innerHTML=c;
}
var list1=[];
var list2=[];
var list3=[];
var list4=[];
var n =1;
var x=0;
function AddRow(){
var AddRown= document.getElementById('abc');
var NewRow= AddRown.insertRow(AddRown.rows.length);
//var NewRow=AddRown.insertRow(1);
list1[x]=document.getElementById("no").value;
list2[x]=document.getElementById("show").innerHTML;
list3[x]=document.getElementById("demo").innerHTML;
list4[x]=document.getElementById("rayleigh").innerHTML;
var cel1=NewRow.insertCell(0);
var cel2=NewRow.insertCell(1);
var cel3=NewRow.insertCell(2);
var cel4=NewRow.insertCell(3);
cel1.innerHTML=list1[x];
cel2.innerHTML=list2[x];
cel3.innerHTML=list3[x];
cel4.innerHTML=list4[x];
n++;
x++;
}
// Char
Chart.defaults.global.defaultColor = 'rgba(30, 0,50, 0.1)';
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: list1,
datasets: [{
label: 'INFRARED',
//backgroundColor: 'blue',
borderColor: 'blue',
data: list2,
},{
label: 'ULTRAVIOLET',
//backgroundColor: 'green',
borderColor: 'green',
data: list3,
},
{
label: 'RAYLEIGH',
//backgroundColor: 'green',
borderColor: 'red',
data: list4,
},
]
},
// Configuration options go here
options: {}
});
function updateChart(){
chart.data.datasets[0].data=list2;
chart.data.datasets[1].data=list3;
chart.data.datasets[2].data=list4;
chart.update();
//document.getElementById("myChart").style.position = "fixed";
}
body{
background-color: bisque;
}
#show th, #show td{
padding:13px;
}
#btna td input{
width:100%;
}
.t1{
margin-top: 30px;
margin-left: 50px;
text-align:center;
background:rgb(122, 40, 40);
color:rgb(131, 248, 137);
}
.t2{
margin-left:20px;
text-align:center;
background:rgb(122, 40, 40);
color:rgb(131, 248, 137);
}
.card-body{
border: 1px solid;
width:500px;
height:400px;
margin-left: 800px;
margin-top:-300px;
background-color: aquamarine;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="sty.css">
<script src="main.js"></script>
<title>DYNAMIC CHART</title>
</head>
<body>
<table border="4" class="t1">
<thead>
<tr>
<th>WAVELENGTH</th>
<td><input type="text" name="no" id="no"></td>
</tr>
</thead>
<tbody>
<tr>
<th>INFRARED</th>
<td id="show" class="infra"></td>
</tr>
<tr>
<th>ULTRAVIOLET</th>
<td id="demo" class="ultra"></td>
</tr>
<tr>
<th>RAYLEIGH</th>
<td id="rayleigh" class="ray"></td>
</tr>
<tr id="btna">
<td colspan="2"><input type="button" name="button" id="btn"
value="Calculate" onclick="myfunction()"></td>
</tr>
<tr>
<td colspan="2"><input type="button" name="button" id="btn"
value="Add" onclick="AddRow()"></td>
</tr>
</tbody>
</table>
<table border="4" id="abc" class="t2" style="margin-top:70px">
<thead>
<tr>
<th>WAVELENGTH</th>
<th>INFRARED</th>
<th>ULTRAVIOLET</th>
<th>RAYLEIGH</th>
</tr>
</thead>
</table>
<div class="card-body">
<h1>DYNAMIC CHART<button class="btn btn-success"
onclick="updateChart()">Update</button></h1>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script src="main.js">
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
I'm using Billboard.js (https://naver.github.io/billboard.js/) to display my data in a line graph.
In my html, I'm declaring my graph before a table and I want it to appear before said table, but it's is loading beneath the table.
How would I force the chart to appear above the table?
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="~/Scripts/billboard.js"></script>
<link rel="stylesheet" href="~/Content/billboard.css">
<link rel="stylesheet" href="~/Content/insight.css">
<script type="text/javascript">
var chart = bb.generate({
data: {
x: "x",
xFormat: "%Y-%m-%d %H:%M",
columns: [
["x"#Html.Raw(Model.FirstOrDefault().List_GraphTime)],
["#Html.Raw(Model.FirstOrDefault().Name_Temp_5m)"#Model.FirstOrDefault().List_Variable_5m]
]
},
axis: {
x: {
type: "timeseries",
tick: {
format: "%Y-%m-%d %H:%M"
}
}
},
legend: {
position: "right"
},
zoom: {
enabled: {
type: "drag"
}
},
size: {
height: 600
},
padding: {
right: 260,
left: 260
},
bindto: "#chart"
});
</script>
</head>
<div id="chart"></div>
<table class="table wb-tables table-striped table-bordered">
<thead>
<tr>
<th>Update Date</th>
<th>Water Temp 5m (°C)</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#Html.DisplayFor(modelItem => item.LastUpdateTime)</td>
<td>#Html.DisplayFor(modelItem => item.Variable_5m)</td>
</tr>
}
</tbody>
</table>
Is because you're generating chart before the bind element is rendered.
Try move your generation code to happen after the bind element is rendered as follows.
<head>
...
<!-- (1) Move the generation code from -->
<script type="text/javascript">
var chart = bb.generate({ ... });
</script>
</head>
<body>
<div id="chart"></div>
<table class="table wb-tables table-striped table-bordered"></table>
<!-- (2) to this point, where after the '<div id="chart">' is rendered -->
<script type="text/javascript">
var chart = bb.generate({ ... });
</script>
</body>
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;
I have a chart that allows the user to select an option to compare to a statewide average. The chart works fine until I use the stringify method to create annotations - the number of columns varies based on the selection. What is your advice on how to retain this functionality, and still have data labels?
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table', 'corechart']});
</script>
<script type='text/javascript'>
google.setOnLoadCallback(initialize);
function initialize() {drawVisualizations();
function drawVisualizations() {drawChart(); drawTable();} //drawC();}
//main chart
function drawChart() {
var dataCap = document.getElementById("selected2").value;
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:A5,E1:E5,' + dataCap); query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var options = {
'title':'College Readiness',
'subTitle':'Test',
'titleTextStyle': {fontSize: '24', color: 'teal', fontName: '"Arial"', isHTML: true},
hAxis: {'title': 'Percent of Students Ready', 'textStyle': {color: 'gray', fontSize: '9'}, 'minValue': '0', 'maxValue':'1','format': 'percent'},
vAxis: {'title': 'Academic Year', 'textStyle': {bold: true, fontSize: '16'}, 'minValue': '0', 'maxValue':'1'},
legend: {'position': 'top', 'maxLines': 5, 'textStyle': {bold: true, fontSize: '16', fontName: "'Arial'"}},
tooltip: {
textStyle: {fontName: "'Arial'"}},
series: {
0: {pointsVisible: true, color: '#003366'},
1: {pointsVisible: true, color: '#cc0000'}
},
annotations: {
textStyle: {bold: true,color: '#000000', fontName: "'Arial'"},
stem:{color: 'none'}
}};
function handleQueryResponse(response) {var data = response.getDataTable()};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));chart.draw(data, options);}
//current stats sidebar
function drawTable() {
var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A:E');
query2.send(handleQueryResponse2);
}
function handleQueryResponse2(response) {
var data2 = response.getDataTable();
var options2 = {'sort': 'disable'};
var chart2 = new google.visualization.Table(document.getElementById('data_div'));
chart2.draw(data2, options2);}
}
</script>
<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif;}
html, body {height: 100%;}
body {text-align: center;}
#chart_div {width: 900px; margin: 20px auto; height: 600px;}
</style>
</head>
<body>
<label for="selected2">You are viewing:</label>
<select id="selected2" onChange="initialize()">
<option selected value="">Statewide average only</option>
<option value="B1:B5">Fake University 1 compared to statewide average</option>
<option value="C1:C5">Fake University 2 compared to statewide average</option>
<option value="D1:D5">Fake University 3 compared to statewide average</option>
</select>
<input onClick="window.open('datatest21-data.html')" type="button" value="Download the complete data set" />
<div id="chart_div"></div>
<div id="data_div"></div>
</body>
</html>
Here is the stringify method I was using, but it messes up the above code:
//
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, { calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"},
2,{ calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation" }]);
//
It could be that I'm doing this all wrong - advice, appreciated. This type of coding is new to me.
I've got it working now with set columns, but the dropdown to change the value no longer works. My guess is that once the graph shifts into DataView (rather than DataTable), it becomes "read-only" and the interactivity is lost. (This example is using another chart.) I need a way of redrawing the table when another option is selected.
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table', 'corechart']});
</script>
<script type='text/javascript'>
google.setOnLoadCallback(initialize);
function initialize() {drawVisualizations(); function drawVisualizations() {drawChart(); drawTable();} //drawC();}
//main chart
function drawChart() {
var dataCap = document.getElementById("selected2").value;
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Enrollment&range=' + dataCap); query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
//
var view = new google.visualization.DataView(data);
view.setColumns([0,1,2,3,
{calc: "stringify",
sourceColumn: 4,
type: "string",
role: "annotation"}
]);
//
var options = {
height: 500,
chartArea: {'left': '5%'},
isStacked: true,
hAxis: {'textStyle': {'fontSize':11}},
vAxis: {'textStyle': {'fontSize':11}, 'maxValue':110000},
legend: {'position': 'top', 'maxLines': 5, 'textStyle': {bold: true, fontSize: 11, fontName: '"Arial"'}},
tooltip: {
textStyle: {fontName: "'Arial'"}},
series: {
0: {color: 'navy'},
1: {color: 'teal'}
},
annotations: {
textStyle: {bold: true,color: '#000000', fontName: "'Arial'"},
alwaysOutside: true,
isHTML: true,
stemColor: 'none',
text: 'test'
}};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));chart.draw(view, options);}
//current stats sidebar
function drawTable() {
var dataCap2 = document.getElementById("selected3").value;
var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?' + dataCap2);
query2.send(handleQueryResponse2);
}
function handleQueryResponse2(response) {
var data2 = response.getDataTable();
var options2 = {
height: 300,
chartArea: {'left': '5%'},
hAxis: {'textStyle': {'fontSize':11}},
vAxis: {'minValue': '0', 'maxValue':'1', 'format':'percent', 'textStyle': {'fontSize':11}},
legend: {'position': 'top', 'maxLines': 5, 'textStyle': {bold: true, fontSize: 11, fontName: '"Arial"'}},
tooltip: {
textStyle: {fontName: "'Arial'"}},
series: {
//0: {pointsVisible: true, color: '#003366', pointSize: 6},
0: {pointsVisible: true, color: '#cc0000', pointSize: 6}
},
annotations: {
textStyle: {bold: true,color: '#000000', fontName: "'Arial'"},
stem:{color: 'none'}
}
};
var chart2 = new google.visualization.LineChart(document.getElementById('data_div'));
chart2.draw(data2, options2);}
}
</script>
<style type="text/css">
body {text-align: center; font-family: Arial, Helvetica, sans-serif;}
#wrapper {width: 75%; margin: 0 auto; text-align: left;}
#current {float: right; width: 28%; background-color: #ececec; padding: 0 1em; font-size: 80%; margin-left: 5%;}
h2 {margin-top: 2em;}
dt {font-weight: bold; margin-top: .5em;}
dd {padding-top: .25em; margin-top: .25em;}
dd.total {border-top: 1px solid #000;}
#chart_div, #data_div {width: 75%;}
</style>
</head>
<body>
<div id="wrapper">
<h1>Student Enrollment in State Universities and Community Colleges</h1>
<h3>Trend Data</h3>
<form>
<label for="selected2">You are viewing:</label>
<select id="selected2" onchange="initialize()">
<option selected value="A1:E8">All state universities</option>
<option value="F1:I8">Fake University 1</option>
</select>
<div id="chart_div"></div>
<input onClick="window.open('')" type="button" value="Download the complete data set" />
</form>
<h2>Community and Technical Colleges</h2>
<h3>Trend Data</h3>
<form>
<label for="selected3">You are viewing:</label>
<select id="selected3" onChange="initialize()">
<option selected value="sheet=GraduationRates-3Yr&range=A1:B11">3-Year graduation rate</option>
<option value="sheet=GraduationRates-2Yr&range=A1:B11">2-Year graduation rate</option>
</select>
<div id="data_div"></div>
<input onClick="window.open('')" type="button" value="Download the complete data set" />
</form>
</div>
</body>
</html>
[/code]
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>