Getting complete diagram svg area, some diagram flow are hidden

[bgrajesh]

Hi,

I have a div for sankey diagram, On rendering am getting below code:
< div style="height:250px;" class="divTbl" id="sankey" >
< svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="922" height="250" > < /svg >
< /div >

I know by default sankey diagram take the width of the parent div. But when graph is rendered, on browsers I can see some of the diagram or text area's are hidden.

Can you please let me know how to resolve this. So that we can have a complete view of diagram in the given DIV.

Regards,

Rajesh

[tamc]

Can you post a link to a complete page, including your JavaScript, showing the problem?

[bgrajesh]

Hi Tamc,

Am sorry I can't post a link. I can give the code below or send a mail :

< script type='text/javascript'>
$(document).ready(function() {
$.post(createJSONURL('<%=navType%>','SankeyVolume'), function(data){
var sankey = new Sankey();
var root = $("'[id=Trade-SankeyVolume-input-org]'").val();
var tokensArr = data.split("],[");
var makersArr=[];
var takersArr=[];
for(var i=0;i<tokensArr.length;i++){
var record = tokensArr[i];
record = record.replace(/]/g,'');
record = record.replace(/[/g,'');
record = record.replace(/"/g,'');
record = record.replace(/(\r\n|\n|\r)/gm,"");
record = record.replace(/ /g,'');
var recordArr = record.split(",");
if(recordArr[2]===root || recordArr[2]==root+']')
{if($.inArray(recordArr[0], makersArr) === -1)
makersArr.push(recordArr[0]);
}
else
{if($.inArray(recordArr[2], takersArr) === -1)
takersArr.push(recordArr[2]);
}
}
sankey.convert_box_description_labels_callback = function(name) {
return name;
};

  sankey.stack(0,makersArr);
  sankey.stack(5,takersArr);
  sankey.stack(3,[root]);
  // Colours
  sankey.setColors({
    "MSFX":"#F6FF00", 
    "All":"#0000FF",
    "BARX":"#C7E7E6", 
    "DKIB":"#C7E7E6", 
    "BOAL":"#C7E7E6", 
    "CITI":"#C7E7E6", 
    "DBND":"#C7E7E6", 
  });
  // Add the emissions
  // sankey.boxes["Thermal generation"].ghg = 100;
  // Fix some of the colours
  sankey.nudge_colours_callback = function() {
    this.recolour(this.boxes[root].left_lines,"#0000FF");
this.recolour(this.boxes[root].right_lines,"C6E6FF");
  };
  sankey.y_space = 20;
  sankey.right_margin = 150;
  sankey.left_margin = 50;

  sankey.convert_flow_values_callback = function(flow) {
    return flow * 0.0000005; // Pixels per TWh
  };
  sankey.convert_flow_labels_callback = function(flow) {
    return Math.round(flow);
  };
  sankey.convert_box_value_labels_callback = function(flow) {
      // return (""+Math.round(flow)+" TWh/y");
       return "";
  };
  sankey.setData(eval(data));
  sankey.draw();
});
 }); 
</script>
<div class="divTbl_1" style='text-align: center; margin-top: 0'>Move your mouse over the diagram to show values</div>
<div id='sankey' class="divTbl" style="height:250px;">
  &nbsp;
</div>

Regards,

Rajesh

[tamc]

Thanks.

I'd be grateful if you could simplify your example so that it doesn't depend on other javascript or calling another datasource. I will only be able to help for sure if I can recreate your problem.

But until then, have you experimented with the 0.00000005 value in this line:

sankey.convert_flow_values_callback = function(flow) {
    return flow * 0.0000005; // Pixels per TWh
};

It is what governs the relationship between the data for a line and the height of the line on screen.