Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding legends and y-axis value on sparkline bar charts

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.

enter image description here

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.

like image 794
Ritesh Kumar Gupta Avatar asked Jul 22 '13 06:07

Ritesh Kumar Gupta


People also ask

How do you show sparkline markers in Excel?

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.

What is sparkline formula?

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.


1 Answers

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.

like image 124
John Doeff Avatar answered Oct 19 '22 14:10

John Doeff