All geek questions in one place

Adjust custom Google Maps properties such as color via gviz_api

I am having trouble propagating custom_properties, such as color, to my google diagram through the python gviz_api layer.

I would like to create a histogram with individually colored stripes, for example, in the example: https://developers.google.com/chart/interactive/docs/gallery/barchart#BarStyles

But I cannot figure out how to configure this for gviz_api ( http://code.google.com/p/google-visualization-python/ ).

I perfectly write data in any case, dictionaries, lists, stupids, one line at a time, while I can color the strips separately. Here is my last failed attempt, generate.py:

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()

And the corresponding .html template:

 <html> <script src="https://www.google.com/jsapi" type="text/javascript"></script> <script> 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); }} </script> <body> <div id="chart_div"></div> </body> </html>
+5
source share
2 answers

I found a solution for this.

In your description / data, add a third column that will contain your property.

 description = {"test" : ("string", "Test name"), "duration" : ("number", "Duration"), "property": ("string", '', {'role':'style'})} data = [dict(test="test A", duration=1000, property = "color:green" ), {"test": "test B", "duration": 4000, property = "color:red"}]

This should work if the column order is not messed up. Make sure that order is a test, duration, property. This will not work if it is a test, property, duration, and it does not come up with an error. If you finish without the first test, it will appear with a domain error.

Hope this helps anyone who wants to do this!

+2
source

After the battle with gviz_api and looking at its implementation, I gave up and decided not to use the gviz_api wrapper. Instead, I passed the data to the template through an array and got the individually colored stripes that I got after. Depending on gviz_api, Google Chart, the different colors for each bar contained good information.

generate.py:

 f = open('template.html', 'r') page_template = f.read() f.close() testData = ['Test 1', 43, 'PASS', 'Test 2', 54, 'FAIL'] print page_template.format(testData)

template.html:

 <html> <script src="https://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load("visualization", '1.1', {{packages:['corechart']}}); google.setOnLoadCallback(drawChart); function drawChart() {{ var options = {{ title: 'Test results', legend: 'none', chartArea: {{ width: "50%", height: "70%" }} }} var barChart = new google.visualization.BarChart(document.getElementById('chart_div')); var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string', 'Test name'); dataTable.addColumn('number', 'Duration'); dataTable.addColumn({{ type: 'string', role: 'style' }}); // Import array with contents: [<test name>, <duration>, <result>, .. }} testData = {0} dataTable.addRows(testData.length/3); for (i = 0; i < testData.length/3;i++) {{ dataTable.setValue(i, 0, testData[i*3]); dataTable.setValue(i, 1, testData[i*3+1]); if (testData[i*3+2] == 'PASS') {{ dataTable.setValue(i, 2, 'color:green'); }} else dataTable.setValue(i, 2, 'color:red'); }} }} barChart.draw(dataTable, options); }} </script> <body> <div id="chart_div"></div> </body> </html>

The double curly braces in the template are intended to use the python string.format () method.

+1
source

Source: https://habr.com/ru/post/1209221/

More articles:


All Articles