Skip to Content
0
Former Member
Aug 05, 2016 at 11:26 AM

Bullet Chart in WebI 4.2

213 Views

I wanted to bind some charts with HTML and Javascript into a report. I created a cell and added the HTML code for a D3 bullet chart. It works but somehow the chart is behind the report page. How can I fix this?

<html> 

<head> 

<script src='https://d3js.org/d3.v3.min.js' type='text/javascript'></script> 

<script id="scripty" src='https://gist.githubusercontent.com/mbostock/4061961/raw/6eb742223b9795260ba62150196ed0ae4a461e39/bullet.js'></script> 

<style> 


.bullet { font: 10px sans-serif; } 
.bullet .marker { stroke: #000; stroke-width: 2px; } 
.bullet .tick line { stroke: #666; stroke-width: .5px; } 
.bullet .range.s0 { fill: #eee; } 
.bullet .range.s1 { fill: #ddd; } 
.bullet .range.s2 { fill: #ccc; } 
.bullet .measure.s0 { fill: lightsteelblue; } 
.bullet .measure.s1 { fill: steelblue; } 
.bullet .title { font-size: 14px; font-weight: bold; } 
.bullet .subtitle { fill: #999; } 

</style> 

<script> 

var margin = {top: 5, right: 40, bottom: 20, left: 120}, 
    width = 960 - margin.left - margin.right, 
    height = 50 - margin.top - margin.bottom; 

var chart = d3.bullet() 
    .width(width) 
    .height(height); 

d3.json('https://gist.githubusercontent.com/mbostock/4061961/raw/6eb742223b9795260ba62150196ed0ae4a461e39/bullets.json', 

function(error, data) { 
  if (error) throw error; 

  var svg = d3.select("body").selectAll("svg") 
      .data(data) 
    .enter().append("svg") 
      .attr("class", "bullet") 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
      .call(chart); 

  var title = svg.append("g") 
      .style("text-anchor", "end") 
      .attr("transform", "translate(-6," + height / 2 + ")"); 

  title.append("text") 
      .attr("class", "title") 
      .text(function(d) { return d.title; }); 

  title.append("text") 
      .attr("class", "subtitle") 
      .attr("dy", "1em") 
      .text(function(d) { return d.subtitle; }); 

  d3.selectAll("button").on("click", function() { 
    svg.datum(randomize).call(chart.duration(1000)); // TODO automatic transition 
  }); 
}); 

function randomize(d) { 
  if (!d.randomizer) d.randomizer = randomizer(d); 
  d.ranges = d.ranges.map(d.randomizer); 
  d.markers = d.markers.map(d.randomizer); 
  d.measures = d.measures.map(d.randomizer); 
  return d; 
} 

function randomizer(d) { 
  var k = d3.max(d.ranges) * .2; 
  return function(d) { 
    return Math.max(0, d + k * (Math.random() - .5)); 
  }; 
} 

</script> 

</head> 

<div id="scripty" style="width: 800px; height: 300px;"> <button>Update</button></div> 

    

</body> 

</html>

Attachments

1.PNG (103.6 kB)