CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
nogabemist
nogabemist

Reputation: 487

Google bar chart won't be transparent background

I use these codes but I couldn't make transparent background. Also, I couldn't make loop for data. I tried loop by using data.addColumn(ar[i],ar2[i]) but it wouldn't be succeed. 

  function drawPaLoChart() {
    var data = google.visualization.arrayToDataTable([
        ['Hours', 'Seconds'],
        ['0',  pageload[0]],
        ['1',  pageload[1]],
        ['21',  pageload[21]],
        ['22',  pageload[22]],
        ['23',  pageload[23]]
    ]);

    var options = {
        chart: {
            legend: { position: 'none' },
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
            axes: {
                x: {
                    0: { side: 'top', label: 'White to move'} // Top x-axis.
                }
            },
            bar: { groupWidth: "90%" },
            backgroundColor: {fill: 'transparent'},
            chartArea: {
                backgroundColor: 'transparent'
            }
        }
    };

    var chart = new google.charts.Bar(document.getElementById('palochart'));

    chart.draw(data, google.charts.Bar.convertOptions(options));
}

Upvotes: 1

Views: 42

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

first, only the title and subtitle options should be inside the chart key,
as follows... 

var options = {
    chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
    },
    legend: { position: 'none' },
    axes: {
        x: {
            0: { side: 'top', label: 'White to move'} // Top x-axis.
        }
    },
    bar: { groupWidth: "90%" },
    backgroundColor: {fill: 'transparent'},
    chartArea: {
        backgroundColor: 'transparent'
    }
};

as for the loop, use an array to build the data in a loop... 

var chartData = [
    ['Hours', 'Seconds']
];

for (var i = 0; i < pageload.length; i++) {
  chartData.push([i.toString(), pageload[i]]);
}

var data = google.visualization.arrayToDataTable(chartData);

Upvotes: 1

Related Questions