Skip to content

GitLab

Commit 74ca8ad1 authored by Philippe Bardou's avatar Philippe Bardou
Browse files

Add param to jvenn : 

- fontSize
- fontFamily

New example page with :
- colorpicker
- fontSize
- fontFamily
- ...
parent 5d06d41a
Show whitespace changes
Inline Side-by-side
example.html
View file @ 74ca8ad1
......@@ -4,7 +4,8 @@
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>jvenn</title>
<!-- Le styles -->
<!-- Les styles -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<style type="text/css">
body {
......@@ -14,12 +15,24 @@
</style>
<link href="css/prettify.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-colorpicker.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="src/jvenn.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-colorpicker.min.js"></script>
<script type="text/javascript" src="src/canvas2svg.js"></script>
<script type="text/javascript" src="src/jvenn.js"></script>
<script language="Javascript">
$(document).ready(function () {
var colorDefault = ["#006600", "#5a9bd4", "#f15a60", "#cfcf1b", "#ff7500", "#c09853"],
displayMode = "classic",
displayStat = true,
shortNumber = true,
fontSize = "12px",
fontFamily = "Arial";
function getArrayFromArea(areaID) {
var lines = $("#"+areaID).val().split("\n");
var table = new Array();
......@@ -45,12 +58,24 @@
});
}
var colorsTable = new Array();
colorsTable.push($('#name1').css("color"));
colorsTable.push($('#name2').css("color"));
colorsTable.push($('#name3').css("color"));
colorsTable.push($('#name4').css("color"));
colorsTable.push($('#name5').css("color"));
colorsTable.push($('#name6').css("color"));
$("#jvenn-container").jvenn({
series: seriesTable,
colors: colorsTable,
fontSize: fontSize,
fontFamily: fontFamily,
searchInput: $("#search-field"),
searchStatus: $("#search-status"),
displayMode: $("#venn-type").val(),
displayStat: true,
displayMode: displayMode,
shortNumber: shortNumber,
displayStat: displayStat,
fnClickCallback: function() {
var value = "";
if (this.listnames.length == 1) {
......@@ -506,88 +531,187 @@
updateJvenn();
});
$('[id^="colorp"]').colorpicker().on('changeColor.colorpicker', function(event) {
var index = $(this).attr("id").split("_")[1];
$("#name" + index).css("color", event.color.toHex());
$("#name" + index).css("border-color", event.color.toHex());
$("#area" + index).css("color", event.color.toHex());
$("#area" + index).css("border-color", event.color.toHex());
updateJvenn();
});
$('[id^="colord"]').click(function() {
var index = $(this).attr("id").split("_")[1];
$("#name" + index).css("color", colorDefault[index-1]);
$("#name" + index).css("border-color", colorDefault[index-1]);
$("#area" + index).css("color", colorDefault[index-1]);
$("#area" + index).css("border-color", colorDefault[index-1]);
$("#colorp_" + index).colorpicker('setValue', colorDefault[index-1]);
updateJvenn();
});
$("#qm_yes").click(function() {
shortNumber = true;
updateJvenn();
});
$("#qm_no").click(function() {
shortNumber = false;
updateJvenn();
});
$("#ds_yes").click(function() {
displayStat = true;
updateJvenn();
});
$("#ds_no").click(function() {
displayStat = false;
updateJvenn();
});
$("#dm_classic").click(function() {
displayMode = "classic";
updateJvenn();
});
$("#dm_edwards").click(function() {
displayMode = "edwards";
updateJvenn();
});
$('[id^="ff"]').click(function() {
fontFamily = $(this).html();
updateJvenn();
});
$('[id^="fs"]').click(function() {
fontSize = $(this).html();
updateJvenn();
});
// first init of the jvenn plugin
$('#colorp_1').children("span").children("i").css("background-color", colorDefault[0]);
$('#colorp_2').children("span").children("i").css("background-color", colorDefault[1]);
$('#colorp_3').children("span").children("i").css("background-color", colorDefault[2]);
$('#colorp_4').children("span").children("i").css("background-color", colorDefault[3]);
$('#colorp_5').children("span").children("i").css("background-color", colorDefault[4]);
$('#colorp_6').children("span").children("i").css("background-color", colorDefault[5]);
updateJvenn();
});
</script>
<style type="text/css">
/*add classes control-group*/
.control-group.yellow .control-label,
.control-group.yellow .help-block,
.control-group.yellow .help-inline {
color: #f3f300;
/* add classes control-group.color */
.control-group.color1 input,
.control-group.color1 textarea {
color: #006600;
border-color: #006600;
}
.control-group.yellow .checkbox,
.control-group.yellow .radio,
.control-group.yellow input,
.control-group.yellow select,
.control-group.yellow textarea {
color: #f3f300;
.control-group.color1 input:focus,
.control-group.color1 textarea:focus {
border-color: #65a265;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #006600;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #006600;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #006600;
}
.control-group.yellow input,
.control-group.yellow select,
.control-group.yellow textarea {
border-color: #f3f300;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
.control-group.color2 input,
.control-group.color2 textarea {
color: #5a9bd4;
border-color: #5a9bd4;
}
.control-group.color2 input:focus,
.control-group.color2 textarea:focus {
border-color: #5a9bd4;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #5a9bd4;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #5a9bd4;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #5a9bd4;
}
.control-group.yellow input:focus,
.control-group.yellow select:focus,
.control-group.yellow textarea:focus {
border-color: #c0c000;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f3f300;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f3f300;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f3f300;
.control-group.color3 input,
.control-group.color3 textarea {
color: #f15a60;
border-color: #f15a60;
}
.control-group.color3 input:focus,
.control-group.color3 textarea:focus {
border-color: #f15a60;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f15a60;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f15a60;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f15a60;
}
.control-group.color4 input,
.control-group.color4 textarea {
color: #cfcf1b;
border-color: #cfcf1b;
}
.control-group.color4 input:focus,
.control-group.color4 textarea:focus {
border-color: #cfcf1b;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #cfcf1b;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #cfcf1b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #cfcf1b;
}
.control-group.yellow .input-prepend .add-on,
.control-group.yellow .input-append .add-on {
color: #f3f300;
background-color: #ffff91;
border-color: #f3f300;
.control-group.color5 input,
.control-group.color5 textarea {
color: #ff7500;
border-color: #ff7500;
}
.control-group.color5 input:focus,
.control-group.color5 textarea:focus {
border-color: #ff7500;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ff7500;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ff7500;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ff7500;
}
.control-group.orange .control-label,
.control-group.orange .help-block,
.control-group.orange .help-inline {
color: #ffa54f;
.control-group.color6 input,
.control-group.color6 textarea {
color: #c09853;
border-color: #c09853;
}
.control-group.orange .checkbox,
.control-group.orange .radio,
.control-group.orange input,
.control-group.orange select,
.control-group.orange textarea {
color: #ffa54f;
.control-group.color6 input:focus,
.control-group.color6 textarea:focus {
border-color: #c09853;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c09853;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c09853;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c09853;
}
.control-group.orange input,
.control-group.orange select,
.control-group.orange textarea {
border-color: #ffa54f;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
.add-on {
margin-left: -7px !important;
}
.control-group.orange input:focus,
.control-group.orange select:focus,
.control-group.orange textarea:focus {
border-color: #b15700;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffa54f;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffa54f;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffa54f;
/* Venn conf pane css */
.bs-docs-example {
position: relative;
margin: 0 0 35px 0;
padding: 39px 19px 14px;
*padding-top: 19px;
background-color: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.control-group.orange .input-prepend .add-on,
.control-group.orange .input-append .add-on {
color: #ffa54f;
background-color: #ffe1c5;
border-color: #ffa54f;
/* Echo out a label for the example */
.bs-docs-example:after {
content: "Venn global configuration";
position: absolute;
top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: #f5f5f5;
border: 1px solid #ddd;
color: #9da0a4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
}
.colorpicker {
min-width:100px;
}
</style>
</head>
<body>
......@@ -619,13 +743,10 @@
<h1>Hello jvenn!</h1>
<div class="span5" style="min-width:470px;margin-left:0">
<p class="bodytext" style="margin-top:15px"> Paste up to <strong>six</strong> lists using one row per element, then click
the numbers in the <select id="venn-type" class="input-small" style="width:110px;margin-top:8px"><option value="classic">classic</option><option value="edwards">Edwards'</option></select> venn to see the results.
<br/>Find an element in list(s):
<input id="search-field" type="text" style="margin-top:8px" placeholder="enter an element name..."/>
<span id="search-status" class="label label-info" style="vertical-align: 16px; margin-left: -35px;"></span>
the numbers in the venn to see the results.
</p>
</div>
<div class="span5" style="margin:35px 0 0 60px">
<div class="span5" style="margin:-25px 0 0 60px">
<div style="position:absolute;width:510px;padding:0px 5px 0 5px;background-color:white;border:1px solid lightgrey;border-radius:5px;text-align:justify">
<span class="label label-info" style="position:absolute;top:-10px;left:-10px">How to cite</span>
<h6>Philippe Bardou, Jérôme Mariette, Frédéric Escudié, Christophe Djemiel and Christophe Klopp. jvenn: an interactive Venn diagram viewer.
......@@ -634,7 +755,7 @@
</div>
</div>
<p style="clear:both;padding-top:15px;text-align:right">
<p style="clear:both;text-align:right">
<button id="clear-all" class="btn">Clear all</button>
<button id="example" class="btn btn-primary">Load an example...</button>
</p>
......@@ -642,80 +763,166 @@
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span7">
<div class="span6">
<div class="row-fluid">
<div id="jvenn-container"></div>
</div>
<div class="row-fluid">
<div class="span12">
<div>
<p> Click on a venn diagram figure to display the linked elements: </p>
<textarea readonly id="names" style="width: 100%;" wrap="off" rows="10"></textarea>
<textarea readonly id="names" style="width: 87%;" wrap="off" rows="10"></textarea>
</div>
</div>
</div>
<div class="span5">
<div class="span6">
<div class="bs-docs-example">
<img src="img/bullet.png" style="vertical-align:initial;padding-top:10px">
Display mode:
<div class="btn-group" data-toggle="buttons-radio">
<button id="dm_classic" type="button" class="btn btn-mini active">Classic</button>
<button id="dm_edwards" type="button" class="btn btn-mini">Edwards'</button>
</div><br/>
<img src="img/bullet.png" style="vertical-align:initial;padding-top:10px">
Font family:
<div class="btn-group" data-toggle="buttons-radio">
<button id="ff_arial" type="button" class="btn btn-mini active">Arial</button>
<button id="ff_sserif" type="button" class="btn btn-mini">Sans-serif</button>
<button id="ff_serif" type="button" class="btn btn-mini">Serif</button>
<button id="ff_mono" type="button" class="btn btn-mini">Monospace</button>
</div><br/>
<img src="img/bullet.png" style="vertical-align:initial;padding-top:10px">
Font size:
<div class="btn-group" data-toggle="buttons-radio">
<button id="fs_8" type="button" class="btn btn-mini">8px</button>
<button id="fs_9" type="button" class="btn btn-mini">9px</button>
<button id="fs_10" type="button" class="btn btn-mini">10px</button>
<button id="fs_11" type="button" class="btn btn-mini">11px</button>
<button id="fs_12" type="button" class="btn btn-mini active">12px</button>
<button id="fs_13" type="button" class="btn btn-mini">13px</button>
<button id="fs_14" type="button" class="btn btn-mini">14px</button>
</div><br/>
<img src="img/bullet.png" style="vertical-align:initial;padding-top:10px">
Display some statistics based on input lists:
<div class="btn-group" data-toggle="buttons-radio">
<button id="ds_yes" type="button" class="btn btn-mini active">Yes</button>
<button id="ds_no" type="button" class="btn btn-mini">No</button>
</div><br/>
<img src="img/bullet.png" style="vertical-align:initial;padding-top:10px">
Substitute intersection count size by a question mark:
<div class="btn-group" data-toggle="buttons-radio">
<button id="qm_yes" type="button" class="btn btn-mini active">Yes</button>
<button id="qm_no" type="button" class="btn btn-mini">No</button>
</div>
<hr style="margin-bottom:12px;margin-left:50px;margin-right:50px"/>
<img src="img/bullet.png" style="vertical-align:initial;">
Find an element in list(s):
<input id="search-field" type="text" style="margin-top:8px" placeholder="enter an element name..."/>
<span id="search-status" class="label label-info" style="vertical-align: 16px; margin-left: -35px;"></span>
</div>
</div>
<div class="span6">
<div class="row-fluid">
<div class="span12">
<div class="control-group success">
<div class="span6">
<div class="control-group color1">
<input class="span6" id="name1" type="text" style="font-weight: bold;" value="List 1" maxlength="11"/>
<div class="controls controls-row">
<textarea class="span10" id="area1" wrap="off" rows="4"></textarea>
<a class="btn btn-link" id="clear_1" href="javascript:void(0)">clear</a>
<div id="colorp_1" class="input-append colorpicker-component colorpicker-element">
<input type="text" value="#006600" class="form-control" style="display:none"/>
<span class="add-on"><i></i></span>
</div>
<div class="btn-group" style="margin-left:15px">
<button id="colord_1" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-refresh"></i></button>
<button id="clear_1" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-trash"></i></button>
</div>
<div class="controls controls-row">
<textarea class="span11" id="area1" wrap="off" rows="4" style="resize:none"></textarea>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="control-group info">
</div>
<div class="span6" style="margin-left:10px;">
<div class="control-group color2">
<input class="span6" id="name2" type="text" style="font-weight: bold;" value="List 2" maxlength="11"/>
<div id="colorp_2" class="input-append colorpicker-component colorpicker-element">
<input type="text" value="#5a9bd4" class="form-control" style="display:none"/>
<span class="add-on"><i></i></span>
</div>
<div class="btn-group" style="margin-left:15px">
<button id="colord_2" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-refresh"></i></button>
<button id="clear_2" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-trash"></i></button>
</div>
<div class="controls controls-row">
<textarea class="span10" id="area2" wrap="off" rows="4"></textarea>
<a class="btn btn-link" id="clear_2" href="javascript:void(0)">clear</a>
<textarea class="span11" id="area2" wrap="off" rows="4" style="resize:none"></textarea>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="control-group error">
<div class="span6">
<div class="control-group color3">
<input class="span6" id="name3" type="text" style="font-weight: bold;" value="List 3" maxlength="11"/>
<div class="controls controls-row">
<textarea class="span10" id="area3" wrap="off" rows="4"></textarea>
<a class="btn btn-link" id="clear_3" href="javascript:void(0)">clear</a>
<div id="colorp_3" class="input-append colorpicker-component colorpicker-element">
<input type="text" value="#f15a60" class="form-control" style="display:none"/>
<span class="add-on"><i></i></span>
</div>
<div class="btn-group" style="margin-left:15px">
<button id="colord_3" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-refresh"></i></button>
<button id="clear_3" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-trash"></i></button>
</div>
<div class="controls controls-row">
<textarea class="span11" id="area3" wrap="off" rows="4" style="resize:none"></textarea>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="control-group yellow">
</div>
<div class="span6">
<div class="control-group color4">
<input class="span6" id="name4" type="text" style="font-weight: bold;" value="List 4" maxlength="11"/>
<div id="colorp_4" class="input-append colorpicker-component colorpicker-element">
<input type="text" value="#cfcf1b" class="form-control" style="display:none"/>
<span class="add-on"><i></i></span>
</div>
<div class="btn-group" style="margin-left:15px">
<button id="colord_4" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-refresh"></i></button>
<button id="clear_4" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-trash"></i></button>
</div>
<div class="controls controls-row">
<textarea class="span10" id="area4" wrap="off" rows="4"></textarea>
<a class="btn btn-link" id="clear_4" href="javascript:void(0)">clear</a>
<textarea class="span11" id="area4" wrap="off" rows="4" style="resize:none"></textarea>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="control-group orange">
<div class="span6">
<div class="control-group color5">
<input class="span6" id="name5" type="text" style="font-weight: bold;" value="List 5" maxlength="11"/>
<div class="controls controls-row">
<textarea class="span10" id="area5" wrap="off" rows="4"></textarea>
<a class="btn btn-link" id="clear_5" href="javascript:void(0)">clear</a>
<div id="colorp_5" class="input-append colorpicker-component colorpicker-element">
<input type="text" value="#ff7500" class="form-control" style="display:none"/>
<span class="add-on"><i></i></span>
</div>
<div class="btn-group" style="margin-left:15px">
<button id="colord_5" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-refresh"></i></button>
<button id="clear_5" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-trash"></i></button>
</div>
<div class="controls controls-row">
<textarea class="span11" id="area5" wrap="off" rows="4" style="resize:none"></textarea>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="control-group warning">
</div>
<div class="span6">
<div class="control-group color6">
<input class="span6" id="name6" type="text" style="font-weight: bold;" value="List 6" maxlength="11"/>
<div id="colorp_6" class="input-append colorpicker-component colorpicker-element">
<input type="text" value="#c09853" class="form-control" style="display:none"/>
<span class="add-on"><i></i></span>
</div>
<div class="btn-group" style="margin-left:15px">
<button id="colord_6" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-refresh"></i></button>
<button id="clear_6" style="margin-bottom:10px" class="btn btn-mini"><i class="icon-trash"></i></button>
</div>
<div class="controls controls-row">
<textarea class="span10" id="area6" wrap="off" rows="4"></textarea>
<a class="btn btn-link" id="clear_6" href="javascript:void(0)">clear</a>
<textarea class="span11" id="area6" wrap="off" rows="4" style="resize:none"></textarea>
</div>
</div>
</div>
......@@ -726,7 +933,7 @@
</div>
<hr>
<footer style="text-align: center;">
<p>Copyright &copy; 2014, INRA | Designed by <a href="http://bioinfo.genotoul.fr" target="_blank">GenoToul Bioinfo</a> and
<p>Copyright &copy; 2015, INRA | Designed by <a href="http://bioinfo.genotoul.fr" target="_blank">GenoToul Bioinfo</a> and
<a href="http://sigenae.org" target="_blank">Sigenae</a> teams.
</p>
</footer>
......
src/jvenn.js
View file @ 74ca8ad1
......@@ -76,11 +76,13 @@
searchMinSize:1,
// Colors must be RGB
// green , blue , red , yellow , orange , brown
colors: ["rgb(0,102,0)","rgb(90,155,212)","rgb(241,90,96)","rgb(250,220,91)","rgb(255,117,0)","rgb(192,152,83)"]
colors: ["rgb(0,102,0)","rgb(90,155,212)","rgb(241,90,96)","rgb(250,220,91)","rgb(255,117,0)","rgb(192,152,83)"],
fontSize: "12px",
fontFamily: "Arial"
};
var opts = $.extend(defaults, options),
__canvasWidth = 500,
__canvasHeight = 700,
__canvasHeight = 415,
__context = null;
function drawEllipse(x, y, r, w, h, a, fillcolor) {
......@@ -654,7 +656,7 @@
if(opts.shortNumber && div.text().length > space) {
div.html("<span title=" + div.text() + ">?</span>");
}
var l = left - ((div.text().length-1)/2 * 8);
var l = left - ((div.text().length-1)/2 * 4);
div.css("left", l).css("top", top);
}
......@@ -2021,7 +2023,7 @@
x = parseInt(x.replace("px", "")) + 5;
y = parseInt(y.replace("px", "")) + 14;
}
return '<text fill="'+color+'" fill-opacity="'+opacity+'" stroke="none" font-family="Helvetica,Arial,sans-serif" font-size="'+fsize+'"pt font-style="normal" font-weight="'+fweight+'" text-decoration="none" x="'+x+'"pt y="'+y+'"pt text-anchor="middle" dominant-baseline="alphabetic">'+text+'</text>';
return '<text fill="'+color+'" fill-opacity="'+opacity+'" stroke="none" font-family="'+ffamily+'" font-size="'+fsize+'"pt font-style="normal" font-weight="'+fweight+'" text-decoration="none" x="'+x+'"pt y="'+y+'"pt text-anchor="middle" dominant-baseline="alphabetic">'+text+'</text>';
}
function addExportModule(div, extraheight, type){
......@@ -2408,6 +2410,7 @@
var extraheight = 0;
if (opts.displayStat) {
extraheight = 280;
__canvasHeight += extraheight;
}
$t.css({"width": "500px", "height": ""+(450+extraheight)+"px"});
$('<style>.number-black{font-weight:bold;color:#000000;text-decoration:none;font-size:12px;}.number-over{font-weight:bold;cursor:pointer;color:#0000FF;text-decoration:underline;}.number-empty{font-weight:normal;font-size:12px;}</style>').appendTo('body');
......@@ -2502,8 +2505,12 @@
$("*[id^=resultC]").each(function(){
$(this).html(0);
$(this).addClass("number-empty");
$(this).css("font-size", opts.fontSize);