jqwidgets-framework
Version:
jQWidgets is an advanced jQuery, Angular, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
94 lines (91 loc) • 4.26 kB
HTML
<html lang="en">
<head>
<title id='Description'>TagCloud font settings</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtagcloud.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script>
$(document).ready(function () {
var unemploymentRate = [
{ "country": "Namibia", "rate": 37.6 },
{ "country": "Macedonia, FYR", "rate": 32.0 },
{ "country": "Latvia", "rate": 18.7 },
{ "country": "Lithuania", "rate": 17.8 },
{ "country": "Estonia", "rate": 16.9 },
{ "country": "Serbia", "rate": 16.6 },
{ "country": "Georgia", "rate": 16.5 },
{ "country": "Yemen, Rep.", "rate": 14.6 },
{ "country": "Slovak Republic", "rate": 14.4 },
{ "country": "Dominican Republic", "rate": 14.2 },
{ "country": "Tunisia", "rate": 14.2 },
{ "country": "Armenia", "rate": 28.6 },
{ "country": "Bosnia and Herzegovina", "rate": 27.2 },
{ "country": "Lesotho", "rate": 25.3 },
{ "country": "South Africa", "rate": 24.7 },
{ "country": "Spain", "rate": 20.1 },
{ "country": "Albania", "rate": 13.8 },
{ "country": "Ireland", "rate": 13.6 },
{ "country": "Jordan", "rate": 12.9 },
{ "country": "Greece", "rate": 12.5 }
];
var source =
{
datatype: "array",
localdata: unemploymentRate,
datafields: [
{ name: 'country' },
{ name: 'rate' }
]
};
var dataAdapter = new $.jqx.dataAdapter(source, {});
$('#tagCloud').jqxTagCloud({
width: '600px',
source: dataAdapter,
fontSizeUnit: 'px',
minFontSize: 12,
maxFontSize: 20,
displayMember: 'country',
valueMember: 'rate',
urlBase: 'http://localhost/',
minColor: '#00AA99',
maxColor: '#FF0000'
});
$("#minFontSize").jqxInput({ placeHolder: "MinFontSize", height: 25, width: 200 });
$("#minFontSize").jqxInput('val', 12);
$("#maxFontSize").jqxInput({ placeHolder: "MaxFontSize", height: 25, width: 200 });
$("#maxFontSize").jqxInput('val', 20);
$("#fontSizeUnit").jqxInput({
placeHolder: "em/px/%",
height: 25,
width: 200,
minLength: 1,
source: ['em', 'px', '%']
});
$("#fontSizeUnit").jqxInput('val', 'px');
$('#setFontSize').jqxButton();
$('#setFontSize').click(function () {
$('#tagCloud').jqxTagCloud({
minFontSize: $("#minFontSize").jqxInput('val'),
maxFontSize: $("#maxFontSize").jqxInput('val'),
fontSizeUnit: $("#fontSizeUnit").jqxInput('val')
});
})
});
</script>
</head>
<body>
<div id="tagCloud"></div>
minFontSize:<input id='minFontSize' />
maxFontSize:<input id='maxFontSize' />
fontSizeUnit:<input id='fontSizeUnit' />
<button id='setFontSize'>Set Font</button>
</body>
</html>