google charts graphs set legend value and same color columns

88
April 20, 2018, at 10:33 PM

data = [["product1",3.6126719999999977],["product2",6.827597999999999],["product2",1008.0]] when i use array data and implement in columns or bar charts that time is displayed legend as value only not 'diffrent product name' and all bar charts look same color columns. i want to add legend name as product name and diffrent color to all columns

    google.charts.load('current', { 
      packages: ['corechart'] 
    }).then(function () { 
      
 
       
     $.ajax({ 
        url: 'path to data', 
        dataType: 'json' 
      }).done(function (jsonData) { 
        loadData(jsonData); 
      }).fail(function (jqXHR, textStatus, errorThrown) { 
        var jsonData = [["product1",450],["product2",23],["product3",1008.0]]; 
        loadData(jsonData, '1', 'Column'); 
      }); 
 
      // load json data 
      function loadData(jsonData, id, chartType) { 
        // create data table 
        var dataTable = new google.visualization.DataTable(); 
 
        switch (chartType) { 
          case 'Column': 
            // add date column 
            dataTable.addColumn('string', 'Product'); 
            dataTable.addColumn('number', 'Value'); 
 
            $.each(jsonData, function(productIndex, product) { 
              // add product data 
              dataTable.addRow([ 
                product[0], 
                product[1], 
              ]); 
            }); 
            break; 
 
          
        } 
 
        // draw chart 
        $(window).resize(function () { 
          drawChart(id, chartType, dataTable); 
        }); 
        drawChart(id, chartType, dataTable); 
      } 
 
      // save charts for redraw 
      var charts = {}; 
      var options = { 
        Column: { 
          chartArea: { 
            height: '100%', 
            width: '100%', 
            top: 64, 
            left: 64, 
            right: 32, 
            bottom: 48 
          }, 
          height: '100%', 
          legend: { 
            position: 'top' 
          }, 
          pointSize: 4, 
          width: '100%' 
        }, 
        Pie: { 
          height: '100%', 
          width: '100%' 
        }, 
        Line: { 
          height: '100%', 
          width: '100%', 
          legend: { 
            position: 'bottom' 
          }, 
          pointSize: 4, 
          width: '100%' 
        } 
 
      }; 
 
      // draw chart 
       function drawChart(id, chartType, dataTable) { 
        if (!charts.hasOwnProperty(id)) { 
          charts[id] = new google.visualization.ChartWrapper({ 
            chartType: chartType + 'Chart', 
            containerId: 'chart-' + id, 
            options: options[chartType] 
          }); 
        } 
        charts[id].setDataTable(dataTable); 
        charts[id].draw(); 
      } 
    });
    html, body { 
      height: 100%; 
      margin: 0px 0px 0px 0px; 
      overflow: hidden; 
      padding: 0px 0px 0px 0px; 
    } 
 
    .chart { 
      display: inline-block; 
      height: 100%; 
      width: 32%; 
    }
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="https://www.gstatic.com/charts/loader.js"></script> 
    <div class="chart" id="chart-0"></div> 
    <div class="chart" id="chart-1"></div> 
    <div class="chart" id="chart-2"></div>

Answer 1

in this case, you want to create columns for each product,
instead of rows for each product...

see following working snippet...

google.charts.load('current', { 
  packages: ['corechart'] 
}).then(function () { 
  // save charts for redraw 
  var charts = {}; 
  var options = { 
    Column: { 
      chartArea: { 
        height: '100%', 
        width: '100%', 
        top: 64, 
        left: 64, 
        right: 32, 
        bottom: 48 
      }, 
      height: '100%', 
      legend: { 
        position: 'top' 
      }, 
      pointSize: 4, 
      width: '100%' 
    }, 
    Pie: { 
      height: '100%', 
      width: '100%' 
    }, 
    Line: { 
      height: '100%', 
      width: '100%', 
      legend: { 
        position: 'bottom' 
      }, 
      pointSize: 4, 
      width: '100%' 
    } 
  }; 
 
  var jsonData = [["product1",450],["product2",23],["product3",1008.0]]; 
  loadData(jsonData, '1', 'Column'); 
 
  // load json data 
  function loadData(jsonData, id, chartType) { 
    // create data table 
    var dataTable = new google.visualization.DataTable(); 
 
    switch (chartType) { 
      case 'Column': 
        // add date column 
        dataTable.addColumn('string', 'Category'); 
        var rowIndex = dataTable.addRow(); 
        dataTable.setValue(rowIndex, 0, dataTable.getColumnLabel(0)); 
 
        $.each(jsonData, function(productIndex, product) { 
          var colIndex = dataTable.addColumn('number', product[0]); 
          // add product data 
          dataTable.setValue(rowIndex, colIndex, product[1]); 
        }); 
        break; 
    } 
 
    // draw chart 
    $(window).resize(function () { 
      drawChart(id, chartType, dataTable); 
    }); 
    drawChart(id, chartType, dataTable); 
  } 
 
  // draw chart 
  function drawChart(id, chartType, dataTable) { 
    if (!charts.hasOwnProperty(id)) { 
      charts[id] = new google.visualization.ChartWrapper({ 
        chartType: chartType + 'Chart', 
        containerId: 'chart-' + id, 
        options: options[chartType] 
      }); 
    } 
    charts[id].setDataTable(dataTable); 
    charts[id].draw(); 
  } 
});
html, body { 
  height: 100%; 
  margin: 0px 0px 0px 0px; 
  overflow: hidden; 
  padding: 0px 0px 0px 0px; 
} 
 
.chart { 
  height: 100%; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="https://www.gstatic.com/charts/loader.js"></script> 
<div class="chart" id="chart-1"></div>

READ ALSO
Auto slash(/) for date input using Javascript MM/YY

Auto slash(/) for date input using Javascript MM/YY

I'm working on an input form that includes a credit card expiration date for only Visa and MastercardThese two restrict the expiration date to MM/YY

191
Value changed to null in ajax

Value changed to null in ajax

Value changed to null in ajax after updating the shipping city value from text fieldI don't known what is the problem

107
Re-rendering an EJS template after jQuery POST request with new data

Re-rendering an EJS template after jQuery POST request with new data

This is my first question posted here so please be gentle:)

98
CSS Safari not using display none for select options

CSS Safari not using display none for select options

I have the below form that works in Chrome, Firefox, IE, but not SafariI think I have narrowed it down to the display:none

124