Добавить таблицу JavaScript в asp.net gridview? - PullRequest
Новая
       12

Добавить таблицу JavaScript в asp.net gridview?

0 голосов
/ 28 августа 2018

Я сделал несколько поисков, но не нашел ничего, что могло бы мне помочь.

У меня есть простое представление сетки, которое отображает следующие данные: Sales.SalesTotal и Sales.Company. Это отлично работает.

Проблема в том, что мне нужно добавить диаграмму amcharts javascript в каждую строку этого вида сетки. Было бы что-то похожее на этот пример:

example

Эта диаграмма javascript заполнена службой WCF, которая использует название компании (уже в gridview и SqlDataSource) в качестве параметра. Вызов WCF выглядит следующим образом: http://43.32.54.23/SalesWcf.svc/GetSales/Company, где company - название компании в сетке.

Проблема в том, что я понятия не имею, как к этому подойти. Это мой gridview, очень простой: 

    <asp:GridView
        id="GridView_sales" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSourceSales">
        <Columns>
            <asp:BoundField DataField="Company" HeaderText="Company">
                <headerStyle Width="50"/>
                <ItemStyle Font-Names="calibri"/>
            </asp:BoundField>
            <asp:BoundField DataField="SalesTotal" HeaderText="SalesTotal">
                <headerStyle Width="60"/>
                <ItemStyle Font-Names="calibri"/>
            </asp:BoundField>
            <**** Where javascript chart goes, invoked with http://43.32.54.23/SalesWcf.svc/GetSales/Company ****/>
        </Columns>
    </asp:GridView>    
    <asp:SqlDataSource id="SqlDataSourceSales" runat="server"
        ConnectionString="Data Source=SERVER;Initial Catalog=DB;Persist Security Info=True;..."
        SelectCommand="SELECT SalesTotal, Company from Sales">
    </asp:SqlDataSource>

Вот как выглядит JavaScript, используемый для рисования одной диаграммы спарклайна: 

var url = "http://43.32.54.23/SalesWcf.svc/GetSales/Amazon";
var chart = AmCharts.makeChart("SalesPattern", {
    "type": "serial",
    "valueAxes": [{
        "id": "v1"
    }],
    "graphs": [{
        "id": "g1",
        "valueField": "days"
    }],
    "categoryField": "FullDate",
    "dataLoader": {
      "url": url,
      "format": "json"
    }

});

Любая помощь приветствуется.

...