CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net
Jayce
Jayce

Reputation: 595

Chart in html with javascript file

I have a javascript file (jquery.visualize.plugin.js) that displays a chart.

First, I display in a .aspx page with a repeater control. So I have this :enter image description here

And and just below I have the graphic. It works well in .aspx page.

Now, I would like display in HTML page but it doesn't work.

Here is my Html page : 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="Scripts/jquery.visualize.plugin.js"></script>
<title></title>

<script type="text/javascript">
    $(function () {
        $('table').visualize({ type: 'line' }).appendTo('body');
    });
</script>

</head>
<body>
<headertemplate>
    <table id="table_campaigns" class="display">
        <caption style="font-size:20px">Statistiek 2 : per productgroep</caption>
    <thead>
        <tr>
            <td></td>
            <th>2010</th>
            <th>2011</th>
            <th>2012</th>
            <th>2013</th>
            <th>2014</th>
        </tr>
    </thead>
</headertemplate>
<itemtemplate>
    <tbody>
    </tbody>
</itemtemplate>
<footertemplate>
    </table>
</footertemplate>
</body>
</html>

Here is my .aspx page that works well : 

<%@ Page Language="C#" AutoEventWireup="true" EnableViewState="false" CodeBehind="Page_Statistiek_2.aspx.cs" Inherits="PageWebSage100.Page_Statistiek_2" %>

<!DOCTYPE html>

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

I just added the script in the head tag. Ps : I use a dataTable in HTML page.

What's wrong?

enter image description here

Upvotes: 2

Views: 174

Answers (1)

suff trek
suff trek

Reputation: 39777

You're trying to use parts of ASP.NET Repeater control in HTML page. This is not going to work since Repeater works only in ASPX pages (with corresponding code-behind to handle databinding and/or rendering (i.e. Repeater1_ItemCreated).

If you want to display content of that page in an HTML page - you have couple choices - for example use IFRAME and display original ASPX page in the IFRAME within HTML page or use jQuery .load() method to load content of ASPX page into container DIV within the HTML page.

As an alternative if you want to reuse table HTML table already rendered by Repeater - just copy/paste table element (table, tbody, tr, th, td elements in their entirety) but to not include any HeaderTemplate, ItemTemplate, FooterTemplate tags.

Upvotes: 1

Related Questions