How to clone an SVG Map Using xpath - javascript

I need to copy the svg map come from other website.
Here is the website for example where i'm going to copy the svg map:
https://www.alexa.com/siteinfo/google.com
Here is the xpath location from the website:
//*[#id="visitsMap"]
What I need?
I'd like to copy the result/post of that xpath into my page.
Something like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("svg").clone().appendTo("body");
});
$svgTemplate = new SimpleXMLElement($svg_data);
$svgTemplate->registerXPathNamespace('svg', 'https://www.alexa.com/siteinfo/google.com');
$style = $svgTemplate->xpath('//*[#id="visitsMap"]');
printf("Original style:\n%s\n\n", (string)$style[0]);
});
</script>
</head>
<body>
<svg></svg>
</body>
Thanks

uSING AMCHARTS..
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<!-- Chart code -->
<script>
var map = AmCharts.makeChart( "chartdiv", {
"type": "map",
"theme": "light",
"projection": "mercator",
"dataProvider": {
"map": "worldLow",
"areas": [
{ "id": "US" } //BY CHANGING THIS<--
]
},
"areasSettings": {
"autoZoom": true,
"selectedColor": "#CC0000"
},
} );
</script>
<!-- HTML -->
<div id="chartdiv"></div>
To View a Demo: http://webbatlas.com/google.com

Related

How to set the chart pie color in correct orders?

I am working on chart pie to input the data and I want to make the correct order for the chart pie color, I want to make the green pie to go on the left and the blue pie to go on the right.
var showalert = 'opened';
var opened_today = 2;
var clicked_today = 1;
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'pie',
legend:{
position: 'right'
},
data: {
labels: ["Opened", "Clicked"],
datasets: [{
data: [
opened_today,
clicked_today
],
backgroundColor: [
"#28a745",
"#007bff"
],
}],
},
});
.chartjs-render-monitor {
animation: chartjs-render-animation 1ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment-with-locales.min.js" integrity="sha256-2upzq+m3oG9Q4Xye6pGvLrXgrzOKtTgR1D2GCLUzL2o=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/chart.js/Chart.min.js"></script>
<!-- Custom fonts for this template-->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="https://startbootstrap.github.io/startbootstrap-sb-admin-2/css/sb-admin-2.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Card Body -->
<div class="card-body" style="height: 401px;">
<div class="chart-pie pt-4 pb-2">
<canvas id="myPieChart" width="272" height="245" class="chartjs-render-monitor" style="display: block; width: 272px; height: 245px; text-align: right;"></canvas>
</div>
</div>
Here is what my chart pie show:
When I try this:
var myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Opened", "Clicked"],
datasets: [{
data: [
clicked_today,
opened_today
],
backgroundColor: [
"#007bff",
"#28a745"
],
}],
},
});
I am getting this:
Here is what I want to achieve:
Can you please show me an example how I can make the green pie to go on the left and the blue pie to go on the right?
Thank you.
Ok, you have to choose your data/color following clockwise, first clicked/blue then opened/green.
All settings for legend have to be inside key options
For legend, reverse does the job
var showalert = 'opened';
var opened_today = 2;
var clicked_today = 1;
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'pie',
options: {
legend: {
reverse:true,
position: 'top',
labels: {
fontColor: 'gray'
}
}
},
data: {
labels: ["Clicked","Opened"],
datasets: [{
data: [
clicked_today,
opened_today,
],
backgroundColor: [
"#007bff", //blue
"#28a745", //green,
],
}],
},
});
.chartjs-render-monitor {
animation: chartjs-render-animation 1ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment-with-locales.min.js" integrity="sha256-2upzq+m3oG9Q4Xye6pGvLrXgrzOKtTgR1D2GCLUzL2o=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/chart.js/Chart.min.js"></script>
<!-- Custom fonts for this template-->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="https://startbootstrap.github.io/startbootstrap-sb-admin-2/css/sb-admin-2.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Card Body -->
<div class="card-body" style="height: 401px;">
<div class="chart-pie pt-4 pb-2">
<canvas id="myPieChart" width="272" height="245" class="chartjs-render-monitor" style="display: block; width: 272px; height: 245px; text-align: right;"></canvas>
</div>
</div>

How to retrieve image src attribute dynamically and add it in html in a loop using JQuery or Javascript

I have a object of array and i am storing image path in one of the index and i need to retrieve it and add it in img tag based on the location.
I am running a loop on the array to get the data and then in the click event i am creating dynamic html and adding the data accordingly, I able to retrieve the image path, but i am not able to add it.
Please guide, any help would be appreciated.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<title>Xylem</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta name="author" content="Samuel Norton">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js">
</script>
<script src="http://code.jquery.com/color/jquery.color-
2.1.0.min.js">
</script>
<script src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyA7whsF1OtjP38MWuQKXVjh1QncWGQh2L0&callback=initMap" async
defer></script>
<style>
/* Always set the map height explicitly to define the size of
the
div
* element that contains the map. */
#location-page{
/*border: 1px solid #426D8F;*/
}
#map {
/*margin-top: 2.5%;*/
top: 5%;
margin-left: 16%;
height: 90%;
width: 68%;
}
</style>
<script>
var map;
function initMap() {
var uluru = {lat: 83.5, lng: 9};
map = new google.maps.Map(document.getElementById('map'), {
center: uluru,
zoom: 2,
minZoom: 1
});
var geojsonFeature = {
"markers": [{
"latitude": 18.562158,
"longitude": 73.784005,
"title": "abc",
"address": "xyz",
"image1": "img5.jpg",
"image2": "C:/Users/pranand/Desktop/img1.jpg",
}, {
"latitude": 22.434966,
"longitude": 73.231136,
"title": "abc",
"address": "xyz",
"image1": "img3.jpg",
"image2": "img4.jpg",
},
{
"latitude": 19.259763,
"longitude": 72.970113,
"title": "abc",
"address": "xyz",
"image1": "img1.jpg",
"image2": "C:/Users/pranand/Desktop/img2.jpg",
}]
};
var infowindow = new google.maps.InfoWindow();
var marker;
var i;
for(i=0;i<geojsonFeature.markers.length;i++){
marker= new google.maps.Marker({
position: new
google.maps.LatLng(geojsonFeature.markers[i].latitude,
geojsonFeature.markers[i].longitude),
map: map,
title: geojsonFeature.markers[i].title
});
google.maps.event.addListener(marker, 'click',
(function(marker, i) {
var img1 = $('<img id="img1"/>');
img1.attr('src',geojsonFeature.markers[i].image1);
console.log(img1);
img1.appendTo('.imageDiv');
//img1Src= geojsonFeature.markers[i].image1;
// console.log(img1Src);
//$("#img1").attr('src',img1Src);
return function() {
infowindow.setContent('<p style = "font-
weight:bold;font-size:18px;margin-left:12%;margin-
bottom:10px">'+geojsonFeature.markers[i].title+'</p>'+
'<div style="margin-bottom:20px">'+
geojsonFeature.markers[i].address + '</div>'+
'<div class = "imageDiv" style = "margin-left:
9.5%;">'+
img1+
'</div>');
infowindow.open(map, marker);
}
})(marker, i));
}
}
</script>
<script src="js/script.js"></script>
<meta name="robots" content="noindex,follow" />
</head>
<body>
<div class="container-fluid">
<div id="main-page">
<div class="maincontent">
<h1>Xylem</h1>
<div class="row">
<div class="col-md-6">
<a class="location pull-right">
←Locations</a>
</div>
<div class="col-md-6">
<a class="product col-md-6">Products →</a>
</div>
</div>
</div>
</div>
<div id="location-page">
<!--img src="images/worldMap.jpg" />-->
<div id="map"></div>
</div>
</div>
<div id="product-page">
<div class="nextcontent">
<h1>Great! You're in the Product Page!</h1>
<a class="nextlinkProcuct"> &#8592 GO BACK</a>
</div>
</div>
</div>
</body>
</html>
<div id="main-page">
<!--- Main Content Here -->
</div>
Instead of using a jquery object you can use a simple string like so :
var img1 = '<img id="img1" ';
img1+= 'src="'+=geojsonFeature.markers[i].image1+'"'
img1+=' />';
And append it to the content like you are doing
return function() {
infowindow.setContent(''+geojsonFeature.markers[i].title+''+
''+
geojsonFeature.markers[i].address + ''+
'
9.5%;">'+
img1+
'');
Instead of
img1.attr('src',geojsonFeature.markers[i].image1);
try
$('#img1').attr('src',geojsonFeature.markers[i].image1);

How to make amchart's ammap for district level?

I am trying to make ammap for district level. First, one has to select state and then district. Upto state, it is fine. But, how to achieve the district level map?
I have svg for the district in india. I tried but couldn't make it.
SVG here
JSFIDDLE:
var map = AmCharts.makeChart( "chartdiv", {
"type": "map",
"theme": "light",
"projection": "miller",
"dataProvider": {
"map": "indiaLow",
"getAreasFromMap": true
},
"areasSettings": {
"autoZoom": true,
"selectedColor": "#CC0000"
},
"smallMap": {},
"export": {
"enabled": false,
"position": "bottom-right"
}
} );
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/indiaLow.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>

working with multiple javascripts

I have a project with some javascripts. One image viewer, a carrousel, some toggle and now I need to make a pop-up form.
But when I insert the javascript for pop-up... is stop working.
How can I make all work? or any hint to help me create a pop-up form (instead of this I use now).
Thanks in advance
this is the script in header
<script src="js/jquery-2.0.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/fancybox/jquery.fancybox.css">
<link rel="stylesheet" href="css/bootstrap-lightbox.min.css">
<link rel="stylesheet" href="css/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="css/owl-carousel/owl.theme.css">
<script type="text/javascript">
$( document ).ready(function() {
$(".toggleControl").click(function(){
$(this).siblings(".toggleDiv").slideToggle(1000);
$(this).children().children( ".collapse-expand" ).toggleClass( "collapse-ico" );
$(this).children().children( ".collapse-expand" ).toggleClass( "expand-ico" );
});
}); //document.ready end
</script>
<script src="js/popjs.js"></script>
<link rel="stylesheet" href="popupwindow.css">
<script src="popupwindow.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#newsletter').click(function (e) {
e.preventDefault();
$('#modal-content').popUpWindow({
action: "open", // open or close
modal: true, // modal mode
size: "large", // large, medium or large
buttons: [{
text: "x",
click: function () {
this.close();
}
}]
});
});
});
</script>
this is the script in footer
<script src="js/jquery-2.0.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.fancybox.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>
<script src="js/okzoom.js"></script>
<script src="js/owl.carousel.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("#owl-example").owlCarousel({
items : 4
})
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#pro-img-carousel').carousel({
interval: 10000
})
$('#carousel-pro-img').carousel ({
interval:8000
})
});
</script>
<script type="text/javascript">
$(function(){
$('.example').okzoom({
width: 100,
height: 100,
border: "1px solid black",
shadow: "0 0 5px #000"
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
});
</script>
<script>
$(document).ready(function() {
function random(owlSelector){
owlSelector.children().sort(function(){
return Math.round(Math.random()) - 0.5;
}).each(function(){
$(this).appendTo(owlSelector);
});
}
$("#owl-demo").owlCarousel({
navigation: true,
navigationText: [
"<img src='images/left.png' alt='' class=''>",
"<img src='images/right.png' alt='' class=''>"
],
beforeInit : function(elem){
random(elem);
}
});
});
</script>
At first, you included jquery 3 times, bootstrap 2 times.
One time will be enought.
Since you are using Bootstrap, will be good to use this http://getbootstrap.com/javascript/#modals

Trying to Implement a chart using JChartFX and JQUERY

When I use the following code nothing shows up on my screen. Not sure if I'm missing something or using the wrong version of JQUERY. I'm using the latest version of JChartFX and I am trying to conficure the 3d Chart
<!DOCTYPE HTML>
<html lang="en-US"> <!--<![endif]-->
<head>
<title>Graph Example </title>
<style type="text/css">
#targetchart
{
width: 500px;
height: 375px;
padding: 4px;
border: 1px solid #dddddd;
background: #eeeeee
}
#targetchart h3 {
text-align: center;
margin: 0;
}
</style>
<link href="jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/confirm.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jchartfx.advanced.js"></script>
<script type="text/javascript" src="js/jchartfx.system.js"></script>
<script type="text/javascript" src="js/jchartfx.coreVector.js"></script>
<script type="text/javascript" src="js/jchartfx.coreVector3d.js"></script>
<script type="text/javascript">
var chart1;$(document).ready(function ($) {
var items = [
{ "Sales": 2200, "Month": "Jan" },
{ "Sales": 1500, "Month": "Feb" },
{ "Sales": 2100, "Month": "Mar" },
{ "Sales": 2600, "Month": "Apr" },
{ "Sales": 3200, "Month": "May" },
{ "Sales": 3600, "Month": "Jun" },
];
$("div", "ChartDiv1").chart({
gallery: cfx.Gallery.Bar,
view3D: {
enabled: true,
rotated: true,
angleX: 30,
angleY: -20,
boxThickness: 10,
depth: 160,
shadow: cfx.Shadow.fixed
},
dataValues:items,
titles: [{
text: "Configuring 3D Charts"
}]
});
});
</script>
</head>
<body>
<div id="ChartDiv1" style="width:500px;height:375px;display:inline-block"></div>
</body>
</html>
I've also tried this one and it won't work. It seems that jchartfx doesn't work on later versions of jQuery ver. 1.9.1.
These are used instead (in the samples):
<script type="text/javascript" src="http://www.jchartfx.com/libs/jQuery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/jQuery/jquery-ui-1.8.18.custom.min.js"></script>
Source: http://community.jchartfx.com/forums/p/113/281.aspx

Categories

Resources