---
title: "Replicating Highcharts Demos"
author: "Joshua Kunst"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteIndexEntry{Replicating Highcharts Demos}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---

Let"s replicate the [line-lables](http://www.highcharts.com/demo/line-labels) demo. If you click
*View Options* button you'll see the code to create that chart in a html file via javascript. Let's
take a look to the options which are:

```
{
  chart: {
      type: "line"
  },
  title: {
      text: "Monthly Average Temperature"
  },
  subtitle: {
      text: "Source: WorldClimate.com"
  },
  xAxis: {
      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  },
  yAxis: {
      title: {
          text: "Temperature (C)"
      }
  },
  plotOptions: {
      line: {
          dataLabels: {
              enabled: true
          },
          enableMouseTracking: false
      }
  },
  series: [{
      name: "Tokyo",
      data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  }, {
      name: "London",
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
  }]
}
```

The previous code is a javascript object. It's like a dictionary, or if we want we can say is like a named
list. `highcharter` have the implementation of each option in highcharts like `chart`, `title`, etc. With 
each of them you can add the requiered parameters to get the chart what you want. First of all we need
to create the `highchart` object and then add very option what we want.

```{r}
library(highcharter)

highchart() %>% 
  hc_chart(type = "line") %>% 
  hc_title(text = "Monthly Average Temperature") %>% 
  hc_subtitle(text = "Source: WorldClimate.com") %>% 
  hc_xAxis(categories = c("Jan", "Feb", "Mar", "Apr", "May", "Jun",
                          "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")) %>% 
  hc_yAxis(title = list(text = "Temperature (C)")) %>% 
  hc_plotOptions(line = list(
    dataLabels = list(enabled = TRUE),
    enableMouseTracking = FALSE)
    ) %>% 
  hc_series(
    list(
      name = "Tokyo",
      data = c(7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6)
    ),
    list(
      name = "London",
      data = c(3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8)
    )
  )
```

Now, let's try other example: [area stacked percent](http://www.highcharts.com/demo/area-stacked-percent). The
options used are:

```
{
  chart: {
      type: "area"
  },
  title: {
      text: "Historic and Estimated Worldwide Population Distribution by Region"
  },
  subtitle: {
      text: "Source: Wikipedia.org"
  },
  xAxis: {
      categories: ["1750", "1800", "1850", "1900", "1950", "1999", "2050"],
      tickmarkPlacement: "on",
      title: {
          enabled: false
      }
  },
  yAxis: {
      title: {
          text: "Percent"
      }
  },
  tooltip: {
      pointFormat: "<span style="color:{series.color}">{series.name}</span>:
      <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>",
      shared: true
  },
  plotOptions: {
      area: {
          stacking: "percent",
          lineColor: "#ffffff",
          lineWidth: 1,
          marker: {
              lineWidth: 1,
              lineColor: "#ffffff"
          }
      }
  },
  series: [{
      name: "Asia",
      data: [502, 635, 809, 947, 1402, 3634, 5268]
  }, {
      name: "Africa",
      data: [106, 107, 111, 133, 221, 767, 1766]
  }, {
      name: "Europe",
      data: [163, 203, 276, 408, 547, 729, 628]
  }, {
      name: "America",
      data: [18, 31, 54, 156, 339, 818, 1201]
  }, {
      name: "Oceania",
      data: [2, 2, 2, 6, 13, 30, 46]
  }]
}
```

In this example we"ll use the `hc_add_series()` to add every series one by one.

```{r}
hc <- highchart() %>% 
  hc_chart(type = "area") %>% 
  hc_title(text = "Historic and Estimated Worldwide Population Distribution by Region") %>% 
  hc_subtitle(text = "Source: Wikipedia.org") %>% 
  hc_xAxis(categories = c("1750", "1800", "1850", "1900", "1950", "1999", "2050"),
           tickmarkPlacement = "on",
           title = list(enabled = FALSE)) %>% 
  hc_yAxis(title = list(text = "Percent")) %>% 
  hc_tooltip(pointFormat = "<span style=\"color:{series.color}\">{series.name}</span>:
             <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>",
             shared = TRUE) %>% 
  hc_plotOptions(area = list(
     stacking = "percent",
     lineColor = "#ffffff",
     lineWidth = 1,
     marker = list(
       lineWidth = 1,
       lineColor = "#ffffff"
       ))
     ) %>% 
  hc_add_series(name = "Asia", data = c(502, 635, 809, 947, 1402, 3634, 5268)) %>% 
  hc_add_series(name = "Africa", data = c(106, 107, 111, 133, 221, 767, 1766)) %>%
  hc_add_series(name = "Europe", data = c(163, 203, 276, 408, 547, 729, 628)) %>% 
  hc_add_series(name = "America", data = c(18, 31, 54, 156, 339, 818, 1201)) %>% 
  hc_add_series(name = "Oceania", data = c(2, 2, 2, 6, 13, 30, 46)) 
       
hc

```
If you don't get what you hope you must check if you passed all the arguments
correctly. You can compare the javascript object with:

```{r, message=FALSE}
library(jsonlite)
```
```{r}
toJSON(hc$x$hc_opts, pretty = TRUE, auto_unbox = TRUE)
```

