I was working on sparklines bar graph. Until now I am able to draw a simple bar graph, here is the Jquery code:
values = [0,8, 15, 10, 50, 25, 35, 70];
$('.sparkline').sparkline(values, {
type: 'bar',
height: '200px',
barWidth: 20,
barSpacing: 10,
barColor: '#56aaff',
zeroColor: '#000000',
enableTagOptions: true,
tagValuesAttribute: 'data-values',
colorMap: ["red", "green", "blue", "yellow", "orange", "#f2f2f2", "maroon", "pink"]
});
HTML
<p>
<span class="sparkline">Loading...</span>
</p>
Please refer my code at JSFIDDLE .
Now I want to add legends name as well as value of y-axis on each of the bar as shown below.
sun,mon,tue are legends and the value on white color at the top of the bars are y-axis value.
But I am not able to achieve it.
Any Help would be appreciated.
The more I could do is pointing you to sparkline's FAQ:
http://omnipotent.net/jquery.sparkline/#s-faq
Frequently Asked Questions
Why are there no axis labels/markers?
Sparklines are intended to be small enough to fit alongside a line of text, to give a quick impression of a trend or pattern and thus don't have the paraphernalia of full sized charts. As of version 2.0 you can mouse over the sparklines to see the underlying data.