title: Feed google charts custom properties like color through gviz_api
body: <p>I'm having trouble propagating custom_properties like color into my google chart through the python layer gviz_api.</p>
  
  <p>I would like to create a bar chart with individually colored bars such as in the example here: <a href="https://developers.google.com/chart/interactive/docs/gallery/barchart#BarStyles" rel="nofollow">https://developers.google.com/chart/interactive/docs/gallery/barchart#BarStyles</a></p>
  
  <p>But I can't figure out how to set this up throug the gviz_api (<a href="http://code.google.com/p/google-visualization-python/" rel="nofollow">http://code.google.com/p/google-visualization-python/</a>).</p>
  
  <p>I'm fine feeding the data in any way, dictionaries, lists, tuplets, one row at a time, as long as I can color the bars individually. Here's my latest non-working attempt, generate.py:</p>
  
  <pre><code>import gviz_api
  def main():
      # Creating the data
      description = {"test" : ("string", "Test name"),
                     "duration" : ("number", "Duration")}
      data = [dict(test="test A", duration=1000, custom_properties={"role":"color:green"}),
              {"test": "test B", "duration": 4000}]
  
      # Loading it into gviz_api.DataTable
      data_table = gviz_api.DataTable(description, custom_properties={"role":"style"})
      data_table.LoadData(data)
  
      # Creating a JSon string
      json = data_table.ToJSon(columns_order=("test", "duration"), order_by="test")
  
      # Read page_template from file
      f = open('template.html', 'r')
      page_template = f.read()
      # Putting the JSon string into the template
      print page_template.format(json)
  
  if __name__ == '__main__':
      main()
  </code></pre>
  
  <p>And the corresponding template.html:</p>
  
  <pre><code>&lt;html&gt;
  &lt;script src="https://www.google.com/jsapi" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script&gt;
  google.load('visualization', '1', {{packages:['corechart']}});
  
  google.setOnLoadCallback(drawChart);
  function drawChart() {{
    var options = {{
      title: 'Test results',
      legend: 'none',
      chartArea: {{ width: "50%", height: "70%" }}
    }}
  
    var json_chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    var json_data = new google.visualization.DataTable({0}, 0.6);
    json_chart.draw(json_data, options);
  }}
  &lt;/script&gt;
  &lt;body&gt;
    &lt;div id="chart_div"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>