jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
110 lines (89 loc) • 4.78 kB
HTML
<html ng-app="demoApp" lang="en">
<head>
<title id='Description'>AngularJS Chart Drawing APIs Example</title>
<meta name="description" content="This is an example of AngularJS Chart. Chart's Drawing API is demonstrated." />
<link rel="stylesheet" type="text/css" href="../../../jqwidgets/styles/jqx.base.css" />
<script type="text/javascript" src="../../../scripts/angular.min.js"></script> <script type="text/javascript" src="../../../scripts/jquery-1.11.1.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/jqxdraw.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxchart.core.js"></script><script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>
<script type="text/javascript">
var demoApp = angular.module("demoApp", ["jqwidgets"]);
demoApp.controller("demoController", function ($scope) {
function transformPath(path, wScale, hScale, xOffset, yOffset) {
var output = '';
for (var i = 0; i < path.length; i++) {
if (path[i] == 'C' || path[i] == 'M' || path[i] == 'L') {
output += path[i];
i++;
var j = i;
while (j + 1 < path.length && !(path[j + 1] == 'C' || path[j + 1] == 'M' || path[j + 1] == 'L' || path[j + 1] == 'z'))
j++;
var value = path.substring(i, j);
var pointsString = value.split(' ');
for (var s = 0; s < pointsString.length; s++) {
if (pointsString[s].length == 0)
continue;
var pointString = pointsString[s].split(',');
var point = { x: pointString[0], y: pointString[1] };
point.x = point.x * wScale + xOffset;
point.y = point.y * hScale + yOffset;
output += ' ' + point.x + "," + point.y + ' ';
}
i = j - 1;
}
else {
output += path[i];
}
}
return output;
}
var adapterSettings =
{
datatype: "json",
datafields: [
{ name: 'id' },
{ name: 'path' },
{ name: 'europe' },
{ name: 'eu' }
],
/* EU map definitions in JSON derived from http://commons.wikimedia.org/wiki/File:116_000_map_of_Europe.svg */
url: '../../sampledata/europe.txt'
};
var dataAdapter = new $.jqx.dataAdapter(adapterSettings, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
var chartSettings = {
title: "Map of the European Union",
description: "",
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter
};
// function draw before the title and other chart elements
chartSettings.drawBefore = function (renderer, rect) {
renderer.rect(rect.x, rect.y, rect.width, rect.height, { fill: 'lightblue' });
}
// custom drawing function after
chartSettings.draw = function (renderer, rect) {
var records = this.source.records;
var wScale = rect.width / 13000
var hScale = (rect.height) / 8500;
for (var i = 0; i < records.length; i++) {
var path = transformPath(records[i].path, wScale, hScale, 62, 22);
var pathElement = renderer.path(path, { stroke: 'black' });
if (records[i].eu == "true") {
renderer.attr(pathElement, { fill: 'blue' });
}
else
renderer.attr(pathElement, { fill: '#DEDEDE' });
}
}
$scope.chartSettings = chartSettings;
});
</script>
</head>
<body ng-controller="demoController">
<jqx-chart jqx-settings="chartSettings" style="width: 850px; height: 500px"></jqx-chart>
</body>
</html>