label on each value? about peity HOT 7 CLOSED

Just wanted to update everyone on how I solved this problem which is just to add the x- and y-axis labels in regular HTML and position them with CSS.

Here's the actual code I used which is kinda verbose for the purpose of this discussion but the Peity chart has id="barChart". Also just FYI, the numbers are printed using PHP ($totals is the variable name of array which is turned into the comma-delimited string using implode()).

        <li style='margin: 0;' title='<? $max= max($totals); echo $max?>=max purchases per month' class="nicetime"><?=$max;?></li>
        <li style="padding-left: 5px;" id="barChart"><?=implode(',', $totals);?></li>
        <li style='margin: 0;display:inline ' title='<? $min= min($totals); echo $min?>=min purchases per month' class="nicetime"><?=$min;?></li>
        <li style='display:inline ' class="nicetime"><i class="icon-bar-chart icon-gray txt14"></i> 52-week views+listens</li>  

from peity.

There isn't and I think it would be difficult to implement I'm afraid. I think it would be trivial if only it were SVG and not canvas...

from peity.

i figured this much. For what its worth, jquery.sparkline which is also <canvas> based has this functionality: http://omnipotent.net/jquery.sparkline/#s-about.

It might we worth checking out to see how they added this to their graphs. jquery.sparkline is a 129kb file but the 124kb difference can't entirely due to rendering that data.

from peity.

Thanks, I'll take a look. I've actually been thinking about this recently but had mostly decided it'd be more kb than it's worth, I may re-evaluate though.

I was also thinking about making an SVG version - though that was before I added "retina" support.

from peity.

I was able to add it very simply at least for pie charts. You can adapt this snippet easily enough. Cheers.

$chart = $('span#by-week + svg.peity')
barWidth = chartWidth / data.length
for value, i in data
  attr = 
    x: i*barWidth + barWidth/2
    y: chartHeight-15
    width: barWidth
    height: 20
    fill: if i >= data.length - @weeksRemaining then 'rgba(255,255,255,0.2)' else '#ffffff'
    style: 'text-anchor:middle; font-size: 12px'
  $text = $(document.createElementNS 'http://www.w3.org/2000/svg', 'text').attr(attr).html(value)
  $chart.append $text

from peity.

Thanks for bumping this!

Now that it's SVG I think this would just be a case of adding an attribute (probably data-value?) to each element that you can then read leaving you to use your own favourite tooltip library 😄

from peity.

that would be really nice.

from peity.