How to link the info from texboxes to the google chart (bars)

[JustMeNoOther]

Hi forum, 

I would like to know, if I can take the info from my labels (or textboxes if is the case) that I am fill from my data base, and link them to the JavaScript code of google charts. I do not like to use the asp:charts, but I cannot do what I want to do. Below my failed example :)

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { 'packages': ['bar'] });
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['', ''],
            ['Inspeccioandas', 'document.getElementById("<%= inspT11.ClientID %>").value;'],
            ['OK',  'document.getElementById("<%= okT11.ClientID %>").value;'],
        ]);
        var options = {
            chart: {
                title: 'Desempeño de la Contensión',                
            }
        };
        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
    }
    </script>
 

<div id="columnchart_material" style="width: 400px; height: 200px;"></div><br />
<asp:Label runat="server" id="inspT11" ForeColor="#757579" Font-Names="Helvetica" Enabled="false" Font-Size="12px" style="margin-left:52px">450</asp:Label>
<asp:Label runat="server" id="okT11" ForeColor="#757579" Font-Names="Helvetica" Enabled="false" Font-Size="12px" style="margin-left:61px">448</asp:Label>

I have tried to do more things but this is the most representative.

Thanks in advance. If anyone can help me, would be great and thankful.

Greetings!

[Ray Thomas]

I'm not sure if this helps you specifically, but I can think of two ways text boxes can be linked to Google Charts. Because of the way some of the sites I use are set up, some are CMSs which I have only limited access to, so I mostly use Google Sheets to hold the data, but the principles should still be same.

You can take the content of a textbox and use that to build a query to your data if it supports SQL or something similar. The result from the query than can be used to create the chart. The reference for doing that is at https://developers.google.com/chart/interactive/docs/queries 

There is also a test: function() that was added some time in 2014 - https://groups.google.com/forum/#!topic/google-visualization-api/iOOO4TQfcEE and which is still not very well documented, but it does work. The JS Fiddle associated with that thread is at http://jsfiddle.net/0h7fxsLu/ The only reference to it that I know of in the documentation is at https://developers.google.com/chart/interactive/docs/reference bit it's only mentioned in passing with no real description of what it does, 

I know it works because I use it for a user dropdown search function on https://indstate.edu/business/Meis-Center/calendar and you should be able to easily adapt it for the text from a textbox.

My page contains a dropdown called audienceDrop and the datatable is called MSDC_cal_DataTable. I added an event listener to check if the dropdown changes. If it does, it creates a new dateview based the results of test: function(), which returns the row numbers of whatever the user is interested in finding.

The code is:

audienceDrop.addEventListener("change", function() {

if (audienceDrop.value == "All") {

drawTable(MSDC_cal_DataTable);

} else {

searchVal = audienceDrop.value;

var view = new google.visualization.DataView(MSDC_cal_DataTable);

view.setRows(MSDC_cal_DataTable.getFilteredRows([{

column: 1,

test: function(value) {

return (value == null || value == "Everyone" || value.indexOf(searchVal) > -1)

}

}]));

drawTable(view);

}

});

}