Okay
  Public Ticket #2858896
How to put chart of row data in a cell in same row
Closed

Comments

  •  1
    Edwin Dee started the conversation

    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.

  • [deleted] replied

    Hi Edwin,

    thank you for reaching out to ussmile.png

    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 APIHighcharts 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.


  •  1
    Edwin Dee replied

    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 ?

  •  2,572
    Aleksandar replied

    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:

    1223326489.png

    You need to enable the "Pick Range":

    5053901392.png

    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 | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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

  •  1
    Edwin Dee replied

    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?

  •  2,572
    Aleksandar replied

    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 | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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

  •  1
    Edwin Dee replied

    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

    6007472411.png



    best regards

  • [deleted] replied

    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.

  •  2,572
    Aleksandar replied

    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 | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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