In this section, we will look at the different Google Charts that are available, and talk about why you might want to use them. We will see how to add them to a Shiny application. We will also see how to reskin your dashboard to a different color.

Google Charts is a free resource with which you can draw statistical graphics on any web page. They need an internet connection to work, but other than that limitation they're extremely easy to use, perhaps even easier in Shiny using the googleVis package. You will need to install this package with install.packages("googleVis"). There's a gallery of the different graphics available at https://developers.google.com/chart/interactive/docs/gallery. For our dashboard, we selected the gauge control, which is an attractive addition to the dashboard, and not possible with besar or ggplot. Although, it is possible in other contributors.

Let's have a look at the application:

As you can see, we've changed the header of the dashboard so, it isn't purple. We've also added a gauge using Google Charts. You can see that it shows the rating of the current isolated movement. And we might have some color to control, 0 to 5 is red, 5 to 7 is yellow, and 7 to 10 is green.

Let's look at the code. The first thing to notice is the argument to recall the header. We simply add skin = "purple" to the dashboardPage function. Valid colors are blue, black, purple, green, red, and yellow. Let's now look at the Google Charts control. It is very simply on the UI side, with the htmlOutput function. This function can be used to add any HTML content to the UI. It is surrounded with a div and is marked as HTML.

Let's look at the server side:

output$gauge <- renderGvis({ 
     
    df = data.frame(Label = "Rating",  
                    Value = filter(moviesSubset(),  
                                   title == input$pickMovie)[, "rating"]) 
     
    gvisGauge(df, 
              options = list(min = 0, max = 10, greenFrom = 7, 
                             greenTo = 10, yellowFrom = 5, yellowTo = 7, 
                             redFrom = 0, redTo = 5)) 
     
  }) 

The first function to note is renderGvis. This is a function that allows you to create these charts using Shiny. Within this function, we will find the function that creates the chart (in this case, gvisGgage). This will vary depending on the graph you wish to draw. This particular function accepts a two-column data frame. It doesn't matter what the names of the variables are, but the first should be whatever you want the text on the gauge to read, and the second should be whatever value you want the gauge to have. Multiple row data frames will produce several gauges, but in this case, we've gone with just one. The options are provided in a list and will vary according to the type of graph used. In this case, we've given the minimum and maximum values; otherwise, one of the helpful defaults will be used, as well as the range of scores corresponding to green, yellow, and red.