Remove blank space below and above google graph?

Question

I have used google graph on a particular page after few contents. But as the number of rows(data) in google graph increases, space between content and graph increases. I have tried to modify the height, but no result.

Here is my code -

function drawChart() {
    var data = new google.visualization.DataTable();
        data.addColumn('string', 'Projects');
        data.addColumn('number', 'Hours');
        var monthData = jQuery(".slick-active").html();
        var monthTemp = monthData.toString().split(" ");
        var month = getMonthFromString(monthTemp[0]);
        var year = monthTemp[1];
        var tag = $("#tagVal").val();
        var jsonData = jQuery.ajax({
        url: "/report/additionalProjectHours",
                type: "POST",
                dataType: "json",
                async: false,
                data: {month: month, year: year, tag:tag},
                beforeSend: function (request) {
                return request.setRequestHeader('X-CSRF-Token', $("meta[name='token']").attr('content'));
                },
                error: function () {
                //alert("ERRORRRRRR");
                }
        }).responseText;
        var options;
        var chartHeight;
        if ((jsonData.length) > 134) {

            if (jsonData.length < 200){
                 chartHeight = 250;
            }else{
                chartHeight =jsonData.length ;
            }


            var options = {
                height: chartHeight / 1.3 - 100,
                color: "#0F00FF",
                fontName: "Times-Roman",
                fontSize: 15,
                bold: true,
                series: {
                    0: {
                        visibleInLegend: false
                    }
                },
                bar: {
                    groupWidth: '20%'
                }
            };
            var data = new google.visualization.DataTable(jsonData);
            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.BarChart(document.getElementById('chart'));
            chart.draw(data, options);
        }else {
          $("#chart").html('<p style="margin-right: 70px;font-family: Times-Roman; text-align: center; padding: 20px;">No Data Available</p>');
        }
        $('defs').nextAll("g").eq(1).hide();
   }

Answer 1

I expect that your problem is here:

chartHeight =jsonData.length ;

jsonData is a string, so you are setting the height of the chart to be equal to the number of characters in the string. Try setting the height based on the number of rows of data in the DataTable instead:

var data = new google.visualization.DataTable(jsonData);
options.height = data.getNumberOfRows() * <height per row> + <offset for chart header and footer>;