The htmlwidgetexamples from leonawicz

Adjust canvas size

I am pretty sure that this is an abandoned repo, but anyways... If anyone gets and can help me, I'd be grateful.

The issue I am having is that the sparklines are created inside a canvas with fixed width, so it won't fit a full column width by default. Is there a way to overide this behavior from the js function?

Problems with data tables and sparklines

Hi @leonawicz,

Thanks for your great tutorial on http://leonawicz.github.io/HtmlWidgetExamples/ex_dt_sparkline.html

I'm using your tutorial to make a table with sparklines using Rmarkdown.
It works OK, but I'm trying to use the new feature of Rmarkdown: {.tabset}

It works fine, if I put the "sparktable" in the first tab. But if I put on the second or another tab, the table shows the raw data (numbers) and not show the sparks.
I tried to solve and understand the problem, but I can't...

The code is like this: (ignore the / before the ``)

## Comparações detalhadas {.tabset}

### Tabela sumário

```{r summary_table, echo = FALSE}
# Translating the metrics names 
ga.month.spark.table[1] <- ptcolsumm
## Making the table, Last month table
ga.month.spark.table <- datatable(ga.month.spark.table, options = list(
  columnDefs = columnDefs1, fnDrawCallback = fnDrawCallback, autoWidth = FALSE, dom = 'C<"clear">t'),
  caption = "Visitas ao site no último mês",
  colnames = c("Métricas", "12 Meses", "YOY", "Mês Retrasado", "Mês Passado")
) # %>% formatRound(c(1,3,5,7,9,11,13,15,17), 1)
# Ploting the table
ga.month.spark.table$dependencies <- append(ga.month.spark.table$dependencies, htmlwidgets:::getDependency("sparkline"))
ga.month.spark.table
/```
### test
/```{r teste, echo = FALSE}
ga.month.spark.table
/```

Part of the HTML source code:

<div id="comparacoes-detalhadas" class="section level2 tabset">
<h2>Comparações detalhadas</h2>
<div id="tabela-sumario" class="section level3">
<h3>Tabela sumário</h3>
<p><div id="htmlwidget-9771" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-9771">{"x":{"data":[["1","2","3","4","5","6","7","8","9"],["Usuários","Sessões","Pageview Único","Pageviews","Tempo Médio","Rejeição","Taxa de Rejeição","Taxa de Saída","Tempo de carregamento"],["  33,  78, 249, 322,1083,1354, 949, 581, 269, 133, 632, 519","  55,  79, 252, 327,1091,1402, 957, 618, 301, 152, 734, 613","  55,  79, 252, 335,1222,1388,1025, 669, 336, 173, 769, 671","  87,  95, 262, 364,1233,1395,1029, 800, 421, 189, 830, 736","173.35, 18.68,  6.71,  9.88, 29.29,  3.12, 28.39, 57.53, 91.26, 22.61, 25.91, 54.44","  40,  73, 245, 290, 908,1372, 860, 537, 237, 141, 690, 574","0.73,0.92,0.97,0.89,0.83,0.98,0.90,0.87,0.79,0.93,0.94,0.94","0.63,0.83,0.96,0.90,0.87,0.99,0.92,0.75,0.70,0.80,0.88,0.83"," 2.80, 0.00, 0.00, 0.00,12.04,14.92, 7.26,25.63, 0.00, 0.00, 0.00, 0.00"],[" 5, 2, 4, 3, 4, 3, 3, 3, 4, 4, 1, 6, 4, 4, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,29, 0, 0, 3,19"," 5, 2, 4, 3, 4, 3, 3, 3, 4, 4, 1, 6, 4, 4, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,29, 0, 0, 3,19"," 5, 2, 4, 3, 4, 3, 3, 3, 4, 4, 1, 6, 4, 4, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,29, 0, 0, 3,19"," 5, 2, 4, 3, 4, 5, 3, 3, 5, 5, 1, 6, 4, 8, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,31, 0, 0, 3,19","  0.00,  0.00,  0.00,  0.00,  0.00, 26.00,  0.00,  0.00,  3.25,360.25,  0.00,  0.00,  0.00, 39.75,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00"," 5, 2, 4, 3, 4, 1, 3, 3, 3, 3, 1, 6, 4, 2, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,28, 0, 0, 3,19","1.00,1.00,1.00,1.00,1.00,0.33,1.00,1.00,0.75,0.75,1.00,1.00,1.00,0.50,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,0.97,0.00,0.00,1.00,1.00","1.00,1.00,1.00,1.00,1.00,0.60,1.00,1.00,0.80,0.80,1.00,1.00,1.00,0.50,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,0.94,0.00,0.00,1.00,1.00","0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00"],[" 1, 7, 3, 1, 1, 0, 0, 2, 3, 6, 3, 2, 1, 0, 0, 0, 2, 4, 0, 1, 1, 1,10, 0, 2, 8, 2, 4, 2"," 1, 7, 3, 1, 1, 0, 0, 2, 4,13, 6, 6, 4, 0, 0, 0, 2, 4, 0, 1, 1, 1,14, 0, 3,11, 2, 3, 4"," 1, 8, 5, 2, 2, 0, 0, 2, 4,14, 6, 8, 4, 0, 0, 0, 2, 4, 0, 1, 1, 1,42, 0, 3,11, 2, 3, 5","  1,  9,  5,  2,  2,  0,  0,  3,  4, 14,  6,  9,  6,  0,  0,  0,  2,  4,  0,  1,  1,  1,118,  0,  3, 11,  3,  3, 10","  0.000, 25.857, 24.667,  5.000, 11.000,  0.000,  0.000, 12.500,  0.000,  1.692,  0.000, 57.667,376.750,  0.000,  0.000,  0.000,  0.000,  0.000,  0.000,  0.000,  0.000,  0.000,222.143,  0.000,  0.000,  0.091,315.000,  0.000,417.250"," 1, 5, 2, 0, 0, 0, 0, 0, 4,12, 6, 5, 2, 0, 0, 0, 2, 4, 0, 1, 1, 1, 2, 0, 3,10, 1, 3, 2","1.00,0.71,0.67,0.00,0.00,0.00,0.00,0.00,1.00,0.92,1.00,0.83,0.50,0.00,0.00,0.00,1.00,1.00,0.00,1.00,1.00,1.00,0.14,0.00,1.00,0.91,0.50,1.00,0.50","1.00,0.78,0.60,0.50,0.50,0.00,0.00,0.67,1.00,0.93,1.00,0.67,0.67,0.00,0.00,0.00,1.00,1.00,0.00,1.00,1.00,1.00,0.12,0.00,1.00,1.00,0.67,1.00,0.40","0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00"],["4,2,3,2,2,0,1,4,4,2,1,0,0,0,2,1,6,4,0,2,4,2,2,2,1,6,2,3,2,2,5","5,6,3,1,2,0,2,4,4,2,1,0,0,0,2,1,6,4,0,2,6,2,2,2,1,6,2,3,2,2,7","5,7,5,3,2,0,3,5,5,3,1,0,0,0,3,1,6,4,0,3,7,2,2,3,1,6,2,3,3,5,8"," 7, 9, 6,10, 2, 0, 5, 6, 7, 5, 1, 0, 0, 0, 3, 2, 6, 4, 0, 3, 7, 2, 2, 3, 1, 6, 2, 5, 3, 6, 8","110.80,231.17, 18.00, 72.00,  0.00,  0.00, 26.50, 68.50,141.75,539.50,  0.00,  0.00,  0.00,  0.00, 13.00,  0.00,  0.33,  0.00,  0.00, 10.50,  1.17,  0.00,  0.00,112.00,  0.00,  0.00,  0.00,350.67, 21.50, 40.50,  2.00","3,3,1,0,2,0,1,2,2,1,1,0,0,0,1,0,5,4,0,1,5,2,2,1,1,6,2,1,1,0,6","0.60,0.50,0.33,0.00,1.00,0.00,0.50,0.50,0.50,0.50,1.00,0.00,0.00,0.00,0.50,0.00,0.83,1.00,0.00,0.50,0.83,1.00,1.00,0.50,1.00,1.00,1.00,0.33,0.50,0.00,0.86","0.71,0.67,0.50,0.10,1.00,0.00,0.40,0.67,0.57,0.40,1.00,0.00,0.00,0.00,0.67,0.50,1.00,1.00,0.00,0.67,0.86,1.00,1.00,0.67,1.00,1.00,1.00,0.60,0.67,0.33,0.88","0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,2.45,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00"]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th> \u003c/th>\n      <th>Métricas\u003c/th>\n      <th>12 Meses\u003c/th>\n      <th>YOY\u003c/th>\n      <th>Mês Retrasado\u003c/th>\n      <th>Mês Passado\u003c/th>\n    \u003c/tr>\n  \u003c/thead>\n\u003c/table>","options":{"columnDefs":[{"width":"10px","targets":2,"render":"function(data, type, full){\n              return '<span class=sparkmonth>' + data + '\u003c/span>'           \n              }"},{"width":"10px","targets":[3,4,5],"render":"function(data, type, full){\n              return '<span class=sparkday>' + data + '\u003c/span>'           \n              }"},{"orderable":false,"targets":0}],"fnDrawCallback":"function (oSettings, json) { $('.sparkmonth:not(:has(canvas))').sparkline('html', { type : 'bar', negBarColor : 'red', barColor : 'blue', highlightColor: 'black' });\n  $('.sparkday:not(:has(canvas))').sparkline('html', { type : 'line', fillColor : '#E8E8E8', lineColor : 'blue', spotRadius : 2, highlightSpotColor : 'red', highlightLineColor : 'black' });\n}\n","autoWidth":false,"dom":"C<\"clear\">t","order":[],"orderClasses":false},"callback":null,"caption":"<caption>Visitas ao site no último mês\u003c/caption>","filter":"none"},"evals":["options.columnDefs.0.render","options.columnDefs.1.render","options.fnDrawCallback"],"jsHooks":[]}</script></p>
</div>
<div id="teste" class="section level3">
<h3>teste</h3>
<p><div id="htmlwidget-6406" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-6406">{"x":{"data":[["1","2","3","4","5","6","7","8","9"],["Usuários","Sessões","Pageview Único","Pageviews","Tempo Médio","Rejeição","Taxa de Rejeição","Taxa de Saída","Tempo de carregamento"],["  33,  78, 249, 322,1083,1354, 949, 581, 269, 133, 632, 519","  55,  79, 252, 327,1091,1402, 957, 618, 301, 152, 734, 613","  55,  79, 252, 335,1222,1388,1025, 669, 336, 173, 769, 671","  87,  95, 262, 364,1233,1395,1029, 800, 421, 189, 830, 736","173.35, 18.68,  6.71,  9.88, 29.29,  3.12, 28.39, 57.53, 91.26, 22.61, 25.91, 54.44","  40,  73, 245, 290, 908,1372, 860, 537, 237, 141, 690, 574","0.73,0.92,0.97,0.89,0.83,0.98,0.90,0.87,0.79,0.93,0.94,0.94","0.63,0.83,0.96,0.90,0.87,0.99,0.92,0.75,0.70,0.80,0.88,0.83"," 2.80, 0.00, 0.00, 0.00,12.04,14.92, 7.26,25.63, 0.00, 0.00, 0.00, 0.00"],[" 5, 2, 4, 3, 4, 3, 3, 3, 4, 4, 1, 6, 4, 4, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,29, 0, 0, 3,19"," 5, 2, 4, 3, 4, 3, 3, 3, 4, 4, 1, 6, 4, 4, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,29, 0, 0, 3,19"," 5, 2, 4, 3, 4, 3, 3, 3, 4, 4, 1, 6, 4, 4, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,29, 0, 0, 3,19"," 5, 2, 4, 3, 4, 5, 3, 3, 5, 5, 1, 6, 4, 8, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,31, 0, 0, 3,19","  0.00,  0.00,  0.00,  0.00,  0.00, 26.00,  0.00,  0.00,  3.25,360.25,  0.00,  0.00,  0.00, 39.75,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00,  0.00"," 5, 2, 4, 3, 4, 1, 3, 3, 3, 3, 1, 6, 4, 2, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,28, 0, 0, 3,19","1.00,1.00,1.00,1.00,1.00,0.33,1.00,1.00,0.75,0.75,1.00,1.00,1.00,0.50,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,0.97,0.00,0.00,1.00,1.00","1.00,1.00,1.00,1.00,1.00,0.60,1.00,1.00,0.80,0.80,1.00,1.00,1.00,0.50,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,0.94,0.00,0.00,1.00,1.00","0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00"],[" 1, 7, 3, 1, 1, 0, 0, 2, 3, 6, 3, 2, 1, 0, 0, 0, 2, 4, 0, 1, 1, 1,10, 0, 2, 8, 2, 4, 2"," 1, 7, 3, 1, 1, 0, 0, 2, 4,13, 6, 6, 4, 0, 0, 0, 2, 4, 0, 1, 1, 1,14, 0, 3,11, 2, 3, 4"," 1, 8, 5, 2, 2, 0, 0, 2, 4,14, 6, 8, 4, 0, 0, 0, 2, 4, 0, 1, 1, 1,42, 0, 3,11, 2, 3, 5","  1,  9,  5,  2,  2,  0,  0,  3,  4, 14,  6,  9,  6,  0,  0,  0,  2,  4,  0,  1,  1,  1,118,  0,  3, 11,  3,  3, 10","  0.000, 25.857, 24.667,  5.000, 11.000,  0.000,  0.000, 12.500,  0.000,  1.692,  0.000, 57.667,376.750,  0.000,  0.000,  0.000,  0.000,  0.000,  0.000,  0.000,  0.000,  0.000,222.143,  0.000,  0.000,  0.091,315.000,  0.000,417.250"," 1, 5, 2, 0, 0, 0, 0, 0, 4,12, 6, 5, 2, 0, 0, 0, 2, 4, 0, 1, 1, 1, 2, 0, 3,10, 1, 3, 2","1.00,0.71,0.67,0.00,0.00,0.00,0.00,0.00,1.00,0.92,1.00,0.83,0.50,0.00,0.00,0.00,1.00,1.00,0.00,1.00,1.00,1.00,0.14,0.00,1.00,0.91,0.50,1.00,0.50","1.00,0.78,0.60,0.50,0.50,0.00,0.00,0.67,1.00,0.93,1.00,0.67,0.67,0.00,0.00,0.00,1.00,1.00,0.00,1.00,1.00,1.00,0.12,0.00,1.00,1.00,0.67,1.00,0.40","0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00"],["4,2,3,2,2,0,1,4,4,2,1,0,0,0,2,1,6,4,0,2,4,2,2,2,1,6,2,3,2,2,5","5,6,3,1,2,0,2,4,4,2,1,0,0,0,2,1,6,4,0,2,6,2,2,2,1,6,2,3,2,2,7","5,7,5,3,2,0,3,5,5,3,1,0,0,0,3,1,6,4,0,3,7,2,2,3,1,6,2,3,3,5,8"," 7, 9, 6,10, 2, 0, 5, 6, 7, 5, 1, 0, 0, 0, 3, 2, 6, 4, 0, 3, 7, 2, 2, 3, 1, 6, 2, 5, 3, 6, 8","110.80,231.17, 18.00, 72.00,  0.00,  0.00, 26.50, 68.50,141.75,539.50,  0.00,  0.00,  0.00,  0.00, 13.00,  0.00,  0.33,  0.00,  0.00, 10.50,  1.17,  0.00,  0.00,112.00,  0.00,  0.00,  0.00,350.67, 21.50, 40.50,  2.00","3,3,1,0,2,0,1,2,2,1,1,0,0,0,1,0,5,4,0,1,5,2,2,1,1,6,2,1,1,0,6","0.60,0.50,0.33,0.00,1.00,0.00,0.50,0.50,0.50,0.50,1.00,0.00,0.00,0.00,0.50,0.00,0.83,1.00,0.00,0.50,0.83,1.00,1.00,0.50,1.00,1.00,1.00,0.33,0.50,0.00,0.86","0.71,0.67,0.50,0.10,1.00,0.00,0.40,0.67,0.57,0.40,1.00,0.00,0.00,0.00,0.67,0.50,1.00,1.00,0.00,0.67,0.86,1.00,1.00,0.67,1.00,1.00,1.00,0.60,0.67,0.33,0.88","0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,2.45,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00"]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th> \u003c/th>\n      <th>Métricas\u003c/th>\n      <th>12 Meses\u003c/th>\n      <th>YOY\u003c/th>\n      <th>Mês Retrasado\u003c/th>\n      <th>Mês Passado\u003c/th>\n    \u003c/tr>\n  \u003c/thead>\n\u003c/table>","options":{"columnDefs":[{"width":"10px","targets":2,"render":"function(data, type, full){\n              return '<span class=sparkmonth>' + data + '\u003c/span>'           \n              }"},{"width":"10px","targets":[3,4,5],"render":"function(data, type, full){\n              return '<span class=sparkday>' + data + '\u003c/span>'           \n              }"},{"orderable":false,"targets":0}],"fnDrawCallback":"function (oSettings, json) { $('.sparkmonth:not(:has(canvas))').sparkline('html', { type : 'bar', negBarColor : 'red', barColor : 'blue', highlightColor: 'black' });\n  $('.sparkday:not(:has(canvas))').sparkline('html', { type : 'line', fillColor : '#E8E8E8', lineColor : 'blue', spotRadius : 2, highlightSpotColor : 'red', highlightLineColor : 'black' });\n}\n","autoWidth":false,"dom":"C<\"clear\">t","order":[],"orderClasses":false},"callback":null,"caption":"<caption>Visitas ao site no último mês\u003c/caption>","filter":"none"},"evals":["options.columnDefs.0.render","options.columnDefs.1.render","options.fnDrawCallback"],"jsHooks":[]}</script></p>
</div>

The first one appear OK, but the second (test) one no... even if I change the code, only the first appear OK.

You have some idea to solve this?

Thanks!!!!

leonawicz / htmlwidgetexamples Goto Github PK

htmlwidgetexamples's People

Stargazers

Watchers

Forkers

htmlwidgetexamples's Issues

Adjust canvas size

Problems with data tables and sparklines

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent