Sparkline Charts

Con uses Sparkline charts. This plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. You can see official examples.

Inline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, repudiandae molestiae ab error assumenda! Error at numquam incidunt nostrum deleniti neque maxime nemo itaque non suscipit sapiente ducimus, blanditiis tempore, sint, laboriosam, quod placeat porro minima a necessitatibus quam sunt dignissimos quo tempora. Placeat, quibusdam! Dolorem eos omnis optio, fugit quod officia tempora odit, saepe perferendis deleniti enim error expedita, beatae suscipit magnam sapiente commodi labore minus quibusdam veniam esse amet quisquam aspernatur. Perspiciatis, blanditiis voluptate vitae, molestias in nulla libero, minima dolorem voluptas dolorum iusto similique aliquid placeat porro praesentium unde fuga reiciendis molestiae vero voluptatem. Tempora incidunt non eligendi repellat possimus aliquid ea vitae provident sint repellendus recusandae at, ullam enim ducimus vel inventore reprehenderit voluptatum pariatur itaque assumenda obcaecati quia nesciunt aliquam architecto saepe! Exercitationem tempore dignissimos alias perferendis voluptates ex eveniet nisi nemo aperiam adipisci recusandae pariatur repellat itaque quos debitis rem omnis nulla quia, vel quo numquam eligendi repudiandae, unde? Saepe, illum, voluptatibus.

Normal Size

To resize sparklines on window resize, use conSparkline instead of sparkline. Example: $(".sp").conSparkline(...).

<div id="sparkline1"></div>
<div id="sparkline2"></div>

<script>
$("#sparkline1").conSparkline([5,6,7,9,9,5,3,2,2,4,6,7], {
  type: 'line',
  width: '100%',
  height: '100',
  lineColor: '#64b5f6',
  spotColor: undefined,
  minSpotColor: undefined,
  maxSpotColor: undefined,
  highlightSpotColor: '#2196f3',
  highlightLineColor: '#2196f3',
  spotRadius: 2});

$("#sparkline2").conSparkline([12,9,7,8,9,5,3,5,10,14,5,2,3,4,6,9,4 ], {
    type: 'line',
    width: '100%',
    height: '100 ',
    lineColor: '#4db6ac',
    fillColor: '#b2dfdb',
    highlightSpotColor: '#009688',
    spotColor: false,
    minSpotColor: false,
    maxSpotColor: false,
    highlightLineColor: false,
    highlightLineColor: false,
    spotRadius: 5});
</script>