---
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

```

A third and slightly more complicated example is the [spiderweb](http://www.highcharts.com/demo/polar-spider) chart. 

```
{
  chart: {
    polar: true,
    type: "line"
  },
  title: {
    text: "Budget vs spending",
    x: -80
  },
  pane: {
    size: "80%"
  },
  xAxis: {
    categories: ["Sales", "Marketing", "Development", "Customer Support",
                  "Information Technology", "Administration"],
    tickmarkPlacement: "on",
    lineWidth: 0
  },
  yAxis: {
    gridLineInterpolation: "polygon",
    lineWidth: 0,
    min: 0
  },
  tooltip: {
    shared: true,
    pointFormat: "<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>"
  },
  legend: {
    align: "right",
    verticalAlign: "top",
    y: 70,
    layout: "vertical"
  },
  series: [{
    name: "Allocated Budget",
    data: [43000, 19000, 60000, 35000, 17000, 10000],
    pointPlacement: "on"
  }, {
    name: "Actual Spending",
    data: [50000, 39000, 42000, 31000, 26000, 14000],
    pointPlacement: "on"
  }]
}
```

Here"s the code for the `highchart` object:

```{r}
highchart() %>% 
  hc_chart(polar = TRUE, type = "line") %>% 
  hc_title(text = "Budget vs Spending") %>% 
  hc_xAxis(categories = c("Sales", "Marketing", "Development",
                          "Customer Support",  "Information Technology",
                          "Administration"),
           tickmarkPlacement = "on",
           lineWidth = 0) %>% 
  hc_yAxis(gridLineInterpolation = "polygon",
           lineWidth = 0,
           min = 0) %>% 
  hc_series(
    list(
      name = "Allocated Budget",
      data = c(43000, 19000, 60000, 35000, 17000, 10000),
      pointPlacement = "on"
    ),
    list(
      name = "Actual Spending",
      data = c(50000, 39000, 42000, 31000, 26000, 14000),
     pointPlacement = "on"
    )
  )
```


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}
library("jsonlite")

toJSON(hc$x$hc_opts, pretty = TRUE, auto_unbox = TRUE)
```

