JSFiddle - React, Tailwind, and code Playground

by ddtxra

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.rawgit.com/calipho-sib/nextprot-js/v0.0.51/dist/nextprot.js"></script>
<body>
  <div id="plot" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>

JavaScript

// Create an instance of nextprot API
  var Nextprot = window.Nextprot;
  var applicationName = "demo app for using SPARQL";
  var clientInformation = "calipho group at SIB";
  var nx = new Nextprot.Client(applicationName, clientInformation);

  var numberOfGenesPerChromosomeSparql =
  'select distinct ?chr (count(?entry) as ?genecnt) ?chrint where { ' +
    ' ?entry :gene / :chromosome ?chr. ' +
    ' bind (coalesce(xsd:integer(?chr),"99"^^xsd:integer) as ?chrint) ' + //order by ?chrint
  ' }order by ?chrint';

  nx.executeSparql(numberOfGenesPerChromosomeSparql).then(function (result){

    var chromosomes = [];
    var entries = [];

    result.results.bindings.map(function (data) {
      chromosomes.push("chr " + data.chr.value); //gets chromosome
      entries.push(parseInt(data.genecnt.value)); //gets number of entries
    });


    //Draw the plot
    $('#plot').highcharts({
      chart: {type: 'column'},
      title: {text: 'Genes per chromosome'},
      xAxis: {categories: chromosomes},
      yAxis: {title: {text: 'Number of genes'}},series: [{name: 'Chromosome', data: entries}]
    });
  });