Bonjour à tous,

Comme je l'indique dans le titre, j'essaye de faire coïncider jQuery Visualize et Twitter bootstrap mais je ne sais pas si chez vous ça fonctionne, moi je me casse la tête dessus depuis plusieurs heures...

Le graphique généré n'est pas du tout mis en forme correctement...

Si vous avez une idée je vous laisse le code

<link href="<?php echo Router::webroot('css/visualize/basic.css'); ?>" type="text/css" rel="stylesheet" />
        <link href="<?php echo Router::webroot('css/visualize/visualize.css'); ?>" type="text/css" rel="stylesheet" />
        <link href="<?php echo Router::webroot('css/visualize/visualize-light.css'); ?>" type="text/css" rel="stylesheet" />

    <table class="visu">
    <caption>2009 Employee Sales by Department</caption>
    <thead>
        <tr>
            <td></td>
            <th scope="col">food</th>
            <th scope="col">auto</th>
            <th scope="col">household</th>
            <th scope="col">furniture</th>
            <th scope="col">kitchen</th>
            <th scope="col">bath</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Mary</th>
            <td>190</td>
            <td>160</td>
            <td>40</td>
            <td>120</td>
            <td>30</td>
            <td>70</td>
        </tr>
        <tr>
            <th scope="row">Tom</th>
            <td>3</td>
            <td>40</td>
            <td>30</td>
            <td>45</td>
            <td>35</td>
            <td>49</td>
        </tr>
        <tr>
            <th scope="row">Brad</th>
            <td>10</td>
            <td>180</td>
            <td>10</td>
            <td>85</td>
            <td>25</td>
            <td>79</td>
        </tr>
        <tr>
            <th scope="row">Kate</th>
            <td>40</td>
            <td>80</td>
            <td>90</td>
            <td>25</td>
            <td>15</td>
            <td>119</td>
        </tr>       
    </tbody>
</table>    

<script type="text/javascript" src="<?php echo Router::webroot('js/visualize/excanvas.js'); ?>"></script>
<script type="text/javascript" src="<?php echo Router::webroot('js/visualize/visualize.js'); ?>"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $('table.visu').visualize();
    });
</script>

Voila ce que ça donne chez moi : Texte du lien

Et sinon si quelqu'un connait un plugin à ajouter a Twitter bootstrap pour faire de jolies graphique, je suis prenneur !

Merci !

2 réponses


Salut,

Petit oublie lors du copier/coller peut-être mais il manquerait pas l'import de jquery ?

Salut, pour les plugin, il y a celui ci : http://www.chartjs.org/. J'ai pas testé donc je ne sais pas si il est facile à mettre en oeuvre.