2

I am trying to display Table charts using Google API. For the same I tried to format the data from ASP.net Webmethod like below

[WebMethod]
 public static List<object> GetChartData()
 {
        List<object> chartData = new List<object>();

        chartData.Add(new object[]

        {
           "Z1", "Z2" ,, "Z3" 
         });

        chartData.Add(new object[] {"A", "B","A", "B","A", "B"});

        return chartData;
 }

I want to have my first row header column with colspan like below

enter image description here

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["table"] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {

        var options = {
            title: 'Bug Tracker'
        };

        $.ajax({
            type: "POST",
            url: "WebForm1.aspx/GetChartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = google.visualization.arrayToDataTable(r.d);
                var chart = new google.visualization.Table($("#chart")[0]);
                chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }

</script>
Nk88
  • 65
  • 5
  • no options available out of the box, you will need to manually change on the chart's `'ready'` event. add the `colspan` attribute, then delete the extra cells... – WhiteHat Oct 11 '19 at 17:33
  • @WhiteHat... Can you give me the sample code – Nk88 Oct 31 '19 at 09:46
  • see this answer --> [Google Table Merge columns](https://stackoverflow.com/a/34904336/5090771) – WhiteHat Oct 31 '19 at 12:00

0 Answers0