I have a table coming from Google Sheets API... What I want to do is to make a chart for every row and put the chart into a separate cell on the same row. How can I do this?
So this will be done for every row in my table. My table has between 100 to 2000 rows, depending on which current date it is.
That is the default behavior of the charts engine, but if you need some custom solution you can check our documentation about wpDataCharts callbacks.
Every chart exposes several options that customize its look and feel. Charts usually support custom options appropriate to that visualization. wpDataChart callbacks allow adding options that are available in Google Charts API, Highcharts API, and Chart.js API.
All necessary resources are available in charts engines API (depends on which one you use). Every engine has a different approach to chart settings. In wpDataChart callbacks, you have to adopt those settings to the wpDataChart object (you can take a look at examples for each engine in our documentation, and also in the Support help center). A huge number of examples for any area of programming can be found on stackoverflow.com (typing your problem in google and at the end add "site: stackoverflow.com" and Google will search only that website). Also, a lot of examples of charts, chart settings, and customization can be found on jsffidle.net (typing in google for example "line chart highcharts jsffidle")
Please note that using hooks or wpDataTable and wpDataChart callbacks requires a certain level of programming skills and included support refers only to advice.
What you're asking to do would be rather cumbersome, but I assume you can do it.
You would need to create a new chart for every row manually, and when you get to the Data Range step:
You need to enable the "Pick Range":
Then click on the Range picker, and select only the first row. Save the chart and go to wpDataTables settings. Make sure "Parse shortcodes in strings" is enabled and then paste the shortcode of the first chart into the designated column of the table.
Then repeat the procedure for all other rows. There's no way to automate this, I'm afraid.
Do you think making a small chart for every row would affect the loading of the table heavily? I was thinking that the charts would be locally (as created on wpDataTables directly), but the rest of the table will be fetched by Google Sheets API anyway...
Is there a difference between different chart motors, which one is less heavy?
If you're not on a shared hosting, it shouldn't be causing issues. I prefer Highcharts, but there's no specific reason, to be honest. Google Charts are the heaviest, I believe, and they have a lot of padding around them, so I definitely wouldn't recommend using them.
You can create a table, and add the shortcodes for the charts in their specific column. Then, when you make all charts from that table, they would automatically populate, since the string would be pulled from Google Sheets. Since you're using the API, it'd be faster.
Thanks. But doing this procedure for a table with 2000 rows is not a wise solution. What about sparkline? I could generate a small chart for every row in the Google Sheets using sparkline formula and automate it to all 2000 rows. The problem is, I cannot see the sparkline chart when imported into wpdatatables.
Do you know any way of goring around this so that the cells show sparkline value/chart? See image below from Google Sheets
Thank you for reaching out to us. Aleksandar is no longer working on this case so let me forward it to him as he will be more suitable to assist in this matter.
We appreciate your time and patience.
Please note: due to COVID-19 our team has been short on staff, so it may take a bit longer than usual to receive a response, but we are doing our best to provide assistance as fast as possible, thank you for your understanding.
wpDataTables can't pull any formatting, styles, formulae, etc. from external sources (Google Spreadsheets, Excel, CSV, etc.), so pulling that sparkline would not be possible.
I'm afraid there's no workaround for this at the moment.
Hello
I have a table coming from Google Sheets API... What I want to do is to make a chart for every row and put the chart into a separate cell on the same row. How can I do this?
So this will be done for every row in my table. My table has between 100 to 2000 rows, depending on which current date it is.
Hi Edwin,
thank you for reaching out to us
That is the default behavior of the charts engine, but if you need some custom solution you can check our documentation about wpDataCharts callbacks.
Ivana, again this is not the reply I was asking for. My question was something else. I need to know:
How to append the chart to the same row which the chart gets its information from ?
Hello Edwin
What you're asking to do would be rather cumbersome, but I assume you can do it.
You would need to create a new chart for every row manually, and when you get to the Data Range step:
You need to enable the "Pick Range":
Then click on the Range picker, and select only the first row. Save the chart and go to wpDataTables settings. Make sure "Parse shortcodes in strings" is enabled and then paste the shortcode of the first chart into the designated column of the table.
Then repeat the procedure for all other rows. There's no way to automate this, I'm afraid.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Thanks Aleksandar for your reply,
Do you think making a small chart for every row would affect the loading of the table heavily? I was thinking that the charts would be locally (as created on wpDataTables directly), but the rest of the table will be fetched by Google Sheets API anyway...
Is there a difference between different chart motors, which one is less heavy?
Hi again Edwin
Sorry for the late response.
If you're not on a shared hosting, it shouldn't be causing issues. I prefer Highcharts, but there's no specific reason, to be honest. Google Charts are the heaviest, I believe, and they have a lot of padding around them, so I definitely wouldn't recommend using them.
You can create a table, and add the shortcodes for the charts in their specific column. Then, when you make all charts from that table, they would automatically populate, since the string would be pulled from Google Sheets. Since you're using the API, it'd be faster.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hello Aleksandar
Thanks. But doing this procedure for a table with 2000 rows is not a wise solution. What about sparkline? I could generate a small chart for every row in the Google Sheets using sparkline formula and automate it to all 2000 rows. The problem is, I cannot see the sparkline chart when imported into wpdatatables.
Do you know any way of goring around this so that the cells show sparkline value/chart? See image below from Google Sheets
best regards
Hi Edwin
Thank you for reaching out to us. Aleksandar is no longer working on this case so let me forward it to him as he will be more suitable to assist in this matter.
We appreciate your time and patience.
Please note: due to COVID-19 our team has been short on staff, so it may take a bit longer than usual to receive a response, but we are doing our best to provide assistance as fast as possible, thank you for your understanding.
Hello again Edwin
wpDataTables can't pull any formatting, styles, formulae, etc. from external sources (Google Spreadsheets, Excel, CSV, etc.), so pulling that sparkline would not be possible.
I'm afraid there's no workaround for this at the moment.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables