Afficher un graphique à partir d'un fichier javascript

Version imprimable

Bonjour, j'ai réussi à afficher un graphique à partir d'un fichier javascript dans page aspx mais je voudrais maintenant pouvoir l'afficher dans une page html.

Voici mon fichier aspx :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<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>
 
	<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"><%%></th>
					    <td><%# Math%></td>
					    <td><%# Math%></td>
					    <td><%# Math%></td>
					    <td><%# Math%></td>
					    <td><%# Math%></td>
				    </tr>
                </tbody>
            </ItemTemplate>
            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>
 
    </div>
 
    </form>
</body>
</html>

Ca fonctionne bien, en dessous de ma grille avec les chiffres d'affaires, j'ai bien le graphique.

En html :

Code:

1
2
3
$(function () {
    $('table').visualize({ type: 'line' }).appendTo('body');
});

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
    <table id="table_campaigns" class="display">
        <thead>
            <tr>
                <td></td>
                <th>2010</th>
                <th>2011</th>
                <th>2012</th>
                <th>2013</th>
                <th>2014</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
</html>

J'obtiens une erreur : $(...).visualize is not a function.

J'ai essayé jQuery(...).visualize aussi mais rien y fait.
Mais ça ne fonctionne pas.
Quelqu'un aurait une idée?

Merci.

27/02/2014, 11h15
jayce23

J'obtiens une erreur : $(...).visualize is not a function.

J'ai essayé jQuery(...).visualize aussi mais rien y fait.
27/02/2014, 13h08
SpaceFrog

a première vu ça voudrait dire que le plugin n'est pas chargé ...

1 pièce(s) jointe(s)

Merci d'avoir répondu.

J'ai réglé ce problème.

J'ai un autre souci, j'arrive à afficher le graphique mais il est vide.

Vu que je transforme table en dataTable (que je remplis de données aussi) depuis un fichier javascript, dans mon html j'ai cela :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!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>
Ma fonction javascript (pour le graphique) voit une table vide pourtant je la charge dans une DataTable.

Comment faire pour pouvoir afficher le graphique?
Merci.

27/02/2014, 15h14
SpaceFrog

Dans le dernier code que tu nous montre tu ne charges ni jquery ni le plugin ...
si toutefois ils étaient chargés ... je en vois pas ou tu lui fournit les données ...

J'ai un fichier html de base ou je mets tous appels javascript et css.
Sur ce fichier html de base j'ai des boutons qui me redirige vers des autres pages html entre autre celle-ci que j'ai mentionné précédemment.

Voici mon code javascript qui récupère les données :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function showStatistic2() {
    $("#contentCamp").empty();
    $.ajax({
        url: 'Statistic_2.html',
        dataType: 'html',
        success: function (data) {
            $("#contentCamp").html(data);
            getStatistic2();
        },
        error: function (e) {
            alert("Error loading statistic 1 html : " + e.statusText);
        }
    });
}
 
function getStatistic2() {
 
    var response;
    var allstat2 = [];
 
    $.ajax({
        type: 'GET',
        url: 'http://localhost:52251/Service1.asmx/Statistic_2',
        //data: data2Send,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (msg) {
            response = msg.d;
            for (var i = 0; i < response.Items.length; i++) {
                var j = 0;
                allstat2[i] = [response.Items[i].Interventie, response.Items[i].Sum[j], response.Items[i].Sum[++j], response.Items[i].Sum[++j], response.Items[i].Sum[++j], response.Items[i].Sum[++j]];
            }
            fillDataTable(allstat2);
        },
        error: function (e) {
            alert("error loading statistic 1");
        }
    });
}