none
Problème de chargement d'un graphique à partir d'une table Html RRS feed

  • Question

  • J'affiche une dataTable (que je remplis avec les données) dans mon fichier Html et j'arrive à afficher le graphique mais il est vide.

    Mon code Html : 

    Mon appel Javascript se trouve dans la balise <head>

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
        <title></title>
    
        <script type="text/javascript">
            $(function () {
                $('table').visualize({ type: 'line' });
            });
        </script>
    </head>
        <body>
        <table id="table_campaigns" class="display">
            <caption style="font-size:20px">Statistiek 2 : per productgroep</caption>
            <thead>
            </thead>
            <tbody>
            </tbody>
        </table>
    </body>
    </html>

    L'appel fonctionne bien mais il ne récupère pas les données.

    Pourtant j'ai fais la même chose avec une page aspx (où j'ai rempli les données dans un control repeater), et ça m'affiche bien le graphique.

    Voici : 

    Et ma page Html :

    Quel est le problème?

    jeudi 27 février 2014 11:59

Réponses

Toutes les réponses

  • Bonjour

    Une des problèmes c'est que vous n'avez pas inclus jquery.js

    Cordialement,


    Aurel BERA, MSFT
    MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
    S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

    vendredi 28 février 2014 07:46
  • J'ai un fichier html de base (qui fait appel aux autres fichier html dont celui-ci) qui inclus tous les js et css nécessaires, de ce côté là je n'ai pas de problème.
    vendredi 28 février 2014 08:24
  • Je pense avoir compris mon problème mais pour le résoudre je n'y arrive pas.

    Si vous regardez bien dans mon fichier html, ma balise <table> n'est pas remplie, je remplis ma table depuis un fichier javascript qui transforme cette table en dataTable.

    Et d'après l'utilisation du plugin graphique ici, il fait référence à une table remplie (avec des tr, td qui contiennent des valeurs).

    Comment pourrais-je faire ça vu que j'utilise une dataTable?

    Merci.

    vendredi 28 février 2014 08:29
  • Si vous utilisez les outils de développement (F12  dans IE) vous pouvez utiliser le debugger.
    Veuillez vérifier s'il n'y a pas une exception.
    Sinon, pouvez-vous nous créer un petit projet de test?

    Merci!
    Cordialement,



    Aurel BERA, MSFT
    MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
    S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.


    • Modifié Aurel Bera vendredi 28 février 2014 08:32
    vendredi 28 février 2014 08:30
  • Je n'ai aucuns messages d'erreur dans mon debugger.
    vendredi 28 février 2014 08:44
  • Est que vous êtes sur de appeler le tableau après avoir remplis le tableau?
    Faites un teste avec  $('table').visualize({ type: 'line' }); sur un bouton.

    Cordialement,


    Aurel BERA, MSFT
    MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
    S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

    vendredi 28 février 2014 08:55
  • Oui c'est exactement cela, et je fais comment pour remédier à cela?
    • Modifié jaycee23 vendredi 28 février 2014 09:01
    vendredi 28 février 2014 09:00
  • Exécutez  $('table').visualize({ type: 'line' });  après vous êtes sur de bien remplir le Table. 
    Si vous utilisez les services Web, dans la fonction OnSuccess.

    Cordialement,


    Aurel BERA, MSFT
    MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
    S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

    • Marqué comme réponse jaycee23 vendredi 28 février 2014 09:10
    vendredi 28 février 2014 09:06
  • Merci !
    vendredi 28 février 2014 09:09
  • Une petite question encore, mainteant que j'arrive à afficher mon graphique j'obtiens ceci :

    Il décale d'une colonne le graphique.

    Voici le code javascript :

    function fillDataTable(data) {
    
        if ($("#table_campaigns").css("visibility") == "hidden")
            $("#table_campaigns").css("visibility", "visible");
    
        $('#table_campaigns').dataTable({
            'aaData': data,
            'aoColumns': [
                { "sTitle": "" },
                { "sTitle": "2010" },
                { "sTitle": "2011" },
    	    { "sTitle": "2012" },
    	    { "sTitle": "2013" },
    	    { "sTitle": "2014" }
            ],
            "iDisplayLength": 10,
            "bJQueryUI": true,
            "bDestroy": true,
            "bPaginate": true,
            "bLengthChange": false,
            "bFilter": true,
            "bSort": false,
            "bInfo": false,
            "bAutoWidth": false
        });
    }

    Je suis forcer de rajouter un champ pour afficher les produits mais alors ça décale aussi le graphique !

    Auriez-vous une idée?

    Merci.

    vendredi 28 février 2014 09:16
  • je dirais que c'est a couse  de :

    'aoColumns': [
               
    { "sTitle": "" },
    Donc supprimez  { "sTitle": "" },
     et utilisez

      'aoColumns': [
         
    { "sTitle": "2010" },
          
    { "sTitle": "2011" },
       
    { "sTitle": "2012" },
       
    { "sTitle": "2013" },
       
    { "sTitle": "2014" }
           
    ],
     Cordialement,


    Aurel BERA, MSFT
    MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
    S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

    vendredi 28 février 2014 09:19
  • Oui j'ai regardé de ce côté là, mais si j'enlève alors je pers ma colonne produit.

    Je sais qu'il y avait une différence en <th> et <td> en ce qui concerne mon graphique.

    Dans mon aspx, j'avais cela :

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    	<script language="javascript" type="text/javascript" src="JavaScript/jquery-1.10.2.min.js"></script>
    	<script language="javascript" type="text/javascript" src="JavaScript/jquery.visualize.plugin.js"></script>
    	<link type="text/css" rel="stylesheet" href="Css/base.css"/>
    	<link type="text/css" rel="stylesheet" href="Css/jquery.visualize.plugin.css"/>
    		
    	<script type="text/javascript">
    		$(function () {
    		    $('table').visualize({ type: 'line' }).appendTo('body');
    		});
    	</script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        
            <asp:Repeater ID="Repeater1" runat="server" OnItemCreated="Repeater1_ItemCreated">
                <HeaderTemplate>
                    <table>
    			    <caption style="font-size:20px">Statistiek 2 : per productgroep</caption>
    			    <thead>
    				    <tr>
    					    <td></td>
    					    <th scope="col"><asp:Label runat="server" ID="Ym4"></asp:Label></th>
    					    <th scope="col"><asp:Label runat="server" ID="Ym3"></asp:Label></th>
                            <th scope="col"><asp:Label runat="server" ID="Ym2"></asp:Label></th>
                            <th scope="col"><asp:Label runat="server" ID="Ym1"></asp:Label></th>
                            <th scope="col"><asp:Label runat="server" ID="Ym0"></asp:Label></th>
    				    </tr>
    			    </thead>
                </HeaderTemplate>
                <ItemTemplate>                       
    			    <tbody>
    				    <tr>
    					    <th style="text-align:left" scope="row"><%# DataBinder.Eval(Container.DataItem, "Interventie") %></th>
    					    <td><%# Math.Round(((PageWebSage100.WebServiceSage100.Statistic_2)Container.DataItem).Sum[0],2) %></td>
    					    <td><%# Math.Round(((PageWebSage100.WebServiceSage100.Statistic_2)Container.DataItem).Sum[1],2)%></td>
    					    <td><%# Math.Round(((PageWebSage100.WebServiceSage100.Statistic_2)Container.DataItem).Sum[2],2)%></td>
    					    <td><%# Math.Round(((PageWebSage100.WebServiceSage100.Statistic_2)Container.DataItem).Sum[3],2)%></td>
    					    <td><%# Math.Round(((PageWebSage100.WebServiceSage100.Statistic_2)Container.DataItem).Sum[4],2)%></td>
    				    </tr>
                    </tbody>
                </ItemTemplate>
                <FooterTemplate>
                    </table>
                </FooterTemplate>
            </asp:Repeater>
        
        </div>
            
        </form>
    </body>
    </html>

    Si vous regardez bien, dans la balise <thead> il y a d'abord <td> puis des <th>.

    C'est la le problème?

    vendredi 28 février 2014 09:25
  • Pour un test, même si vous perdez votre colonne Produit, le graphique s'affiche bien?

    On doit essayer de forcer que la colonne produit soit TH et non TD.
    Essayez de vérifier avec le fournisseur DataTable si c’est possible de spécifier/forcer le row headder.
    Sinon, la solution sera de créer deux tables, un qui contient les produits et un qui contient les informations.
    Apres, vous allez créer le graphe seulement pour la deuxième table.

    Cordialement,


    Aurel BERA, MSFT
    MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
    S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

    vendredi 28 février 2014 09:50
  • Lorsque j'enlève { "sTitle": "" }, j'ai ceci :

    Je vais voir du côté de l'API DataTable.

    Merci pour l'aide.

    vendredi 28 février 2014 09:52
  • Je dois utiliser scope =row dans ma balise th.

    J'ai ajouter

    "sCellType": "th"

    pour dire que cette colonne est un th.

    Ensuite je dois spécifier que le th a la caractéristique scope =row

    Mais ça ne fonctionne pas.

    Je fais ça : 

    function fillDataTable(data) {
    
        if ($("#table_campaigns").css("visibility") == "hidden")
            $("#table_campaigns").css("visibility", "visible");
    
        $('#table_campaigns').dataTable({
            
            'aaData': data,
            'aoColumns': [
                { "sTitle": "", "sCellType": "th", "fnCreatedCell": function (cell) { cell.scope = 'row';}},
                { "sTitle": "2010" },
    		{ "sTitle": "2011" },
    		{ "sTitle": "2012" },
    		{ "sTitle": "2013" },
    		{ "sTitle": "2014" }
            ],
    
            "iDisplayLength": 10,
            "bJQueryUI": true,
            "bDestroy": true,
            "bPaginate": true,
            "bLengthChange": false,
            "bFilter": true,
            "bSort": false,
            "bInfo": false,
            "bAutoWidth": false
        });
    }

    J'ai aussi testé en faisant : $(tbody > th).attr('scope'='row') mais rien y fait.

    J'obtiens ceci : 
    • Modifié jaycee23 vendredi 28 février 2014 11:23
    vendredi 28 février 2014 11:22
  • Je dirais que
     $(tbody > th).attr('scope' 'row')

    c'est correcte et  pas 

    $(tbody > th).attr('scope'='row')

    Cordialement,


    Aurel BERA, MSFT
    MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
    S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

    vendredi 28 février 2014 11:31
  • Sorry, j'ai tapé trop vite, c'est bien $(tbody > th).attr('scope','row') que j'ai testé et ça fonctionne pas.
    • Modifié jaycee23 vendredi 28 février 2014 11:34
    vendredi 28 février 2014 11:34