How could I change the color of the PLAY button of the motion chart?

[Jason Liu]

Hi guys,

I  made a motion chart using R package GoogleVis. I published it on the blogger. The default color for the PLAY button is black. I want to change it into red.
How could I do that? Thanks for the help.

The following is the code:




<!-- MotionChart generated in R 3.3.2 by googleVis 0.6.2 package -->
<!-- Mon Apr 17 10:25:07 2017 -->


<!-- jsHeader -->
<script type="text/javascript">
 
// jsData
function gvisDataMotionChartID50642a2064c0 () {
var data = new google.visualization.DataTable();
var datajson =
[
 [
"Opioid",
2002,
27204287,
85926833,
3.16,
4065035983,
149,
47,
2305111528,
85
],
[
"Opioid",
2003,
28595935,
87198063,
3.05,
4066175823,
142,
47,
2065719946,
72
]
];
data.addColumn('string','Drug');
data.addColumn('number','Year');
data.addColumn('number','Population');
data.addColumn('number','Total purchases');
data.addColumn('number','Avg purchases per person');
data.addColumn('number','Total expenditures');
data.addColumn('number','Avg exp per person');
data.addColumn('number','Avg exp per purchase');
data.addColumn('number','Total OOP');
data.addColumn('number','Avg OOP per person');
data.addRows(datajson);
return(data);
}
 
// jsDrawChart
function drawChartMotionChartID50642a2064c0() {
var data = gvisDataMotionChartID50642a2064c0();
var options = {};
options["width"] = 800;
options["height"] = 400;
options["state"] = "\n{\"iconKeySettings\":[],\"yAxisOption\":\"5\",\"xZoomedDataMin\":0,\"nonSelectedAlpha\":0.2,\n\"orderedByX\":false,\"playDuration\":23955,\"yLambda\":1,\"xZoomedIn\":false,\n\"orderedByY\":false,\"yZoomedIn\":false,\"uniColorForNonSelected\":false,\n\"colorOption\":\"9\",\"xZoomedDataMax\":62,\"sizeOption\":\"6\",\n\"xAxisOption\":\"2\",\"time\":\"2002\",\"yZoomedDataMax\":116.3,\"duration\":{\"multiplier\":1,\"timeUnit\":\"Y\"},\n\"iconType\":\"BUBBLE\",\"xLambda\":1,\"yZoomedDataMin\":0,\"dimensions\":{\"iconDimensions\":[\"dim0\"]},\n\"showTrails\":false}\n";


    var chart = new google.visualization.MotionChart(
    document.getElementById('MotionChartID50642a2064c0')
    );
    chart.draw(data,options);
   

}
 
 
// jsDisplayChart
(function() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
var chartid = "motionchart";
 
// 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(drawChartMotionChartID50642a2064c0);
})();
function displayChartMotionChartID50642a2064c0() {
  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>
 
<!-- jsChart --> 
<script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartMotionChartID50642a2064c0"></script>
 
<!-- divChart -->
 
<div id="MotionChartID50642a2064c0"
  style="width: 800; height: 400;">
</div>