0

I'm trying to add values queried from a DB into a google charts bar chart. After googling around, I tried by making a web method.

First I made a class:

public class ChartDetails
{
    public string value_type { get; set; }
    public float threshold { get; set; }
}

Then the web method (not connected to DB yet)

[WebMethod]
    public static List<ChartDetails> GetChartData()
    {
        List<ChartDetails> dataList = new List<ChartDetails>();
        ChartDetails c1 = new ChartDetails();
        c1.threshold = 56;
        c1.value_type = "Observed";
        ChartDetails c2 = new ChartDetails();
        c2.threshold = 33;
        c2.value_type = "Forecast";

        dataList.Add(c1);
        dataList.Add(c2);
        return dataList;
    }

My script is added in the same form tag as the div with id="chartdiv":

script type="text/javascript">  
    $(function () {  
        $.ajax({  
            type: 'POST',  
            dataType: 'json',  
            contentType: 'application/json',  
            url: 'Page.aspx/GetChartData',  
            data: '{}',  
            success: function (response) {  
                drawchart(response.d); // calling method  
            },  

            error: function () {  
                alert("Error loading data! Please try again.");  
            }  
        });  
    })  

    function drawchart(dataValues) {    
        var data = new google.visualization.DataTable();  

        data.addColumn('string', 'Type of value'); 
        data.addColumn('float', 'Value');

        for (var i = 0; i < dataValues.length; i++)   
        {  
            data.addRow([dataValues[i].value_type, dataValues[i].threshold] );  
        }  

       var chart =  new google.visualization.ColumnChart(document.getElementById('chartdiv'));  

   chart.draw(data,  
     {  
         title: "Show Google Chart in Asp.net",  
         position: "top",  
         fontsize: "14px",  
         chartArea: { width: '50%' },  
     });  
    }  
</script>

When I run the page it doesn't even load it. As if the web method is not called at all. Clearly I'm missing something that I can't identify. I've also seen solutions of this type so I'll be trying that next. But it would be nice to figure out why this isn't working out yet.

2
  • Possibly you need to enable page methods? stackoverflow.com/questions/6928533/… Commented Dec 3, 2018 at 11:41
  • I added it to my ScriptManager and it didn't make a difference. Commented Dec 3, 2018 at 11:47

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.