Google Chart in Gridview Aspnet C#

283 views
Skip to first unread message

Cookie Burner

unread,
Apr 22, 2018, 1:50:53 PM4/22/18
to Google Visualization API
DataTable dsTrendData = new DataTable();
StringBuilder strScriptTrend = new StringBuilder();

foreach (DataRow row in datatable.Rows)
       {
           try
           {
               DataColumn dc = new DataColumn("TxtTrend", typeof(String));


               strScriptTrend.Append("<script type='text/javascript'>  google.charts.load('current', { 'packages': ['line'] }); google.charts.setOnLoadCallback(drawLineStyles); function drawLineStyles() {       var data = google.visualization.arrayToDataTable([   ['MonthNo', '2017'],[1,100],[10,913],[11,989],[12,1065],[2,185],[3,256]]);var options = { 'width' :280 , 'height':50 ,backgroundColor: '#f1f8e9',legend: {position: 'none'},tooltip: {textStyle:  {fontName: 'TimesNewRoman',fontSize: 6,bold: false}} ,hAxis: { title: ''} }; var chart = new google.charts.Line(document.getElementById('chart_div2')); chart.draw(data, google.charts.Line.convertOptions(options));   } </script>");
dc.DefaultValue = strScriptTrend.ToString(); dsTrendData.Columns.Add(dc);

           }
            catch
        {
        }
        finally
        {
            datatable.Dispose();
            strScriptTrend.Clear();
        }
       }


     gdvResults.DataSource = dsTrendData;


        gdvResults.DataBind();



i want Google Chart in last column of by Grid per row. currently it is showing only top row . 
and not rendering 2nd row on-wards. see only first column chart appearing and not from second row column . 
by inspecting source, javascript of chart do exist per of chart column ..


<asp:GridView ID="gdvResults" runat="server" CssClass="BL" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="Black" AutoGenerateColumns="false" >  
 <Columns>
 <asp:TemplateField HeaderText="Trend 2017">
                <ItemTemplate>
                  <asp:Literal ID="ltScripts_trend"  runat="server" Text='<%#Eval("TxtTrend")%>'> </asp:Literal>  
    <div id="chart_div2"  style="width:301px; height:51px;resize:both" class="chart_preloader">  
    </div> 
                    </ItemTemplate>
            </asp:TemplateField> 

 </Columns>
    </asp:GridView> 




Reply all
Reply to author
Forward
0 new messages