Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

points calculated wrong in DataTables cell #105

Closed
gypapp opened this issue Aug 25, 2019 · 2 comments
Closed

points calculated wrong in DataTables cell #105

gypapp opened this issue Aug 25, 2019 · 2 comments

Comments

@gypapp
Copy link

gypapp commented Aug 25, 2019

Hi, I have run into a weird situation when using peity with DataTables DataTables is used to display traffic-related information in tabular format and I'd like to add a small bar or line graph to every row with peity:

            $('#sources').DataTable( {
                /* ... */
                "columnDefs": [
                    {
                        "targets": 5,
                        "data": "volume",
                        "render": function ( data ) {
                            return '<span class="bar-trend">'+ data.trend +'</span>';
                        }
                    }
                ],
                "createdRow": function ( row, data, index ) {
                    $('span.bar-trend', row).peity("line");
                }

Though the svg is generated the points are obviously miscalculated for this sequence 41,48,49,47,74,64,71,47:

<svg class="peity" height="16" width="32"><polygon fill="#c6d9fd" points="0 -0.5 0 0.05405405405405406 0 0.14864864864864868 0 0.16216216216216217 0 0.1351351351351351 0 0.5 0 0.3648648648648649 0 0.45945945945945943 0 0.1351351351351351 0 -0.5"></polygon><polyline fill="none" points="0 0.05405405405405406 0 0.14864864864864868 0 0.16216216216216217 0 0.1351351351351351 0 0.5 0 0.3648648648648649 0 0.45945945945945943 0 0.1351351351351351" stroke="#4d89f9" stroke-width="1" stroke-linecap="square"></polyline></svg>

If I put it elsewhere statically in the HTML, it shows up correctly. points in this case:
0 15.5 0 7.1891891891891895 4.571428571428571 5.77027027027027 9.142857142857142 5.567567567567567 13.714285714285714 5.972972972972974 18.285714285714285 0.5 22.857142857142854 2.5270270270270263 27.428571428571427 1.1081081081081088 32 5.972972972972974 32 15.5

Please advise how I could fix it.

@gypapp
Copy link
Author

gypapp commented Aug 25, 2019

I traced down in Chrome and found both $svg.width() and $svg.height() return 0 in this case:

      var $svg = this.prepare(opts.width, opts.height)
        , width = $svg.width()
        , height = $svg.height()

This is somewhat similar to #68

@gypapp
Copy link
Author

gypapp commented Aug 25, 2019

Duplicate of #68

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant