I want to create a map which looks like http://map.honeynet.org/
I am able to add the markers in the jvector maps and it looks like this.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>World Map</title>
<link rel="stylesheet" href="/home/aravi/heatmap/jvector/jvectormaps/jquery-jvectormap-1.2.2.css" type="text/css" media="screen"/>
<script src="/home/aravi/heatmap/jvector/jvectormaps/tests/assets/jquery-1.8.2.js"></script>
<script src="/home/aravi/heatmap/jvector/jvectormaps/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/home/aravi/heatmap/jvector/jvectormaps/jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
<div id="world-map-markers" style="width: 1200px; height: 600px; margin-left: 400px; margin-top: 38px;"> </div>
<script>
$(function(){
$('#world-map-markers').vectorMap({
map: 'world_mill_en',
scaleColors: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
hoverOpacity: 0.7,
hoverColor: false,
markerStyle: {
initial: {
fill: 'red',
r: '3',
stroke: '#383f47'
}
},
backgroundColor: '#383f47',
markers: [
{latLng: [41.90, 12.45], name: 'Vatican City'},
{latLng: [43.73, 7.41], name: 'Monaco'},
{latLng: [-0.52, 166.93], name: 'Nauru'},
{latLng: [-8.51, 179.21], name: 'Tuvalu'},
{latLng: [43.93, 12.46], name: 'San Marino'},
{latLng: [47.14, 9.52], name: 'Liechtenstein'},
{latLng: [7.11, 171.06], name: 'Marshall Islands'},
{latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis'},
{latLng: [3.2, 73.22], name: 'Maldives'},
{latLng: [35.88, 14.5], name: 'Malta'},
{latLng: [12.05, -61.75], name: 'Grenada'},
{latLng: [13.16, -61.23], name: 'Saint Vincent and the Grenadines'},
{latLng: [13.16, -59.55], name: 'Barbados'},
{latLng: [17.11, -61.85], name: 'Antigua and Barbuda'},
{latLng: [-4.61, 55.45], name: 'Seychelles'},
{latLng: [7.35, 134.46], name: 'Palau'},
{latLng: [42.5, 1.51], name: 'Andorra'},
{latLng: [14.01, -60.98], name: 'Saint Lucia'},
{latLng: [6.91, 158.18], name: 'Federated States of Micronesia'},
{latLng: [1.3, 103.8], name: 'Singapore'},
{latLng: [1.46, 173.03], name: 'Kiribati'},
{latLng: [-21.13, -175.2], name: 'Tonga'},
{latLng: [15.3, -61.38], name: 'Dominica'},
{latLng: [-20.2, 57.5], name: 'Mauritius'},
{latLng: [26.02, 50.55], name: 'Bahrain'},
{latLng: [0.33, 6.73], name: 'São Tomé and Príncipe'}
]
});
});
</script>
</body>
</html>
Could anyone help me in how to add the animation into the map.
Thanks in Advance.
Its almost 3 weeks and still no response. Luckily got this which explains the working of honeynet map. https://github.com/fw42/honeymap
After a lot of reading implemented the same in google maps. http://jsbin.com/ivedix/2/edit
Related
I'm new to echarts so please forgive me if this is stupid newbie request. I'm trying to rotate whole chart just like in this example of Vega Edge Bundling Example. On the right corner there is a tool and one option is also "rotate".
Example Image of Vega
I would like to do the same thing (rotate whole graph) in echarts but I can't find a way to do it. If it is possible to do it please let me know how I can do it. Thank you for any reply!
It's not perfect but I tried.
I use function to change startAngle,I don't know why the rotation is delayed.
var option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
startAngle: 15,
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
var myChart2 = echarts.init(document.getElementById('main2'));
myChart2.setOption(option);
function rotate() {
var Angle=document.getElementById("range").value;
myChart2.setOption({
series: [{
startAngle:Angle,
}]
});
};
<html lang="Zh-TW">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<label class="col-lg-3 control-label">rotate</label>
<div class="col-lg-6"><input type="range" class="form-control" min="0" max="360" value="10" oninput="rotate('range')" id="range"></div>
<div id="main2" style="width:100%;height:600px;"></div
</body>
</html>
i am trying to create a timeline using vis examples..so far i have managed to put the code as below..however if i really see the example on web, it shows me the item bars. when i try to run this example on my computer, the items are missing on the timeline. what am i doing wrong here?console shows me no errors.
code->> <!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Individual editable items</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
div.vis-editable,
div.vis-editable.vis-selected {
/* custom styling for editable items... */
}
div.vis-readonly,
div.vis-readonly.vis-selected {
/* custom styling for readonly items... */
background-color: #ff4500;
border-color: red;
color: white;
}
</style>
<script src="dist/vis.js" rel="script"></script>
<script src="dist/vis.min.js" rel="script"></script>
<link href="dist/vis.css" rel="stylesheet" type="text/css" />
<link href="dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<link href="dist/vis-timeline-graph2d.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Specify individual items to be editable or readonly.</p>
<div id="visualization"></div>
<script>
// create groups to highlight groupUpdate
var items = new vis.DataSet({
type: { start: "ISODate", end: "ISODate" },
});
// create a DataSet with items
var items = new vis.DataSet([
{id: 1, content: 'Editable', editable: true, start: '2010-08-23', group: 1},
{id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00', group: 2},
{id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00', group: 1},
{id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02', group: 2},
{id: 5, content: 'Edit Time Only', editable: { updateTime: true, updateGroup: false, remove: false }, start: '2010-08-28', group: 1},
{id: 6, content: 'Edit Group Only', editable: { updateTime: false, updateGroup: true, remove: false }, start: '2010-08-29', group: 2},
{id: 7, content: 'Remove Only', editable: { updateTime: false, updateGroup: false, remove: true }, start: '2010-08-31', end: '2010-09-03', group: 1},
{id: 8, content: 'Default', start: '2010-09-04T12:00:00', group: 2}
]);
var container = document.getElementById('visualization');
var options = {
editable: true , // default for all items
height: "300px",
};
var timeline = new vis.Timeline(container, items,options);
</script>
</body>
</html>
example from web->> https://github.com/almende/vis/blob/master/examples/timeline/editing/individualEditableItems.html
i would appreciate any help here
Here is my data set:
dataSource: [
{
title: "Test",
start: new Date("2015/6/13 6:00"),
end: new Date("2015/6/13 7:30"),
availableServices: [1]
}
],
resources: [
{
field: "availableServices",
title: "Available Services",
dataSource: [
{ value: 1, text: "On Demand", color: "#e6f1df" },
{ value: 2, text: "Patient Scheduled", color: "#f1e2ed" },
{ value: 3, text: "Admin Scheduled", color: "#fef1de" },
{ value: 4, text: "Unavailable/Blocked", color: "#c6c3c3" }
],
multiple: true
}
]
Here is my custom template:
<script id="block-template" type="text/x-kendo-template">
<div class="event-block #if(availableServices=='On Demand'){# on-demand #}else{# meep #}#" >
<p>
#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #
</p>
<span>
#: title #
</span>
<span>
#: availableServices #
</span>
</div>
</script>
And what it is outputting is this:
<div class="event-block meep ">
<p>
06:00 - 07:30
</p>
<span>
Test
</span>
<span>
[object Object]
</span>
</div>
So, the part where I'm trying to add a class in the containing div based on which "Available Service" field is selected, isn't working. It's just outputting the else option "meep" no matter what.
And the part where I'm trying to just list which "Available Service" fields are selected in the content area isn't working either -- it's just outputting "[object Object]"
Any help would be most appreciated!
This is how you do it, you need to change the conditional to be like this one, just like an array
#if(availableServices[0]==1){#on-demand#}else{#meep#}#
here is the template code :
<script id="block-template" type="text/x-kendo-template">
<div class="event-block #if(availableServices[0]==1){#on-demand#}else{#meep#}#">
<p>
#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #
</p>
<span>
title : #: title #,
</span>
<span>
available services : # for(var i=0, length = availableServices.length; i<length; i++){# #: availableServices[i]# #} #
</span>
</div>
JS code :
$("#scheduler").kendoScheduler({
date: new Date("2015/6/13"),
eventTemplate: $("#block-template").html(),
dataSource: [
{
title: "Test 1",
start: new Date("2015/6/13 6:00 AM"),
end: new Date("2015/6/13 7:30 AM"),
availableServices: [1,2]
},
{
title: "Test 2",
start: new Date("2015/6/13 7:00 AM"),
end: new Date("2015/6/13 8:30 AM"),
availableServices: [2,3,4]
}
],
resources: [
{
field: "availableServices",
title: "Available Services",
dataSource: [
{ value: 1, text: "On Demand", color: "#e6f1df" },
{ value: 2, text: "Patient Scheduled", color: "#f1e2ed" },
{ value: 3, text: "Admin Scheduled", color: "#fef1de" },
{ value: 4, text: "Unavailable/Blocked", color: "#c6c3c3" }
],
multiple: true
}
]
});
DEMO
I've been beating my head against the wall on this one for a while.
I've done a ton of google searches and I think that I've set it up correctly, but it doesn't work.
I have an enhancedGrid on top and a tabContainer on the bottom.
The idea is to click on an item on the top and show different related data on the bottom tabs.
The top grid is displayed correctly (I've removed all the plugins to save on space).
The two tabs on the bottom display correctly if I have regular text in the contentPanes, but when I embed a grid in the first tab, the other tabs are not shown.
Thank you in advance for your help!
Chris
Here is my sourcecode:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:spring="http://www.springframework.org/tags"
xmlns:util="urn:jsptagdir:/WEB-INF/tags/util"
version="2.0" style="margin-bottom:3px">
<jsp:output omit-xml-declaration="yes"/>
<style type="text/css">
<spring:message code="dojo_version" var="dj" />
#import "<spring:url value="/resources/${dj}/dijit/themes/claro/claro.css" />";
#import "<spring:url value="/resources/${dj}/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" />";
#import "<spring:url value="/resources/${dj}/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css" />";
#accountDiv {height:15em; width:100%;}
#contactDiv {height:100%; width:100%;}
</style>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Filter");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojox.layout.ContentPane");
dojo.ready(function() {
accountSetup();
contactSetup();
});
function accountSetup() {
var layout = [[
{ field: 'name', name: 'Name', width: '15%' },
{ field: 'description', name: 'Description', width: '14%' },
{ field: 'website', name: 'Website', width: '15%' },
{ field: 'numberEmployees', name: '# Emp', width: '5%' },
{ field: 'taxId', name: 'Tax ID #', width: '8%' },
{ field: 'taxExempt', name: 'Tax Exempt?', width: '8%' },
{ field: 'ourAccountNumber', name: 'Our Acct #', width: '8%' }
]];
var accountGrid = new dojox.grid.EnhancedGrid({
id: 'accountGrid',
selectionMode: "single",
structure: layout,
noDataMessage: "No accounts found"
}, document.createElement('div'));
dojo.xhrGet({
url: "${pageContext.request.contextPath}/accounts/allShallow",
headers: {"Accept": "application/json"},
handleAs: "json",
load: function(data) {
accountGrid.setStore(new dojo.data.ItemFileReadStore({data: {items : data}}));
},
error: function(error) {
console.log("loading of grid data failed. Exception...", error);
}
});
dojo.byId("accountDiv").appendChild(accountGrid.domNode);
accountGrid.startup();
};
function contactSetup() {
var layout = [[
{ field: 'name', name: 'Name', width: '15%' },
{ field: 'description', name: 'Description', width: '14%' },
{ field: 'website', name: 'Website', width: '15%' },
{ field: 'numberEmployees', name: '# Emp', width: '5%' },
{ field: 'taxId', name: 'Tax ID #', width: '8%' },
{ field: 'taxExempt', name: 'Tax Exempt?', width: '8%' },
{ field: 'ourAccountNumber', name: 'Our Acct #', width: '8%' }
]];
var contactGrid = new dojox.grid.EnhancedGrid({
id: 'contactGrid',
selectionMode: "single",
structure: layout,
noDataMessage: "No accounts found"
}, document.createElement('div'));
dojo.xhrGet({
url: "${pageContext.request.contextPath}/accounts/allShallow",
headers: {"Accept": "application/json"},
handleAs: "json",
load: function(data) {
contactGrid.setStore(new dojo.data.ItemFileReadStore({data: {items : data}}));
},
error: function(error) {
console.log("loading of grid data failed. Exception...", error);
}
});
dojo.byId("contactDiv").appendChild(contactGrid.domNode);
contactGrid.startup();
};
</script>
<div>
<util:panel title="Accounts" id="accountPanel">
<div id="accountDiv" />
</util:panel>
</div>
<div style="height:346px; width:100%">
<div data-dojo-type="dijit.layout.TabContainer" style="height: 100%">
<div data-dojo-type="dojox.layout.ContentPane" title="Contacts" selected="true">
<div id="contactDiv" />
</div>
<div data-dojo-type="dojox.layout.ContentPane" title="Projects">
123
</div>
</div>
</div>
</div>
How about directly targeting the desired <div> instead of creating a new one?
Eg.
var contactGrid = new dojox.grid.EnhancedGrid({
id: 'contactGrid',
selectionMode: "single",
structure: layout,
noDataMessage: "No accounts found"
}, "contactDiv");
Have you tried to use placeAt instead of appendChild
yourGrid.placeAt(dijit.byId("yourContainerId").containerNode, 'last');
yourGrid.startup();
You can just add css class to the grid,
<style type="text/css">
#accountDiv dojoxGridMasterHeader {height:15em; width:100%;}
#contactDiv dojoxGridMasterHeader {height:100%; width:100%;}
</style>
and now import the following when you want the grid to display your tabs to be displayed
dojo.addClass('accountDiv ', 'accountDiv dojoxGridMasterHeader');
here dojoxGridMasterHeader is for exaple as i wanted my header to be showen, you can use developers tool or firebug to get the exact tabs css and display it.
I so rarely ever get pulled into dojo related work that I don't know it as well as I should (I mostly do perl work).
Anyway, the short question is that I have a dojo.form.ComboBox where some of the values need to have a small icon placed next to them (they are special variables) when you dropdown. I"m not sure in dojo.form.ComboBox if this is even possible.
Am I even using the right control? (For the record I am generating my pages with Template::Toolkit and my app is in dojo's framework).
I need to keep the ComboBox functionality of being able to add values if they don't already exist. Even if I can't use an icon, some way of highlighting the line would be fine too or changing the color of the box if a certain value is selected would work.
Any clues would be appreciated.
Janie
Consider using a dijit.form.DropDownButton. The link contains examples with code on how to add icons to the values.
Notice that the DropDownButton uses dijit.MenuItem's as elements, as such your goal is to set the icons you want on these menu items. Dojo has several icon classes ready for use, but if you want to use your own custom icons, take a look at this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script>
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.ComboBox");
var storeData = {
identifier: 'abbr',
label: 'name',
items: [{
abbr: 'ec',
name: 'Ecuador',
capital: 'Quito',
label:"<img width='16px' height='16px' src='images/one.jpg'/>Ecuador"
},
{
abbr: 'eg',
name: 'Egypt',
capital: 'Cairo',
label:"<img width='16px' height='16px' src='images/two.jpg'/>Egypt"
},
{
abbr: 'sv',
name: 'El Salvador',
capital: 'San Salvador',
label:"<img width='16px' height='16px' src='images/three.jpg'/>El Salvador"
},
{
abbr: 'gq',
name: 'Equatorial Guinea',
capital: 'Malabo',
label:"<img width='16px' height='16px' src='images/four.jpg'/>Equatorial Guinea"
},
{
abbr: 'er',
name: 'Eritrea',
capital: 'Asmara',
label:"<img width='16px' height='16px' src='images/five.jpg'/>Eritrea"
},
{
abbr: 'ee',
name: 'Estonia',
capital: 'Tallinn',
label:"<img width='16px' height='16px' src='images/six.jpg'/>Estonia"
},
{
abbr: 'et',
name: 'Ethiopia',
capital: 'Addis Ababa',
label:"<img width='16px' height='16px' src='images/seven.jpg'/>Ethiopia"
}]
}
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<div dojoType="dojo.data.ItemFileReadStore" data="storeData" jsId="countryStore">
</div>
<div dojoType="dijit.form.ComboBox" store="countryStore" labelAttr="label" labelType="html">
</div>
</body>
For archival purposes should someone else have this problem, just cut and paste the above to see this in action. You will have to find your own images for the icons of course but this works. Janie
Set the values of the parameters:
searchAttr='name', labelAttr='label', labelType='html'.
searchAttr - the value of the parameter that is displayed when it is selected.
labelAttr - here place html. The value of this parameter is displayed in the dropdown menu.
e.g.
require(["dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"], function(Memory, ComboBox){
var iconsStore = new Memory({
data: [
{id: 'stack-overflow', name: 'stack-overflow', label: '<i class="fa fa-stack-overflow"/>'},
{id: 'user', name: 'user', label: '<i class="fa fa-user"/>'},
{id: 'group', name: 'group', label: '<i class="fa fa-groupr"/>'}
]
});
var cb_icons = new ComboBox({
id: "iconSelect",
name: "isons",
value: "stack-overflow",
store: iconsStore,
searchAttr: "name",
labelAttr: "label",
labelType: "html"
}, "stateSelect").startup();
});