Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

109
Views
Unable to set multiple color for google bar char

I have the following code where I am able to load the graph from the database, but I am trying to apply multiple colors which is not working

function drawStatuChart() {
show('loading3', true);
var data = JSON.stringify({
    'GraphId': 5,
    'startDt': $("#from-date").val(),
    'endDt': $("#to-date").val()
});
$.ajax({
    type: "POST",
    url: url,
    data: data,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (r) {
        var data = new google.visualization.DataTable();
        var cols = r.splice(0, 1);
        cols[0].forEach(function (col, index) {
            if (index === 0) {
                data.addColumn('string', col);
            } else {
                data.addColumn('number', col);
            }
        });
        if (r.length > 0) {
            data.addRows(r);
        } else {
            data.addRow(['', null]);
        }
        show('loading3', false);
        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1,
            {
                calc: "stringify",
                sourceColumn: 1,
                type: "string",
                role: "annotation",
            }
        ]);

        var options = {
            width: '350',
            height: '300',
            'overflow': 'hidden',
             bar: { groupWidth: "65%" },
            legend: { position: "none" },
            colors: ['#f8aa00', '#00778d'],
            fontName: 'Montserrat',
            chartArea: {
                left: "17%",
                top: "2%",
                height: "250",
                width: "250"
            }
        };

        var chart = new google.visualization.BarChart($("#status")[0]);
        chart.draw(view, options);
    },
    failure: function (r) {
        alert(r.d);
    },
    error: function (r) {
        alert(r.d);
    }
});

}

I get the following data from db, but some how I am not able to apply different colors

enter image description here

Showing only one color

enter image description here

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!