<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.js"></script>
<!--script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script-->
<!-- 196 por fila -->
<div class="testdiv">
<svg width="1500" height="270"></svg>
</div>
body {
font-family: Roboto;
}
svg {width: 100%; height: auto;}
div.enable {
overflow-x:auto;
width: 300px;
height: 300px;
padding: 15px;
overflow-y: hidden;
}
/* X-Axis text format */
svg g.x-axis text {
fill: #181F27;
font-size: 12px;
font-weight: bold;
line-height: 14px;
}
/* Y-Axis text format */
svg g.y-axis text {
fill: #A0AEB6;
font-size: 12px;
font-weight: bold;
line-height: 14px;
}
/* X-Axis baseline */
.tick:first-of-type line {
stroke: #DCE1E5;
}
/* X-Axis dashed lines */
.tick:not(:first-of-type) line {
stroke: #DCE1E5;
stroke-dasharray: 6,2;
}
/* In tooltip content text format */
.d3-tip span.expense {
color: #181F27 !important;
font-family: Roboto !important;
font-size: 14px !important;
font-weight: bold !important;
line-height: 16px !important;
}
/* Tooltip */
.d3-tip {
margin-top: 8px;
line-height: 1;
font-weight: bold !important;
font-size: 14px !important;
padding: 15px;
background: transparent;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAA1CAYAAAAasVavAAACQklEQVR4nO2aT2sTQRjGZ/9E6x6UUFMtraAIXjyJn8IvIEgP9uTFj+DZq34Fe9a7X8LaKi2CGGsb0yiJEZWmSZrdcd46kz5b2uJlMoc8P3iTyWZhnve3O7sJbKT+EdUbrXtK6Re60DU1JURx1Davyzevzb82H3Uq2+QLrYuV+drs5WzmfNiEE6TXH9Ra7R8rZjinxI3dHimtpkqEcNiv6VvZE+JIxnRDGUBJBlGUUYIyAMoAKAOgDIAyAMoAKAOgDIAyAMoAKAOgDIAyAMoAKAOgDIAyAMoAKAOgDIAyAMoAKAOgDIAyAMoAKAOgDIAyAMoAKAOgDIAyAMoAxjKiKNIhg4QC+07HW7X++PPXn1vZhRmvT/6laaKS+P9OyDwv1CjPvWXp7fe19D3O5gZb2437+eLC0zj5fd3b7OY4JEl8Y+FKLasYKWcxPBip5rf2fqGLuq80Ra6/7HxtPhmnsyWHKrXl9cxYXd9cqs5Wny1enTtViIjY/d7pdTvdx3fv3H7lMY4skZGtwslwQhJ1JMOXlHj9/Yeli9VLz08SckzESwnpIYOG99zOcbjtuIzUY1VMyQPqmRHy6HNjd880rx2D4YHearT2Vtc2l2Ufu2/FY57E9u0cKBTiu5zwkpD+YKilRMSbtY2HVsS5E8L6rInjJpYmpdlMmq9vN7ufdpqdt+82HqiyiIkGDWHEzYnL0t1rZe3KxcytY2Fiv3/Ovr/5Q4RgkzKW5nMVSIQLFQq8a7mxVuUrfZBAoTht/iB/Df4C4IS8WTNVMN8AAAAASUVORK5CYII=);
/* 67x53 */
width:90px;
height:53px;
background-repeat: no-repeat;
text-align:center;
-webkit-background-size: 90px 53px;
-moz-background-size: 90px 53px;
-o-background-size: 90px 53px;
background-size: 90px 53px;
}
$(document).ready( function(){
//Datos a mostrar en el gráfico
data = [
{category:'Eyecare',expense:60},
{category:'Medical',expense:60},
{category:'Dentist',expense:60},
{category:'Eyecare1',expense:60},
{category:'Medical1',expense:60},
{category:'Dentist1',expense:60},
{category:'Eyecare2',expense:60},
{category:'Medical2',expense:60},
{category:'Dentist2',expense:33}
];
var svg = d3.select("svg"),
//Size and place of the graph
margin = {top: 50, right: 50, bottom: 50, left: 50},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height"),
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//Format of the x axis values
var formatNumber = d3.format(".2f");
//AXIS - I
//xAxis
var scaleX = d3.scaleBand()
.domain(data.map(function(d) { return d.category; }))
.range([0, width])
.padding(0.7);
var xAxis = d3.axisBottom(scaleX)
.tickPadding(10)
.tickSize(0);
function customXAxis(g) {
g.call(xAxis);
g.select(".domain").remove();
}
g.append("g")
.attr("class", "x-axis")
.attr("transform", "translate(-" + margin.left + "," + height + ")")
.call(customXAxis);
//yAxis
var yMax = d3.max(data, function(d) { return d.expense; });
var scaleY = d3.scaleLinear()
.domain([0, yMax * ( 1 + 0.40 )])
.range([height, 0]);
var yAxis = d3.axisRight(scaleY)
.tickSize(width)
.tickFormat(function(d) {
return "$" + formatNumber(d);
});
function customYAxis(g) {
g.call(yAxis);
g.select(".domain").remove();
g.selectAll(".tick text")
.attr("x", -margin.left + 10)
.attr("y", 0);
}
g.append("g")
.attr("class", "y-axis")
.call(customYAxis);
//AXIS - F
//TOOLTIPS - I
// Setup the tool tip. Note that this is just one example, and that many styling options are available.
// See original documentation for more details on styling: http://labratrevenge.com/d3-tip/
var tooltip = d3.tip()
.attr("class", "d3-tip")
.offset([-8, 0])
.html(
function(d) {
return "<span class='expense'>" +
"$" + formatNumber(d.expense) +
"</span>";
}
);
svg.call(tooltip);
// append the rectangles for the bar chart
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return scaleX(d.category); })
.attr("width", scaleX.bandwidth())
.attr("y", function(d) { return scaleY(d.expense) + margin.bottom; })
.attr("height", function(d) { return height - scaleY(d.expense); })
.on('mouseover', tooltip.show)
.on('mouseout', tooltip.hide);
function showTooltip() {
tooltip.show;
$("#manolo").popover();
}
//Colour the bars by the colors array
var colors = ["#FF0000", "#00FF00", "#0000FF", "#CC0000", "#00CC00", "#0000CC", "#FF0000", "#AA0000", "#00AA00", "#0000AA"];
$(".bar").each(function(index, bar) {
$(this).css("fill", colors[index]);
});
});
