http://code.google.com/apis/chart/
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'date');
data.addColumn('number', 'Views');
data.addColumn('number', 'People');
data.addRows([
<?php echo $analytics; ?>
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.AreaChart(document.getElementById('Analytics-Visualization'));
chart.draw(data, {lineWidth:3, pointSize:8, width: 745, height: 240,chartArea:{left:20,top:20,width:640}});
}
</script>
lets say when we do this it does this
to
maybe using the listener stuff ?
For custom tooltips, add the tooltip as an extra column:
function drawVisualization() {
data = new google.visualization.DataTable()
data.addColumn('string', 'Date');
data.addColumn('number');
data.addColumn({type:'string',role:'tooltip'});
data.addRow();
base = 10;
data.setValue(0, 0, 'Datapoint1');
data.setValue(0, 1, base++);
data.setValue(0, 2, " This is my tooltip1 ");
data.addRow();
data.setValue(1, 0, 'Datapoint2');
data.setValue(1, 1, base++);
data.setValue(1, 2, "This is my second tooltip2");
// Draw the chart.
var chart = new google.visualization.BarChart(document.getElementById('visualization'));
chart.draw(data, {legend:'none', width:600, height:400});
}
#Adam; If you want to edit text then check this http://code.google.com/apis/ajax/playground/?type=visualization#pie_chart
you can change your code from here
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);
and if you want your custom tooltip you have to use javascript for these
http://code.google.com/p/gvtooltip/
http://informationandvisualization.de/blog/tooltips-google-chart-api
Related
I am using google chart to show the Gantt chart. The chart is working fine but when i hover on the chart bar, I am seeing Percentage Completed in the tooltip.
Below is the HTML of the same
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['Research', 'Find sources',
new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
['Write', 'Write paper',
null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
['Cite', 'Create bibliography',
null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
['Complete', 'Hand in paper',
null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
['Outline', 'Outline paper',
null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
]);
var options = {
height: 400,
gantt: {
trackHeight: 30
}
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
I can somehow, successfully hide the Resource name column but when I remove the Percentage completed column, I am getting errors like column and row mismatch, the value should not be null, etc.
Can anyone please let me know if there is any way to hide the percent completed value from the tooltip?
Thanks!
When I try to create a column chart using the Google charts visualization javascript API the bar ends up a lot fatter than I expected.
Here's a comparison of two charts that demonstrates the problem. First, a chart with two data points where the resulting bars look normal, then a chart with a single data point where the resulting bar looks weird.
The only difference between the two snippets is:
// two bars
data.addRows([
[1, 1],
[2, 1],
]);
vs.
// one bar
data.addRows([
[1, 1]
]);
Two bars (looks normal)
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawAxisTickColors);
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
// two bars
data.addRows([
[1, 1],
[2, 1],
]);
var options = {
title: 'Tidy lil bars',
hAxis: {
minValue: 0,
maxValue: 4
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Single bar (looks weird)
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawAxisTickColors);
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
// one bar
data.addRows([
[1, 1],
]);
var options = {
title: 'Big ol bar',
hAxis: {
minValue: 0,
maxValue: 4
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
You can use bar.groupWidth to control the width of the columns
from the configuration options...
The width of a group of bars, specified in either of these formats:
Pixels (e.g. 50).
Percentage of the available width for each group (e.g. '20%'), where '100%' means that groups have no space between them.
Type: number or string
Default: The golden ratio, approximately '61.8%'.
i.e. --> bar: { groupWidth: 100 }, //100px
google.charts.load('current', {
callback: drawAxisTickColors,
packages: ['corechart', 'bar']
});
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
data.addRows([
[1, 1],
//[2, 1],
]);
var options = {
bar: { groupWidth: 100 }, //100px
title: 'Tidy lil bars',
hAxis: {
minValue: 0,
maxValue: 4
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
When trying to plot a Line Chart using the Google Charts code I get this error
Error: Type mismatch. Value 0.8 does not match type number in column index 0
The '0.8' is referring to the value p1 in the code.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
[p1,1.89],
[ch_period[17],5],
[3,2],
[5,2],
[5,2],
[6,7]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
I've made a jsfiddle with your code that works: http://jsfiddle.net/kychan/Dfx4V/1/
var p1 = parseInt('4'),
ch_period = {'17':4};
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
[p1, 1.89],
[ch_period[17], 5],
[3, 2],
[5, 2],
[5, 2],
[6, 7]
]);
// Set chart options
var options = {
'title': 'How Much Pizza I Ate Last Night',
'width': 400,
'height': 300
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
drawChart();
The problem was that p1 (and maybe ch_period) isn't the type number. Thus you must make it a number using parseInt(p1) / parseInt(ch_period) or manually assign it to a number.
I have the following code to draw candlestick visualization. But the visualization is not generated. I am unable to trace error using Error Console!.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
function drawVisualization() {
// Populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number');
data.addColumn('number');
data.addColumn('number');
data.addColumn('number');
data.setValue(0, 0,'Mon');
data.setValue(0, 1, '2');
data.setValue(0,2,'6');
data.setValue(0,3,'8');
data.setValue(0,4,'10');
data.setValue(1, 0,'Mon');
data.setValue(1, 1, '2');
data.setValue(1,2,'6');
data.setValue(1,3,'8');
data.setValue(1,4,'10');
// Draw the chart.
var chart = new google.visualization.CandlestickChart(document.getElementById('visualization'));
chart.draw(data, {legend:'none', width:600, height:400});
}
google.setOnLoadCallback(drawVisualization);
</script>
Any Help Greatly Appreciated!
Thank You!
Two problems:
1 - You need to add rows to the table before you try and set their values.
2 - Values for index 1,2,3 and 4 have to be numbers instead of strings since Columns 1,2,3,4 are of a numeric type
...
// Populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number');
data.addColumn('number');
data.addColumn('number');
data.addColumn('number');
//Add new rows first
data.addRow();
data.addRow();
data.setValue(0, 0, 'Mon');
data.setValue(0, 1, 2);
data.setValue(0, 2, 6);
data.setValue(0, 3, 8);
data.setValue(0, 4, 10);
data.setValue(1, 0, 'Mon');
data.setValue(1, 1, 2);
data.setValue(1, 2, 6);
data.setValue(1, 3, 8);
data.setValue(1, 4, 10);
// Draw the chart.
...
Here is a working example
http://jsfiddle.net/WcKFf/2/
Watch the CPU and memory gauges for a second. They move dynamically.
The example code shown below does not move the gauges like that (or at least when I tried it in my own project.)
How do I to get it moving dynamically like that?
(Also, will these gauges slow down my site connecting to Google? On the other hand, will it bring up my rankings?)
The example code and the actual demo are different. Try this instead:
<html>
<head>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id='chart_div'></div>
<script type="text/javascript">
function Timer(){this.t={};this.tick=function(a,b){this.t[a]=[(new Date).getTime(),b]};this.tick("start")}var loadTimer=new Timer;window.jstiming={Timer:Timer,load:loadTimer};if(window.external&&window.external.pageT)window.jstiming.pt=window.external.pageT;if(window.jstiming)window.jstiming.report=function(g,d){var c="";if(window.jstiming.pt){c+="&srt="+window.jstiming.pt;delete window.jstiming.pt}if(window.external&&window.external.tran)c+="&tran="+window.external.tran;var a=g.t,h=a.start;delete a.start;var i=[],e=[];for(var b in a){if(b.indexOf("_")==0)continue;var f=a[b][1];if(f)a[f][0]&&e.push(b+"."+(a[b][0]-a[f][0]));else h&&i.push(b+"."+(a[b][0]-h[0]))}if(d)for(var j in d)c+="&"+j+"="+d[j];(new Image).src=["http://csi.gstatic.com/csi?v=3","&s=gviz&action=",g.name,e.length?"&it="+e.join(",")+c:c,"&rt=",i.join(",")].join("")};
</script>
<script type="text/javascript">
var csi_timer = new window.jstiming.Timer();
csi_timer.name = 'docs_gauge';
google.setOnLoadCallback(drawChart);
function drawChart() {
csi_timer.tick('load');
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addRows(3);
data.setValue(0, 0, 'Memory');
data.setValue(0, 1, 80);
data.setValue(1, 0, 'CPU');
data.setValue(1, 1, 55);
data.setValue(2, 0, 'Network');
data.setValue(2, 1, 68);
csi_timer.tick('data');
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
csi_timer.tick('new');
var options = {width: 400, height: 120, redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90, minorTicks: 5};
chart.draw(data, options);
csi_timer.tick('draw');
window.jstiming.report(csi_timer);
setInterval(function() {
data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 13000);
setInterval(function() {
data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 5000);
setInterval(function() {
data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
chart.draw(data, options);
}, 26000);
}
</script>
</body>
</html>
Their demo uses a pseudo random number generator to update the graph. It's a little misleading.
I draw the initial chart using their code and then use an ajax call to fetch the updated data as a json string - from php. Then I populate the data table and update the chart with jQuery/javascript. I haven't gotten around to making a full tutorial yet b/c it's not ready for production...
The hardest part is getting your data formatted correctly on the server-side and feeding ajax without blowing up the browser. The code appears to be really fast and when you're monitoring a webserver you kinda want the image rendering to be done somewhere else. It works but, at this point, it's still not completely browser agnostic - which is why I chose to use re-write in jQuery.
As far as I know, your page rankings are unrelated...
All of the solutions are using random generated number to animate the gauge for demo. What if you want to show a real value AND animate it at the same time?
Here is the solution:
Code it yourself on JSFiddle
function isEven(n) {
return n % 2 == 0;// true|false
}
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
// Animate Gauges: (ArrayNum(start:0), ColumnInThatArray(start:0), NewValue)
// OR in anoher words(rowIndex, columnIndex, NewValue)
setInterval(function() {
var chartValue = data.getValue(0, 1);
if (isEven(chartValue)){
data.setValue(0, 1, (chartValue + 5));
} else {
data.setValue(0, 1, (chartValue - 5));
}
chart.draw(data, options);
}, 450);// milisecond
setInterval(function() {
var chartValue = data.getValue(1, 1);
if (isEven(chartValue)){
data.setValue(1, 1, (chartValue + 1));
} else {
data.setValue(1, 1, (chartValue - 1));
}
chart.draw(data, options);
}, 600);// milisecond
setInterval(function() {
var chartValue = data.getValue(2, 1);
if (isEven(chartValue)){
data.setValue(2, 1, (chartValue + 3));
} else {
data.setValue(2, 1, (chartValue - 3));
}
chart.draw(data, options);
}, 1000);// milisecond
}