CODEWITHSUNDEEP
pythongoogle-visualizationpygooglechart
Jglstewart
Jglstewart

Reputation: 706

How to use Custom Properties with Python Google Charts aviz_api.py

I've created a column chart using aviz_api.py, python, and django.

However, I having trouble setting properties that are outlined by the documention: https://developers.google.com/chart/interactive/docs/gallery/columnchart#ColumnStyles

aviz_api.py has appears to have the ability to set properties for specific columns by using the method SetRowsCustomProperties(Row/Rows, Custom Property).

I've tried many things to no avail. The graph continues to load, but does not apply the custom property. Here is my latest attempt: 

data_table.SetRowsCustomProperties([1, {"role:style":"gold"})

when I print the data table I get the following:

{"rows":[{"c":[{"v":"Date(2011,0,16)"},{"v":23150}]},{"p":{"role:style":"gold"},.....

Showing that the property is being set, but I have no idea how to format the custom property. anyone have any ideas?

Edit:

I found this: https://developers.google.com/chart/interactive/docs/roles#stylerole

which appears to indicate that I need to add the "p":{"role":"style"} to the description of the data_table. I've done that with the following:

description = {'energy_kwh': ('number','energy_kwh',{"role":"Style"}), 'billing_date': ('date','billing_date')}

This has given me the datatable:

{"cols":[{"label":"billing_date","type":"date","id":"billing_date"},{"label":"energy_kwh","type":"number","id":"energy_kwh","p":{"role":"style"}}],"rows"....

But now the chart isn't loading at all. I'm starting to wonder if the property should go with the horizontal axis data. I'll try that next.

Upvotes: 0

Views: 179

Answers (1)

Jglstewart
Jglstewart

Reputation: 706

I've solved the issue:

I will post my solution for others since I found this very difficult to search:

qset = bills.values("billing_date","energy_kwh").order_by() # Obtain data from database

description = {'billing_date': ('date','billing_date'), 'zcolor':('string','',{'role':'style'}), 'energy_kwh': ('number','energy_kwh')} # indicate columns as dictionaries {"id": "type", "label", "custom property"}

for row in qset:
            row['zcolor'] = 'color: green' #Set color to green for all rows to test

data_table = gviz_api.DataTable(description) # load description
        data_table.LoadData(qset) # load dataset

I got the following output:

{"cols":[{"type":"date","id":"billing_date","label":"billing_date"},{"type":"number","id":"energy_kwh","label":"energy_kwh"},{"type":"string","p":{"role":"style"},"id":"zcolor","label":""}],"rows":[{"c":[{"v":"Date(2011,0,16)"},{"v":23150},{"v":"color: green"}]},{"c":[{"v":"Date(2011,1,10)"},{"v":126025},{"v":"color: green"}]},{"c":[{"v":"Date(2011,2,14)"},{"v":18675},{"v":"color: green"}]},{"c":[{"v":"Date(2011,3,11)"},{"v":19850},{"v":"color: green"}]},{"c":[{"v":"Date(2011,4,15)"},{"v":16400},{"v":"color: green"}]},{"c":[{"v":"Date(2011,5,13)"},{"v":19225},{"v":"color: green"}]},{"c":[{"v":"Date(2011,6,13)"},{"v":22400},{"v":"color: green"}]},{"c":[{"v":"Date(2011,7,15)"},{"v":22400},{"v":"color: green"}]},{"c":[{"v":"Date(2011,8,13)"},{"v":18150},{"v":"color: green"}]},{"c":[{"v":"Date(2011,9,18)"},{"v":17000},{"v":"color: green"}]},{"c":[{"v":"Date(2011,10,10)"},{"v":15875},{"v":"color: green"}]},{"c":[{"v":"Date(2011,11,12)"},{"v":7600},{"v":"color: green"}]},{"c":[{"v":"Date(2012,0,12)"},{"v":32850},{"v":"color: green"}]},{"c":[{"v":"Date(2012,1,13)"},{"v":7600},{"v":"color: green"}]},{"c":[{"v":"Date(2012,2,12)"},{"v":20925},{"v":"color: green"}]},{"c":[{"v":"Date(2012,3,19)"},{"v":18950},{"v":"color: green"}]},{"c":[{"v":"Date(2012,4,11)"},{"v":16400},{"v":"color: green"}]},{"c":[{"v":"Date(2012,5,12)"},{"v":18100},{"v":"color: green"}]},{"c":[{"v":"Date(2012,6,12)"},{"v":16975},{"v":"color: green"}]},{"c":[{"v":"Date(2012,7,14)"},{"v":24650},{"v":"color: green"}]},{"c":[{"v":"Date(2012,8,12)"},{"v":16475},{"v":"color: green"}]},{"c":[{"v":"Date(2012,9,12)"},{"v":17000},{"v":"color: green"}]},{"c":[{"v":"Date(2012,10,18)"},{"v":15625},{"v":"color: green"}]},{"c":[{"v":"Date(2012,11,11)"},{"v":1475},{"v":"color: green"}]},{"c":[{"v":"Date(2013,0,14)"},{"v":8225},{"v":"color: green"}]},{"c":[{"v":"Date(2013,1,12)"},{"v":9050},{"v":"color: green"}]},{"c":[{"v":"Date(2013,2,12)"},{"v":7250},{"v":"color: green"}]},{"c":[{"v":"Date(2013,3,11)"},{"v":18950},{"v":"color: green"}]},{"c":[{"v":"Date(2013,4,13)"},{"v":16375},{"v":"color: green"}]},{"c":[{"v":"Date(2013,5,12)"},{"v":18675},{"v":"color: green"}]},{"c":[{"v":"Date(2013,6,11)"},{"v":7600},{"v":"color: green"}]},{"c":[{"v":"Date(2013,7,13)"},{"v":10525},{"v":"color: green"}]},{"c":[{"v":"Date(2013,8,12)"},{"v":44850},{"v":"color: green"}]},{"c":[{"v":"Date(2013,9,10)"},{"v":32250},{"v":"color: green"}]},{"c":[{"v":"Date(2013,10,13)"},{"v":9600},{"v":"color: green"}]},{"c":[{"v":"Date(2013,11,11)"},{"v":15500},{"v":"color: green"}]},{"c":[{"v":"Date(2014,0,13)"},{"v":9600},{"v":"color: green"}]},{"c":[{"v":"Date(2014,1,12)"},{"v":7950},{"v":"color: green"}]},{"c":[{"v":"Date(2014,2,12)"},{"v":7775},{"v":"color: green"}]},{"c":[{"v":"Date(2014,3,16)"},{"v":7950},{"v":"color: green"}]},{"c":[{"v":"Date(2014,4,12)"},{"v":14675},{"v":"color: green"}]},{"c":[{"v":"Date(2014,5,24)"},{"v":15850},{"v":"color: green"}]},{"c":[{"v":"Date(2014,6,14)"},{"v":10225},{"v":"color: green"}]},{"c":[{"v":"Date(2014,9,1)"},{"v":10200},{"v":"color: green"}]},{"c":[{"v":"Date(2014,9,10)"},{"v":18100},{"v":"color: green"}]}]}

Note that the thing I was getting stuck on was order. The column with the property has to come directly after the column of data that you are plotting. I couldn't find this fact anywhere in the documentation.

I mostly used https://developers.google.com/chart/interactive/docs/roles to help me solve the problem.

Upvotes: 0

Related Questions