How do I implement charts in Bootstrap

Question

I m referring to the bar charts in the background  they are actually really subtle  of the repositories here  Example  https   github com search l ruby amp q stars 3A 3E1 amp s forks amp type Repositories  What I have is a table  and I want the background of the table cells to be a bar-chart of the user s progress  Any pointers on how I get this thing done

User · Answer

Definitely late to the party  anyway  for those interested  picking up on Lan s mention of HTML5 canvas  you can use gRapha  l Charting which has a MIT License  instead of HighCharts dual license   It s not Bootstrap-specific either  so it s more of a general suggestion   I have to admit that HighCharts demos seem very pretty  and I have to warn that gRapha  l is quite hard to understand before becoming proficient with it  Anyway you can easily add nice features to your gRapha  l charts  say  tooltips or zooming effects   so it may be worth the effort

User · Answer

Github did this using the HTML canvas element      This specification defines the 2D Context for the HTML canvas element    The 2D Context provides objects  methods  and properties to draw and   manipulate graphics on a canvas drawing surface    If you use a browser inspector  you see inside every list element a div with a canvas element    lt div class  participation-graph  gt      lt canvas class  bars  data-color-all   F5F5F5  data-color-owner   F5F5F5  data-source   mxcl homebrew graphs owner participation  height  80  width  640  gt  lt  canvas gt   lt  div gt    With CSS  z-index  position     you can put that canvas in the background of a li element or table  in your case   Do a search about jquery pluggins that fit your requirement   Hope this pointers help you to achieve that

User · Answer

I would like to suggest you to use HighCharts  It s just awesome and easy to integrate   Example   HTML    lt script src  http   code highcharts com highcharts js  gt  lt  script gt   lt script src  http   code highcharts com modules exporting js  gt  lt  script gt    lt div id  container  style  min-width  310px  height  400px  margin  0 auto  gt  lt  div gt    Script     function                  container   highcharts               chart                    type   column                             title                    text   Monthly Average Rainfall                             subtitle                    text   Source  WorldClimate com                             xAxis                    categories                         Jan                        Feb                        Mar                        Apr                        May                        Jun                        Jul                        Aug                        Sep                        Oct                        Nov                        Dec                                               yAxis                    min  0                  title                        text   Rainfall  mm                                                tooltip                    headerFormat    lt span style  font-size 10px  gt  point key  lt  span gt  lt table gt                    pointFormat    lt tr gt  lt td style  color  series color  padding 0  gt  series name    lt  td gt                           lt td style  padding 0  gt  lt b gt  point y  1f  mm lt  b gt  lt  td gt  lt  tr gt                    footerFormat    lt  table gt                    shared  true                  useHTML  true                            plotOptions                    column                        pointPadding  0 2                      borderWidth  0                                              series                     name   Tokyo                   data   49 9  71 5  106 4  129 2  144 0  176 0  135 6  148 5  216 4  194 1  95 6  54 4                                    name   New York                   data   83 6  78 8  98 5  93 4  106 0  84 5  105 0  104 3  91 2  83 5  106 6  92 3                                    name   London                   data   48 9  38 8  39 3  41 4  47 0  48 3  59 0  59 6  52 4  65 2  59 3  51 2                                    name   Berlin                   data   42 4  33 2  34 5  39 7  52 6  75 5  57 4  60 4  47 6  39 1  46 8  51 1                                        And here is the fiddle

User · Answer

Update 2018  Here s a simple example using Bootstrap 4 with ChartJs  Use an HTML5 Canvas element for the chart      lt div class  container  gt       lt div class  row  gt           lt div class  col-md-6  gt               lt div class  card  gt                   lt div class  card-body  gt                       lt canvas id  chLine  gt  lt  canvas gt                   lt  div gt               lt  div gt           lt  div gt        lt  div gt        lt  div gt    And then the appropriate JS to populate the chart     var colors      007bff    28a745    var chLine   document getElementById  chLine    var chartData       labels    S    M    T    W    T    F    S      datasets         data   589  445  483  503  689  692  634       borderColor  colors 0       borderWidth  4      pointBackgroundColor  colors 0               data   639  465  493  478  589  632  674       borderColor  colors 1       borderWidth  4      pointBackgroundColor  colors 1          if  chLine      new Chart chLine      type   line     data  chartData    options        scales          yAxes             ticks              beginAtZero  false                               legend          display  false                     Bootstrap 4 Charts Demo

User · Answer

You can use a 3rd party library like Shield UI for charting - that is tested and works well on all legacy and new web browsers and devices

User · Answer

Later than my previous answer  but may be useful anyway  while gRapha  l Charting may be an outdated alternative  a more recent and nicer option may be http   chartjs org - still without any Flash  with a MIT license  and a recently updated GitHub   I ve been using it myself since my last answer  so now I have some web apps with one and some with the other   If you are starting a project anew  try with Chart js first

[css] How do I implement charts in Bootstrap?

Examples related to css

Examples related to ruby-on-rails

Examples related to twitter-bootstrap