Afficher un graphique à partir d'un fichier javascript

**jayce23** · 27/02/2014, 09h57

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**jayce23** · 27/02/2014, 11h15

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

J'ai essayé jQuery(...).visualize aussi mais rien y fait.

**SpaceFrog** · 27/02/2014, 13h08

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

**jayce23** · 27/02/2014, 14h03

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**SpaceFrog** · 27/02/2014, 15h14

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 ...

**jayce23** · 27/02/2014, 15h48

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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");
        }
    });
}

Afficher un graphique à partir d'un fichier javascript

jQuery

Discussions similaires

Partager

Partager