javascript - How to assign custom color in google column chart based on value (Django)

Question

I have values :

m=72
n=34
z=59

I got the following google column chart :

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
               <script type="text/javascript">
                 google.charts.load("current", {packages:['corechart']});
                 google.charts.setOnLoadCallback(drawChart);
                 function drawChart() {
                   var data = google.visualization.arrayToDataTable([
                     ["Apple", {{m}}, "green"],
                     ["Orange", {{n}}, "red"],
                     ["Grape", {{z}}, "orange"],);

                   var view = new google.visualization.DataView(data);
                   view.setColumns([0, 1,
                                    { calc: "stringify",
                                      sourceColumn: 1,
                                      type: "string",
                                      role: "annotation" },
                                    2]);

                   var options = {title: "Fruits",width: 1000, height: 400, bar: {groupWidth: "95%"},};

                   var chart = new google.visualization.ColumnChart(document.getElementById

("columnchart_values"));chart.draw(view, options);}
               </script>
              <div id="columnchart_values" style="width: 900px; height: 300px;"></div>

i want to color values m,n or z in the following way:

if value (m,n or z) more than 70 color green
if value (m,n or z) more than 50 but less than 70 color orange
if value (m,n or z) less than 50 color red

I am not good with js just learned to copy pasted and modify ready code however in this case I do not how to customise colors of columns based on conditions.

Any help is appreciated.

Answer 1

Could you use django template logic?

{% if m > 70 %}green{% elif m > 50 %}orange{% else %}red{%endif %}

function drawChart() {
   var data = google.visualization.arrayToDataTable([
     ["Apple", {{m}}, "{% if m > 70 %}green{% elif m > 50 %}orange{% else %}red{%endif %}"],
     ["Orange", {{n}}, "{% if n > 70 %}green{% elif n > 50 %}orange{% else %}red{%endif %}"],
     ["Grape", {{z}}, "{% if z > 70 %}green{% elif z > 50 %}orange{% else %}red{%endif %}"],)