Okay
  Public Ticket #3559014
Create chart with separated data lines according to blank/null row in spreadsheet/table
Closed

Comments

  • John started the conversation

    Hello, I would like to have a Chart.js line chart created with separated, disconnected data (from a table which has a blank row) - see attachments for example, however when I try to import a spreadsheet with a blank row (to separate/disconnect the data) into a new table, wpDataTables always disregards the blank row and does not separate the data when the chart is created from the table.  How can table creation respect and preserve the blank row (or a null row or something) so that the data rows can be separated when the graph is created?

    BTW, in the attachment I provided here, the chart displayed is by the plugin Visualizer, and that plugin does what I want, and it uses an option called "Interpolate Nulls (yes/no)" which achieves this effect. (The description of this option is as follows: "Whether to guess the value of missing points. If yes, it will guess the value of any missing data based on neighboring points. If no, it will leave a break in the line at the unknown point.")  When I set it to NO, it will create the break in all lines to separate the data points where there was a blank row in the corresponding spreadsheet.  Does wpDataTables have a feature that allows this?


    Attached files:  Untitled.png

  •  1,819
    Miloš replied

    Hi John,

    Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.

    -

    I just did a small Test of this Use-Case by inserting a blank row of Data in a Google Sheet, like this :

    3814012795.png

    If i disable Sorting on my linked Table, then it just sorts the Values as i inserted them from the Sheet, as intended :

    1245816929.png

    And you are correct, in our Chart.JS Line Chart, this data is presented as simply being at a zero point, and it is connected to the rest of the series points, like this :

    8176037536.png
    4834060420.png

    That is the default behaviour of the Chart Engine itself.

    We use free libraries for chart engines, and they are limited as to what we can change from within the plugin's UI.

    We do no have a built-in option to set the X axis to 'separate' that section with the blank row from the rest/to 'disconnect' them such as in your example.

    To achieve that, you can only try to find a custom solution using chart callbacks.

    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.

    -

    When it comes to custom examples we have at the moment, i will share one where you can "skip NULL or blank values" on Chart series, i realise that is the opposite of what you wish to achieve, but i hope it might help at least as a starting example :

    Please note that this workaround only works for HighCharts Engine.

    For other Chart Engines we don't currently have a workaround to skip NULL and/or zero values.

    If you wish to try it, please go to the functions.php file of your theme or child theme, and add this:

    function filterNullValues ($value, $origHeader ,$chartID, $tableID){
         // You can add conditions for specific org header, chart id or table id
        // Here we only check if value is null and provide same value to the chart object
        if (is_null($value) || $value == 0 || intval($value) == 0){
            $value = null;
        }
        return $value;
    }
    add_filter( 'wpdatatables_filter_int_cell_data_in_charts', 'filterNullValues', 10, 4 );
    add_filter( 'wpdatatables_filter_float_cell_data_in_charts', 'filterNullValues', 10, 4 );

    This works for integer and float columns that have NULL values and "0" values.

    If you want to apply it just for NULL values, you can use this code:

    function filterNullValues ($value, $origHeader ,$chartID, $tableID){
         // You can add conditions for specific org header, chart id or table id
        // Here we only check if value is null and provide same value to the chart object
        if (is_null($value)){
            $value = null;
        }
        return $value;
    }
    add_filter( 'wpdatatables_filter_int_cell_data_in_charts', 'filterNullValues', 10, 4 );
    add_filter( 'wpdatatables_filter_float_cell_data_in_charts', 'filterNullValues', 10, 4 );

    And if you want to apply it just for "0" values, you can use this code:

    function filterNullValues ($value, $origHeader ,$chartID, $tableID){
         // You can add conditions for specific org header, chart id or table id
        // Here we only check if value is null and provide same value to the chart object
        if ($value == 0){
            $value = null;
        }
        return $value;
    }
    add_filter( 'wpdatatables_filter_int_cell_data_in_charts', 'filterNullValues', 10, 4 );
    add_filter( 'wpdatatables_filter_float_cell_data_in_charts', 'filterNullValues', 10, 4 );
    

    You don't need to change the code after the plugin updates, but you will need to keep this code in functions.php.

    If you want to connect data with NULLs skipped, you can use this callback: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-connectnulls-true/

    <script type="text/javascript">
    jQuery(window).on('load',function(){
        if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
        wpDataChartsCallbacks[16] = function(obj){
            obj.options.plotOptions = {
                series: {
                    connectNulls: true
                }
            }
        };
    });
    </script>
    

    Just make sure to replace [16] with the ID of your chart.

    As mentioned earlier, this only works for the HighCharts Engine;

       and I realise that is not what you're trying to achieve, but I hope that this, in combination with other details shared above, might serve as a starting point.

    I hope that helps.

    Kind Regards, 

    Miloš Jovanović
    [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