You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
===========================================
This is a little Markdown example file. It uses googleVis package with knitr and markdown to produce interactive plots from Google Visualization API.
In this case change the behaviour of plot.gvis, so that it presents only
the code for the chart rather than making a full web page.
<script type="text/javascript">
// jsData
function gvisDataPieChartID10f7d331cc8b1 () {
var data = new google.visualization.DataTable();
var datajson =
[
[
"New York",
200
],
[
"Boston",
300
],
[
"Miami",
400
],
[
"Chicago",
500
],
[
"Los Angeles",
600
],
[
"Houston",
700
]
];
data.addColumn('string','City');
data.addColumn('number','Popularity');
data.addRows(datajson);
return(data);
}
// jsDrawChart
function drawChartPieChartID10f7d331cc8b1() {
var data = gvisDataPieChartID10f7d331cc8b1();
var options = {};
options["allowHtml"] = true;
options["width"] = 400;
options["height"] = 200;
var chart = new google.visualization.PieChart(
document.getElementById('PieChartID10f7d331cc8b1')
);
chart.draw(data,options);
}
// jsDisplayChart
(function() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
var chartid = "corechart";
// Manually see if chartid is in pkgs (not all browsers support Array.indexOf)
var i, newPackage = true;
for (i = 0; newPackage && i < pkgs.length; i++) {
if (pkgs[i] === chartid)
newPackage = false;
}
if (newPackage)
pkgs.push(chartid);
// Add the drawChart function to the global list of callbacks
callbacks.push(drawChartPieChartID10f7d331cc8b1);
})();
function displayChartPieChartID10f7d331cc8b1() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
window.clearTimeout(window.__gvisLoad);
// The timeout is set to 100 because otherwise the container div we are
// targeting might not be part of the document yet
window.__gvisLoad = setTimeout(function() {
var pkgCount = pkgs.length;
google.load("visualization", "1", { packages:pkgs, callback: function() {
if (pkgCount != pkgs.length) {
// Race condition where another setTimeout call snuck in after us; if
// that call added a package, we must not shift its callback
return;
}
while (callbacks.length > 0)
callbacks.shift()();
} });
}, 100);
}
// jsFooter
</script>
<script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartPieChartID10f7d331cc8b1"></script>
Place two charts next to each other
Example of a gvisGeoChart with gvisTable
Let's have a look at the data first
head(Exports)
## Country Profit Online
## 1 Germany 3 TRUE
## 2 Brazil 4 FALSE
## 3 United States 5 TRUE
## 4 France 4 TRUE
## 5 Hungary 3 FALSE
## 6 India 2 TRUE
<script type="text/javascript">
// jsData
function gvisDataGeoChartID10f7d26bbf6ae () {
var data = new google.visualization.DataTable();
var datajson =
[
[
"Germany",
3
],
[
"Brazil",
4
],
[
"United States",
5
],
[
"France",
4
],
[
"Hungary",
3
],
[
"India",
2
],
[
"Iceland",
1
],
[
"Norway",
4
],
[
"Spain",
5
],
[
"Turkey",
1
]
];
data.addColumn('string','Country');
data.addColumn('number','Profit');
data.addRows(datajson);
return(data);
}
// jsData
function gvisDataTableID10f7d7e402d5f () {
var data = new google.visualization.DataTable();
var datajson =
[
[
"Germany",
3,
true
],
[
"Brazil",
4,
false
],
[
"United States",
5,
true
],
[
"France",
4,
true
],
[
"Hungary",
3,
false
],
[
"India",
2,
true
],
[
"Iceland",
1,
false
],
[
"Norway",
4,
true
],
[
"Spain",
5,
true
],
[
"Turkey",
1,
false
]
];
data.addColumn('string','Country');
data.addColumn('number','Profit');
data.addColumn('boolean','Online');
data.addRows(datajson);
return(data);
}
// jsDrawChart
function drawChartGeoChartID10f7d26bbf6ae() {
var data = gvisDataGeoChartID10f7d26bbf6ae();
var options = {};
options["width"] = 350;
options["height"] = 300;
var chart = new google.visualization.GeoChart(
document.getElementById('GeoChartID10f7d26bbf6ae')
);
chart.draw(data,options);
}
// jsDrawChart
function drawChartTableID10f7d7e402d5f() {
var data = gvisDataTableID10f7d7e402d5f();
var options = {};
options["allowHtml"] = true;
options["height"] = 300;
options["width"] = 200;
var chart = new google.visualization.Table(
document.getElementById('TableID10f7d7e402d5f')
);
chart.draw(data,options);
}
// jsDisplayChart
(function() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
var chartid = "geochart";
// Manually see if chartid is in pkgs (not all browsers support Array.indexOf)
var i, newPackage = true;
for (i = 0; newPackage && i < pkgs.length; i++) {
if (pkgs[i] === chartid)
newPackage = false;
}
if (newPackage)
pkgs.push(chartid);
// Add the drawChart function to the global list of callbacks
callbacks.push(drawChartGeoChartID10f7d26bbf6ae);
})();
function displayChartGeoChartID10f7d26bbf6ae() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
window.clearTimeout(window.__gvisLoad);
// The timeout is set to 100 because otherwise the container div we are
// targeting might not be part of the document yet
window.__gvisLoad = setTimeout(function() {
var pkgCount = pkgs.length;
google.load("visualization", "1", { packages:pkgs, callback: function() {
if (pkgCount != pkgs.length) {
// Race condition where another setTimeout call snuck in after us; if
// that call added a package, we must not shift its callback
return;
}
while (callbacks.length > 0)
callbacks.shift()();
} });
}, 100);
}
// jsDisplayChart
(function() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
var chartid = "table";
// Manually see if chartid is in pkgs (not all browsers support Array.indexOf)
var i, newPackage = true;
for (i = 0; newPackage && i < pkgs.length; i++) {
if (pkgs[i] === chartid)
newPackage = false;
}
if (newPackage)
pkgs.push(chartid);
// Add the drawChart function to the global list of callbacks
callbacks.push(drawChartTableID10f7d7e402d5f);
})();
function displayChartTableID10f7d7e402d5f() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
window.clearTimeout(window.__gvisLoad);
// The timeout is set to 100 because otherwise the container div we are
// targeting might not be part of the document yet
window.__gvisLoad = setTimeout(function() {
var pkgCount = pkgs.length;
google.load("visualization", "1", { packages:pkgs, callback: function() {
if (pkgCount != pkgs.length) {
// Race condition where another setTimeout call snuck in after us; if
// that call added a package, we must not shift its callback
return;
}
while (callbacks.length > 0)
callbacks.shift()();
} });
}, 100);
}
// jsFooter
</script>
<script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartGeoChartID10f7d26bbf6ae"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartTableID10f7d7e402d5f"></script>
<script type="text/javascript">
// jsData
function gvisDataScatterChartID10f7d52b78f89 () {
var data = new google.visualization.DataTable();
var datajson =
[
[
58,
115
],
[
59,
117
],
[
60,
120
],
[
61,
123
],
[
62,
126
],
[
63,
129
],
[
64,
132
],
[
65,
135
],
[
66,
139
],
[
67,
142
],
[
68,
146
],
[
69,
150
],
[
70,
154
],
[
71,
159
],
[
72,
164
]
];
data.addColumn('number','height');
data.addColumn('number','weight');
data.addRows(datajson);
return(data);
}
// jsDrawChart
function drawChartScatterChartID10f7d52b78f89() {
var data = gvisDataScatterChartID10f7d52b78f89();
var options = {};
options["allowHtml"] = true;
options["vAxis"] = {title:'weight (lbs)'};
options["hAxis"] = {title:'height (in)'};
chartScatterChartID10f7d52b78f89 = new google.visualization.ChartWrapper({
dataTable: data,
chartType: 'ScatterChart',
containerId: 'ScatterChartID10f7d52b78f89',
options: options
});
chartScatterChartID10f7d52b78f89.draw();
}
function openEditorScatterChartID10f7d52b78f89() {
var editor = new google.visualization.ChartEditor();
google.visualization.events.addListener(editor, 'ok',
function() {
chartScatterChartID10f7d52b78f89 = editor.getChartWrapper();
chartScatterChartID10f7d52b78f89.draw(document.getElementById('ScatterChartID10f7d52b78f89'));
});
editor.openDialog(chartScatterChartID10f7d52b78f89);
}
// jsDisplayChart
(function() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
var chartid = "charteditor";
// Manually see if chartid is in pkgs (not all browsers support Array.indexOf)
var i, newPackage = true;
for (i = 0; newPackage && i < pkgs.length; i++) {
if (pkgs[i] === chartid)
newPackage = false;
}
if (newPackage)
pkgs.push(chartid);
// Add the drawChart function to the global list of callbacks
callbacks.push(drawChartScatterChartID10f7d52b78f89);
})();
function displayChartScatterChartID10f7d52b78f89() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
window.clearTimeout(window.__gvisLoad);
// The timeout is set to 100 because otherwise the container div we are
// targeting might not be part of the document yet
window.__gvisLoad = setTimeout(function() {
var pkgCount = pkgs.length;
google.load("visualization", "1", { packages:pkgs, callback: function() {
if (pkgCount != pkgs.length) {
// Race condition where another setTimeout call snuck in after us; if
// that call added a package, we must not shift its callback
return;
}
while (callbacks.length > 0)
callbacks.shift()();
} });
}, 100);
}
// jsFooter
</script>
<script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartScatterChartID10f7d52b78f89"></script>
<script type="text/javascript">
// jsData
function gvisDataIntensityMapID10f7d113095cc () {
var data = new google.visualization.DataTable();
var datajson =
[
[
"US",
1,
23
],
[
"GB",
3,
12
],
[
"BR",
4,
32
]
];
data.addColumn('string','country');
data.addColumn('number','val1');
data.addColumn('number','val2');
data.addRows(datajson);
return(data);
}
// jsDrawChart
function drawChartIntensityMapID10f7d113095cc() {
var data = gvisDataIntensityMapID10f7d113095cc();
var options = {};
options["width"] = 600;
var chart = new google.visualization.IntensityMap(
document.getElementById('IntensityMapID10f7d113095cc')
);
chart.draw(data,options);
}
// jsDisplayChart
(function() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
var chartid = "intensitymap";
// Manually see if chartid is in pkgs (not all browsers support Array.indexOf)
var i, newPackage = true;
for (i = 0; newPackage && i < pkgs.length; i++) {
if (pkgs[i] === chartid)
newPackage = false;
}
if (newPackage)
pkgs.push(chartid);
// Add the drawChart function to the global list of callbacks
callbacks.push(drawChartIntensityMapID10f7d113095cc);
})();
function displayChartIntensityMapID10f7d113095cc() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
window.clearTimeout(window.__gvisLoad);
// The timeout is set to 100 because otherwise the container div we are
// targeting might not be part of the document yet
window.__gvisLoad = setTimeout(function() {
var pkgCount = pkgs.length;
google.load("visualization", "1", { packages:pkgs, callback: function() {
if (pkgCount != pkgs.length) {
// Race condition where another setTimeout call snuck in after us; if
// that call added a package, we must not shift its callback
return;
}
while (callbacks.length > 0)
callbacks.shift()();
} });
}, 100);
}
// jsFooter
</script>
<script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartIntensityMapID10f7d113095cc"></script>
<script type="text/javascript">
// jsData
function gvisDataComboChartID10f7dcba8ce5 () {
var data = new google.visualization.DataTable();
var datajson =
[
[
"New York",
450,
200
],
[
"Boston",
450,
300
],
[
"Miami",
450,
400
],
[
"Chicago",
450,
500
],
[
"Los Angeles",
450,
600
],
[
"Houston",
450,
700
]
];
data.addColumn('string','City');
data.addColumn('number','Mean');
data.addColumn('number','Popularity');
data.addRows(datajson);
return(data);
}
// jsDrawChart
function drawChartComboChartID10f7dcba8ce5() {
var data = gvisDataComboChartID10f7dcba8ce5();
var options = {};
options["allowHtml"] = true;
options["seriesType"] = "bars";
options["width"] = 450;
options["height"] = 300;
options["title"] = "City Popularity";
options["series"] = {0: {type:"line"}};
var chart = new google.visualization.ComboChart(
document.getElementById('ComboChartID10f7dcba8ce5')
);
chart.draw(data,options);
}
// jsDisplayChart
(function() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
var chartid = "corechart";
// Manually see if chartid is in pkgs (not all browsers support Array.indexOf)
var i, newPackage = true;
for (i = 0; newPackage && i < pkgs.length; i++) {
if (pkgs[i] === chartid)
newPackage = false;
}
if (newPackage)
pkgs.push(chartid);
// Add the drawChart function to the global list of callbacks
callbacks.push(drawChartComboChartID10f7dcba8ce5);
})();
function displayChartComboChartID10f7dcba8ce5() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
window.clearTimeout(window.__gvisLoad);
// The timeout is set to 100 because otherwise the container div we are
// targeting might not be part of the document yet
window.__gvisLoad = setTimeout(function() {
var pkgCount = pkgs.length;
google.load("visualization", "1", { packages:pkgs, callback: function() {
if (pkgCount != pkgs.length) {
// Race condition where another setTimeout call snuck in after us; if
// that call added a package, we must not shift its callback
return;
}
while (callbacks.length > 0)
callbacks.shift()();
} });
}, 100);
}
// jsFooter
</script>
<script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartComboChartID10f7dcba8ce5"></script>
## Set options back to original options
options(op)
Session info
sessionInfo()
## R version 3.0.1 (2013-05-16)
## Platform: x86_64-apple-darwin10.8.0 (64-bit)
##
## locale:
## [1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8
##
## attached base packages:
## [1] stats graphics grDevices utils datasets methods base
##
## other attached packages:
## [1] googleVis_0.4.5 knitr_1.4.1
##
## loaded via a namespace (and not attached):
## [1] digest_0.6.3 evaluate_0.4.7 formatR_0.9 RJSONIO_1.0-3
## [5] stringr_0.6.2 tools_3.0.1