How can I create this inline bar chart like excel spark lines in Javascript?

I have an image example here of this feature that is now available in Excel 2010's spark lines:

Ideally I'd like to have a vertical line as well indicating a max/min for each 开发者_JAVA百科row.

Any resources to this effect (I'm here to learn) would be great.

---

(If you just want to get it done, Google charts will be much quicker and simpler - but if you want to learn, this sounds like a pretty cool little project.)

It sounds like you are primarily having trouble with HTML/CSS.

I would stick with <div> for this, as <table> has more baggage with browsers around setting widths, borders, etc. <div> is pretty much a blank slate. I'd ignore all the extra lines in your example picture (at first, anyways) and focus on creating stacked bars of differing widths, with lines for max and min.

HTML:

<div class="row">
  <div class="value">5873</div>
  <div class="min">3049</div>
  <div class="max">6039</div>
</div>

CSS:

div {
    height: 20px;  /* You'll want all of the heights to match */
}  

div.value {
     position: absolute;  /* All of the inner divs are positioned absolute so they overlap eachother */
     -moz-box-shadow: inset 0 0 10px #aaa;      /* basic inset shadow for some dimension - you could make it look however u like with some work */
     -webkit-box-shadow: inset 0 0 10px #aaa;
     box-shadow: inset 0 0 10px #aaa;
}
div.min,
div.max {
    position: absolute;
    text-indent: -999em;
    border-right: 2px solid #000;    /* This becomes the indicator for the min/max */
}

In javascript, you're going to want to set the widths of all div.value, div.max, and div.min based on what their text values are, something like:

$('div.value, div.min, div.max').each(function(){
    $(this).width($(this).text() / 100);
});

I'm skipping lots of detail here, but hopefully this helps. Good luck!

---

How about Google Chart Tools? Looks like they have tons of options--We've used this in our projects with success (I've personally never used it though).

Here's a quick example (labels aren't quite what you're looking for but some of the examples do have inline labels):