JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="test1"></div> 
<div id="test2"></div> 
<div id="test3"></div> 
<div id="test4"></div> 
<div id="test5"></div>

CSS

#jqgraph01 {
  color:#000;
  border-collapse:separate;
  border-spacing:3px;
  border:1px solid #666;
  background:#fff;
  margin-bottom:10px;
}

#jqgraph01 thead tr th {
  color:#222;
  font:normal normal normal 10px/150% Arial,Verdana,monospace,sans-serif;
  text-align:center;
}

#jqgraph01 tbody tr th {
  color:#222;
  font:normal normal normal 10px/150% Arial,Verdana,monospace,sans-serif;
  border-bottom:2px solid #777;
  text-align:right;
}


#jqgraph01 tbody tr td {
  margin:0;
  padding:0;
  text-align:left;
  background:#ddd;
  width:250px;
}

#jqgraph01 tbody tr td span {
  margin:0;
  padding:0;
  display:block;
  background:#8c0;
  text-align:right;
}

#jqgraph01 tbody tr td a {
  margin:0;
  padding:1px 2px;
  color:#fff;
  font:normal normal bold 10px/110% Verdana,Arial,monospace;
  position:relative;
  text-decoration:none;
  display:block;
  cursor:default;
}

#jqgraph01 tbody tr td a b {
  margin:0;
  padding:2px 5px;
  color:#fff;
  font:normal normal normal 10px/100% Arial,Verdana,monospace;
  position:absolute;
  top:-13px;
  right:-40px;
  visibility:hidden;
  background:#000;
  filter:alpha(opacity=70);
  -moz-opacity:0.70;
  opacity:0.70;
}

#jqgraph01 tbody tr td a:hover,
#jqgraph01 tbody tr td a:hover b {
  visibility:visible;
  text-decoration:none;
  cursor:pointer;
}


#jqgraph02 {
  color:#000;
  border-collapse:separate;
  border-spacing:3px;
  border:1px solid #222;
  background:#444;
  margin-bottom:10px;
}

#jqgraph02 thead tr th {
  color:#fff;
  font:normal normal normal 10px/150% Arial,Verdana,monospace,sans-serif;
  text-align:center;
}

#jqgraph02 tbody tr th {
  color:#fff;
  font:normal normal normal 10px/150% Arial,Verdana,monospace,sans-serif;
  border-bottom:2px solid #777;
  text-align:right;
}


#jqgraph02 tbody tr td {
  margin:0;
  padding:0;
  text-align:left;
  background:#666;
  width:200px;
}

#jqgraph02 tbody tr td span {
  margin:0;
  padding:0;
  display:block;
  background:#29f;
 ...

JavaScript

/*
 * jQuery.horizontalBarGraph 1.0.0
 * ---------------------------------------
 * 2008-10-26:##################
 * ---------------------------------------
 * 2008-10-27:############################
 * ---------------------------------------
 */
(function($){
 $.fn.horizontalBarGraph = function(d, a){

  // default setting
  var jqg = {
    graphid     : 'jqgraph02',
    direction   : 'horizontal',/*vertical|horizontal*/
    loading     : 'http://nishikori.net/shared/img/loadingAnimation.gif',
    label2label : 'DATE',
    label2value : 'VALUE'
  };

  // rewrite of setting
  if (a) $.extend(jqg, a);

  var str = '';
  str += '<table cellpadding="0" cellspacing="3" id="'+jqg.graphid+'">';
  str += '<thead><tr>';
  str += '<th>'+jqg.label2label+'</th>';
  str += '<th>'+jqg.label2value+'</th>';
  str += '</tr></thead>';
  str += '<tbody>';

  var $_per = 0;
  var $_max = Math.max.apply(null, d.datas);
  d.labels = (d.labels === null) ? d.datas : d.labels ;
  //var $_sum = d.datas.reduce(function(a, b){ return a + b; });

  for (var i in d.datas)
  {
    $_per = Math.round( d.datas[i] / $_max * 100 );
    str += '<tr><th>'+d.items[i]+'</th><td><span style="width:'+$_per+'%;"><a href="javascript:void(0);">'+d.labels[i]+'<b>'+d.items[i]+'</b></a></span></td></tr>';
  }

  str += '</tbody>';
  str += '</table>';

  $(this).append(str);
  delete str, $_per, $_max;

  return;
};
})(jQuery);


jQuery(document).ready(function($){

  var $_value = [100,120,30,50,25,80];
  var $_label = ['hoge','honge','ほげ','ばか','うんち','うんこ'];
  var $_item  = [
    '2008.10.01',
    '2008.10.02',
    '2008.10.03',
    '2008.10.04',
    '2008.10.05',
    '2008.10.06',
    '2008.10.07',
    '2008.10.08',
    '2008.10.09',
    '2008.10.10',
    '2008.10.11',
    '2008.10.12',
    '2008.10.13',
    '2008.10.14',
    '2008.10.15',
    '2008.10.16',
    '2008.10.17',
    '2008.10.18',
    '2008.10.19',
    '2008.10.20',
    '2008.10.21',
    '2008.10.22',
    '2008.10.23',
    '2008.10.24'
  ];

 ...