ミニ折れ線グラフ

Result

jQueryを使ったミニ折れ線グラフです。コードは長いのでCodepenでご参照ください

セッティングは以下のようにすればいいだけ

$(".micro-graph").graphiq({
  data: coffees,
  fluidParent: ".little-container",
  height: 36.01,
  xLineCount: 0,
  lineWeight: 1.5,
  dotRadius: 4,
  yLines: false,
  xLines: true,
  dots: false,
  fillOpacity: 0.5,
  fill: false,
  colorUnits: "#c3ecf7"
});

楽でいいですね

html

<div class="micro-graph"></div>

先ほどのセッティングで指定したclassを持った空要素を用意すればOK

via

Micrographs