WEIRD! Points on xaxis are NOT marked if the xaxis array.length>18

plotly.js
1
Plotly 
<!--All HTML content go below this-->

<div class="spacer"></div>
<div class="container">
    <div id="resultGraph" class="col-md-12">
        <div class="spacer"></div>
        <div id="loadAssoc" class="text-center hidden"><i class="fa fa-spinner fa-spin fa-3x"></i> Loading...</div>
        <div class="spacer"></div>
        <div id="myGraph" class="text-center">
        </div>
    </div>
</div>


<!--All scripts go below this-->

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js" type="text/javascript"></script>

<!--Main Script for the page-->

<script>
    function load() {
        //var url = 'http://54.24.154.5:2024/test';
        $('#loadAssoc').removeClass('hidden');
        var data = [{
            "id": "WSHG00000148737.11",
            "name": "TCF7L2",
            "start": 1,
            "end": 10,
            "value": 1,
            "elects": [{
                "elect_id": "wese00002258101.1",
                "chru": "10",
                "start": 1,
                "end": 1.3,
                "str": "+"
            }, {
                "elect_id": "wese00003644651.1",
                "chru": "10",
                "start": 1.5,
                "end": 1.7,
                "str": "+"
            }, {
                "elect_id": "wese00003496147.1",
                "chru": "10",
                "start": 1.9,
                "end": 2,
                "str": "+"
            }, {
                "elect_id": "wese00000987139.1",
                "chru": "10",
                "start": 2.2,
                "end": 2.8,
                "str": "+"
            }, {
                "elect_id": "wese00003683398.1",
                "chru": "10",
                "start": 3,
                "end": 4,
                "str": "+"
            }, {
                "elect_id": "wese00003618124.1",
                "chru": "10",
                "start": 4.5,
                "end": 6,
                "str": "+"
            }, {
                "elect_id": "wese00003644692.1",
                "chru": "10",
                "start": 7,
                "end": 8,
                "str": "+"
            }, {
                "elect_id": "wese00003676788.1",
                "chru": "10",
                "start": 8.1,
                "end": 8.7,
                "str": "+"
            }, {
                "elect_id": "wese00003686629.1",
                "chru": "10",
                "start": 8.9,
                "end": 9.2,
                "str": "+"
            }, {
                "elect_id": "wese00003608278.1",
                "chru": "10",
                "start": 9.2,
                "end": 10,
                "str": "+"
            }]
        }, {
            "id": "WSHG00000225292.2",
            "name": "RP11-57H14.3",
            "start": 11,
            "end": 20,
            "value": 1,
            "elects": [{
                "elect_id": "wese00001736417.2",
                "chru": "10",
                "start": 11,
                "end": 13,
                "str": "+"
            }, {
                "elect_id": "wese00001665746.1",
                "chru": "10",
                "start": 13,
                "end": 15,
                "str": "+"
            }, {
                "elect_id": "wese00001758350.1",
                "chru": "10",
                "start": 15,
                "end": 20,
                "str": "+"
            }]
        }, {
            "id": "WSHG00000151532.9",
            "name": "VTI1A",
            "start": 21,
            "end": 30,
            "value": 1,
            "elects": [{
                "elect_id": "wese00001449955.2",
                "chru": "10",
                "start": 21,
                "end": 21.5,
                "str": "+"
            }, {
                "elect_id": "wese00001817770.1",
                "chru": "10",
                "start": 22,
                "end": 23,
                "str": "+"
            }, {
                "elect_id": "wese00001449955.2",
                "chru": "10",
                "start": 23,
                "end": 25,
                "str": "+"
            }, {
                "elect_id": "wese00001817770.1",
                "chru": "10",
                "start": 25.5,
                "end": 26.5,
                "str": "+"
            }, {
                "elect_id": "wese00001449955.2",
                "chru": "10",
                "start": 27,
                "end": 27.2,
                "str": "+"
            }, {
                "elect_id": "wese00001817770.1",
                "chru": "10",
                "start": 27.5,
                "end": 27.8,
                "str": "+"
            }, {
                "elect_id": "wese00001449955.2",
                "chru": "10",
                "start": 28,
                "end": 28.5,
                "str": "+"
            }]
        }, {
            "id": "WSHG00000233547.1",
            "name": "RP11-57H14.2",
            "start": 5,
            "end": 7,
            "value": 2,
            "elects": [{
                "elect_id": "wese00001806689.1",
                "chru": "10",
                "start": 5,
                "end": 6,
                "str": "-"
            }, {
                "elect_id": "wese00001709114.1",
                "chru": "10",
                "start": 6,
                "end": 7,
                "str": "-"
            }]
        }, {
            "id": "WSHG00000260917.1",
            "name": "RP11-57H14.4",
            "start": 8,
            "end": 15,
            "value": 2,
            "elects": [{
                "elect_id": "wese00002585546.1",
                "chru": "10",
                "start": 9,
                "end": 11,
                "str": "+"
            }]
        }, {
            "id": "WSHG00000227560.1",
            "name": "RP11-139K1.2",
            "start": 16,
            "end": 25,
            "value": 3,
            "elects": [{
                "elect_id": "wese00001607677.1",
                "chru": "10",
                "start": 18,
                "end": 23,
                "str": "+"
            }]
        }];
        var facets = [];
        var mainXst = [];
        var mainXend = [];
        var mainY = [];
        var final = [];
        var sub = [];
        _.forEach(data, function (v, s) {
            let key = s;
            final[key] = {};
            final[key].x = [v.start, v.end];
            final[key].y = _.fill(Array(final[key].x.length), v.value);
        });
        var sort = [];
        _.forEach(data, function (i, k) {
            _.forEach(i.elects, function (p, z) {
                final[k].x.push(p.start);
                final[k].x.push(p.end);
                sort = _.sortBy(final[k].x);
                final[k].x = sort;
                final[k].y = _.fill(Array(sort.length), i.value);
                final[k].name = i.name;
                final[k].showlegend = false;
                final[k].hoverinfo = 'all';
                final[k].gid = i.id;
                final[k].url = 'http://exac.broadinstitute.org/gene/';
                final[k].mode = 'scatter';
                final[k].marker = {};
                final[k].line = {};
                final[k].line.width = 2;
                final[k].marker.size = 12;
                final[k].marker.maxdisplayed = 0;
                //final[k].marker.color = '#363696';
                final[k].marker.symbol = 'line-ns-open';
            });
        });
        console.log(final);

        var myPlot = document.getElementById('myGraph'),
            d3 = Plotly.d3,
            layout = {
                hovermode: 'closest',
                title: '<b>Locus plot</b>',
                xaxis: {
                    title: 'Positions',
                    zeroline: false,
                    showline: false,
                    autotick: true
                },
                yaxis: {
                    zeroline: false,
                    showline: false,
                    autotick: true,
                    ticks: '',
                    showticklabels: false
                }
            };
        $('#loadAssoc').addClass('hidden');
        Plotly.newPlot('myGraph', final, layout, {
            scrollZoom: true
        });
    };
    load();
</script>

Please assist. PLEASE PLEASE PLEASE.!! TOO MUCH OF STRUGGLING SO FAR … THANK YOU

2

Can you be more specific? What do you mean by not marked ?

3

Yes, If you look at my code I have “name: TCF7L2” inside it i have “elects” array which has 10 items . When I develop dynamic traces using the code below starting from
"_.forEach(data, function (i, k) {
_.forEach(i.elects, function (p, z) {
final[k].x.push(p.start);
final[k].x.push(p.end);
sort = _.sortBy(final[k].x);
final[k].x = sort;
final[k].y = _.fill(Array(sort.length), i.value);
final[k].name = i.name;
final[k].showlegend = false;
final[k].hoverinfo = ‘all’;
final[k].gid = i.id;
final[k].url = ‘http://exac.broadinstitute.org/gene/’;
final[k].mode = ‘scatter’;
final[k].marker = {};
final[k].line = {};
final[k].line.width = 2;
final[k].marker.size = 12;
final[k].marker.maxdisplayed = 0;
//final[k].marker.color = ‘#363696’;
final[k].marker.symbol = ‘line-ns-open’;
});
}); "

I get the data variable (which is FINAL in my code) to send to Plotly.newPlot(‘myGraph’, final, layout, {
scrollZoom: true
})
in that one trace has x: [] which has 22 points for that trace I dont see the points on the graph as it shows for others.

Hope I made some sense. New to plotly . Please assist.

4

Ok. I see. You must have some NaN / null / undefined values in your x array.

Would you mind pasting the output of console.log(final.x) here?

5

Sure, see below

complete JSON for FINAL = [{“x”:[1,1,1.3,1.5,1.7,1.9,2,2.2,2.8,3,4,4.5,6,7,8,8.1,8.7,8.9,9.2,9.2,10,10],“y”:[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],“name”:“TCF7L2”,“showlegend”:false,“hoverinfo”:“all”,“gid”:“WSHG00000148737.11”,“url”:“http://exac.broadinstitute.org/gene/",“mode”:“scatter”,“marker”:{“size”:12,“maxdisplayed”:0,“symbol”:“line-ns-open”},“line”:{“width”:2}},{“x”:[11,11,13,13,15,15,20,20],“y”:[1,1,1,1,1,1,1,1],“name”:“RP11-57H14.3”,“showlegend”:false,“hoverinfo”:“all”,“gid”:“WSHG00000225292.2”,“url”:“http://exac.broadinstitute.org/gene/”,“mode”:“scatter”,“marker”:{“size”:12,“maxdisplayed”:0,“symbol”:“line-ns-open”},“line”:{“width”:2}},{“x”:[21,21,21.5,22,23,23,25,25.5,26.5,27,27.2,27.5,27.8,28,28.5,30],“y”:[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],“name”:“VTI1A”,“showlegend”:false,“hoverinfo”:“all”,“gid”:“WSHG00000151532.9”,“url”:“http://exac.broadinstitute.org/gene/”,“mode”:“scatter”,“marker”:{“size”:12,“maxdisplayed”:0,“symbol”:“line-ns-open”},“line”:{“width”:2}},{“x”:[5,5,6,6,7,7],“y”:[2,2,2,2,2,2],“name”:“RP11-57H14.2”,“showlegend”:false,“hoverinfo”:“all”,“gid”:“WSHG00000233547.1”,“url”:“http://exac.broadinstitute.org/gene/”,“mode”:“scatter”,“marker”:{“size”:12,“maxdisplayed”:0,“symbol”:“line-ns-open”},“line”:{“width”:2}},{“x”:[8,9,11,15],“y”:[2,2,2,2],“name”:“RP11-57H14.4”,“showlegend”:false,“hoverinfo”:“all”,“gid”:“WSHG00000260917.1”,“url”:“http://exac.broadinstitute.org/gene/”,“mode”:“scatter”,“marker”:{“size”:12,“maxdisplayed”:0,“symbol”:“line-ns-open”},“line”:{“width”:2}},{“x”:[16,18,23,25],“y”:[3,3,3,3],“name”:“RP11-139K1.2”,“showlegend”:false,“hoverinfo”:“all”,“gid”:“WSHG00000227560.1”,“url”:“http://exac.broadinstitute.org/gene/”,“mode”:“scatter”,“marker”:{“size”:12,“maxdisplayed”:0,“symbol”:“line-ns-open”},“line”:{"width”:2}}]

Only for Final[0].x = [1,1,1.3,1.5,1.7,1.9,2,2.2,2.8,3,4,4.5,6,7,8,8.1,8.7,8.9,9.2,9.2,10,10]

Thank you

6

Oh so no invalid values. But looks like you do have a few duplicate x / y points.

Duplicate values do get cleaned up at the moment in scatter traces with mode: 'lines'. plotly.js plots only the first of the duplicated points found in the arrays.

Unfortunately, there’s no way to undo this decimation step at the moment. We are planning on making it optional soon. I would recommend subscribing to https://github.com/plotly/plotly.js/pull/717 for the latest info.

7

Thats strange as it does not take duplicate values on ‘lines’ . But how come it is able to for the array length less than 20 though it has duplicate values

Anyways, I appreciate your time on this.

Thanks again.