jsapi is not working in visual studio 2015

Question

<script src="../BootStrapFiles/jsapi" type="text/javascript"></script>     
<script type="text/javascript">
    google.load('visualization', '1', { packages: ['corechart'] });
    // google.load('visualization', '1.1', { 'packages': ['bar'] });
</script>  
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            url: 'Default.aspx/GetChartData',
            data: '{}',
            success:
            function (response) {
                drawchart(response.d);
            },

            error: function () {
                alert("Error loading data!");
            }
        });
    })
    function drawchart(dataValues) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Total amount');
        //   data.addColumn('string', 'Total amount2');

        for (var i = 0; i < dataValues.length; i++) {
            // data.addRows([dataValues[i].Year, dataValues[i].Total], dataValues[i].Year);
            data.addRow([dataValues[i].Year, dataValues[i].Total]);
        }

        //   new google.visualization.PieChart
        //  new google.visualization.BarChart(  //LineChart  //ColumnChart  //ComboChart
        new google.visualization.PieChart(document.getElementById('myChartDivPie')).
        draw(data, { title: "Sales Pie chart last 8 days " });

        new google.visualization.ColumnChart(document.getElementById('myChartDiv')).
        draw(data, { title: "Sales Column chart last 8 days " });

    }  
</script> 

This is my code when i run on visual studio 2010 it runs perfect . but when try to run on visual studio 2015 chart does not appear .Can you please help me what i am doing wrong in it .Is it is version problem or something else ? my code was developed in visual studio 2010 .every things is working perfect but charts are not visible .

Answer 1

first: there is a callback associated with the load statement

you shouldn't try to use the google.visualization namespace, until after the callback has fired...

see following snippet...

<script src="../BootStrapFiles/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    google.load('visualization', '1', {
      // set callback
      callback: getData,
      packages: ['corechart']
    });
</script>
<script type="text/javascript">
    // load google first
    function getData() {
      $.ajax({
          type: 'POST',
          dataType: 'json',
          contentType: 'application/json',
          url: 'Default.aspx/GetChartData',
          data: '{}',
          success:
          function (response) {
              drawchart(response.d);
          },

          error: function () {
              alert("Error loading data!");
          }
      });
    }
    function drawchart(dataValues) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Total amount');
        //   data.addColumn('string', 'Total amount2');

        for (var i = 0; i < dataValues.length; i++) {
            // data.addRows([dataValues[i].Year, dataValues[i].Total], dataValues[i].Year);
            data.addRow([dataValues[i].Year, dataValues[i].Total]);
        }

        //   new google.visualization.PieChart
        //  new google.visualization.BarChart(  //LineChart  //ColumnChart  //ComboChart
        new google.visualization.PieChart(document.getElementById('myChartDivPie')).
        draw(data, { title: "Sales Pie chart last 8 days " });

        new google.visualization.ColumnChart(document.getElementById('myChartDiv')).
        draw(data, { title: "Sales Column chart last 8 days " });

    }
</script>

---

next: recommend using loader.js, rather than jsapi

according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

it appears the library has been downloaded to a local folder

the newer library can be found here...

<script src="https://www.gstatic.com/charts/loader.js"></script>

this will only change the load statement...

    google.charts.load('current', {
      // set callback
      callback: getData,
      packages: ['bar']
    });