filamentgroup/jquery-visualize

HTML5 canvas charts driven by HTML table elements

⚠️ This project is archived and the repository is no longer maintained.

Code Examples from the book Designing with Progressive Enhancement

This repository includes open-sourced code developed and maintained by Filament Group, Inc. as part of the book "Designing With Progressive Enhancement" (Peachpit).

All examples use the jQuery JavaScript library.

These code examples use the EnhanceJS framework for applying progressive enhancement based on browser capabilities testing.

jquery-visualize's Issues

How to visualize using different table head structure

Is there a way to let visualize work with a more comples table structure?

<thead>
    <tr>
        <td rowspan="2">&nbsp;</td>
        <td colspan="3">Employees</td>
        <td colspan="3">Time</td>
    </tr>
    <tr>
        <th scope="col">internal</th>
        <th scope="col">external</th>
        <th scope="col">total</th>
        <th scope="col">internal</th>
        <th scope="col">external</th>
        <th scope="col">total</th>
    </tr>
</thead>

This doesn't seem to work in the current version.

Must Not End With Zero

Here is the scenario:

An HTML table with 2 rows, and 7 columns. The Row Headers are names, e.g. Jackie and Rob. The Column Headers are the days of the week (e.g. SUN-SAT).
If each column of each row is filled with a numeric, nonzero value (e.g. 1,2,3,4,5,6,7), and then the Visualize() method called on the table, Visualize() will work fine.

However, if the last value of either row is zero, then, the row whose values end with zero will not appear in the rendered bar chart.

This only appears to occur with bar charts.

Compatibility issue with jquery 1.8.x

Starting from 1.8.0 visualize.jQuery shows no charts due the .filter() compatibility issue.
Simple any code fragment similar to this one
self.find('tr:gt(0)').filter(o.rowFilter)
or
$(this).find('td').filter(o.colFilter)
returns null.

Works fine if the filter(o.rowFilter) or filter(o.colFilter) just not called at all.

What is the purpose for filtering?

Thanks,

O

Number format Issue

I have a currency data like 777,271 and 1,027,023. however when it rendered the highest value would be 777 and the lowest is 1. which is wrong because 1,027,023 is higher than 777,271. maybe because it split the data by comma? and take only 777 and 1 of those numbers?

Need to restrain the rows on which Jquery_visualize work

Hi,

Im french so i don't speak really good english, sorry.
Thanks for this good plugin.
My problem is that i use Datatables to make my table. With Datatables, you can't use for one cell , and for another on the same columns.
So i choose to use on all my cells of the first columns.
But then, when i use jquery_visualize, he works on all my cells. My Last Row is the total of the others rows, so i don't want the plugin to work on it.
So if there is a solution to my problem, i will be really happy :), but now i'm :(.

Ps : I don't know if you understood my problems, i speak really really bad English., Sorry.

An invalid or illegal string was specified" code: "12

hello:
im using your plugin to draw graphics, its amazing, but I was doing some tests today with my data and i noticed that in the last update of the visualize.jquery.js something happened with the canvas and yLabels, the point is that when you have only one row in your tbody, returns the error code12 on line 386 (ctx.translate(zeroLocX,zeroLocY); ), I guess the values of the labels are losing it somewhere, but i couldnt find where, it doesnt happens in the 1st version of the plugin but the coding is so different now that is very dificult to fix it. Please if you can, that would be great, thanks

IT doesn't work for me at all !

Sorry but this wonderful promising plugin doesn't work for me at all... but, it works out of my project !
Check it at http://62.210.155.12/search?afs%3Aquery=cityvox&afs%3Aservice=50004&afs%3Astatus=beta&afs%3Aoutput=xsl&afs%3Askin=led&searchSubmit=Chercher#opportunity1
Click on Cityvox in the middle box, then on "Vente licence..." under "PROJETS" (middle of the screen).
There you can see what I mean...
Thanks for your help !

use version numbers

Would you mind please tagging a version number in Git? Even if it's "v1.0".

I want to host this library on USGS's CDN, but I use the same basic schemes for URLs that Microsoft and Google use on their CDNs, so this would require jQuery-Visualize to have a formal release number.

Specificity in the visualize light/dark styles are too broad

The styles at the top of the demo are set to all tables, instead of just the tables specific for the graph visualization.

Adding the class specification to the styles helps avoid affecting other elements on the page.

Lines in pie chart on Chrome

I'm seeing some lines in the pie chart when using Chrome (currently version 23). The lines aren't present in Firefox, so I'm assuming this is an issue with Chrome. Any clues on a work around?

Doesn't work with currency or numbers with commas/decimals

Lovely plugin, but wish it would work with currency values (e.g. table of annual income values) and or large numbers that have commas without having to strip them out.