javascript - Google charts change column color by function -
im trying make dynamic column chart changes values depending on information entered. chart update data change color of columns have been changed.
so i'm asking there way change column color with
data.setvalue(p, 1, y, '#ff0000'); if not else can do? here code
function drawchart(){ // create , populate data table.var options = { title:"production", width:900, height:500, vaxis: {title: "cups", minvalue:0, maxvalue:500}, haxis: {title: "year"}, }; var data = new google.visualization.datatable(); data.addcolumn('string', 'n'); data.addcolumn('number', 'value'); data.addcolumn({ type: 'string', role: 'style' }); <?php //---------------- pull data database , populate data------// $result = mysqli_query($'', "select * ''") or die('unable run query:' . mysqli_error()); $qtyarr = array(); $name = array(); while ($row = mysqli_fetch_array($result)) { $qtyarr[$row['seq']] = $row['itemqty']; $name[$row['seq']] = $row['itemna']; } $table = ""; foreach ($qtyarr $key => $item) { foreach ($name $seq => $na){ if($key == $seq){ $table .= " data.addrow(['"; $table .= $na. "',"; $table .= $item. ",'#3399ff']);"; } } } echo $table; ?> var chart = new google.visualization.columnchart(document.getelementbyid('chart')); chart.draw(data, options); //----- depending on input change run function edits google chart----// $(document).on('change', 'input', function() { var id = $(this).attr('id'); var temparray = <?php echo json_encode($seqarr); ?>; var qtyarray = <?php echo json_encode($qtyarr); ?>; var qty = $(this).val(); var carbon = temparray[id].split("-"); for(var = 1; < carbon.length; = i+2){ var p = 0; $.each(qtyarray, function(key, value) { if(key == carbon[i]){ var x = qty * carbon[i-1]; var y = value - x; //----- set new value , draw chart table updates color doesn't change-----// data.setvalue(p, 1, y, '#ff0000'); chart.draw(data, options); } p++; }); } }); } i tried use var view = new google.visualization.dataview(data);
view.setcolumns([0, 1, { type: 'string', role: 'style', calc: function (p) { return (p) ? 'color: red' : null; } }]); chart.draw(view, { height: 400, width: 600 }); but changes columns red
thanks :)
Comments
Post a Comment