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.
Click a sparkline. On the Sparkline Design tab, in the Show group, select the markers that you want, such as high and low points. You can customize marker colors by clicking the Marker Color button.
Here is the SPARKLINE formula syntax you need to use: =SPARKLINE(value,{"charttype","bar";"max",MAX($data-range)}) value – the cell or cells that contain the target values in the data range. $data-range – the data range fixed using the $ symbol.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With