JSFiddle - React, Tailwind, and code Playground

by ddtxra

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdn.rawgit.com/calipho-sib/nextprot-js/v0.0.23/dist/nextprot.min.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 applicationName = "demo app for using SPARQL with protein existence"; 
var clientInformation = "calipho group at SIB";
var nx = new Nextprot.Client(applicationName, clientInformation);

//Define your sparql
var proteinsByExistenceLevel ='SELECT ?pe count(?entry) as ?cnt ' + 
                              'WHERE {?entry :existence ?pe} group by ?pe';

//Execute the sparql query and retrieve the result
nx.executeSparql(proteinsByExistenceLevel).then(function (result){
var seriesData = [];
result.results.bindings.map(function (data) {
          seriesData.push([data.pe.value, parseInt(data.cnt.value)]); 
        });
    
 //Draw the plot with high charts
 $('#plot').highcharts(
     {chart: {type: 'pie',  options3d: { enabled: true, alpha: 45 }},
          title: { text: 'Protein existence in neXtProt' },
          plotOptions: {pie: { innerSize: 100,  depth: 45 } },
          series: [{name: 'neXtProt entries count',data: seriesData }]
        });
 });