Develop Reference

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 keep data when changing styles in Mapbox

I have a map of geojson facility points located in Alaska. I want to allow the user to switch between a regular and satellite view. Upon clicking satellite, the loaded geojson data disappears.
I have tried reinstatiating the code, but I realize I do not know how to do that properly. Otherwise, im not sure what the solution is.
I have a working plunker here
https://plnkr.co/edit/FyrsbMRJp6vuI3jRt8XL?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<meta charset='utf-8' />
<title>BR Live Cluster Map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet' />
<script src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
#menu {
position: absolute;
background: #fff;
padding: 10px;
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.css' type='text/css' />
<div id='map'></div>
<div id='menu'>
<input id='streets-v11' type='radio' name='rtoggle' value='streets' checked='checked'>
<label for='streets'>streets</label>
<input id='satellite-v9' type='radio' name='rtoggle' value='satellite'>
<label for='satellite'>satellite</label>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZHlhdnJvbSIsImEiOiJjamZsZGl0dnIwMHUwMnhvNDB4N2o0cnB6In0.AqxOgFJXuLgFMiwkPutaLA';
if (!mapboxgl.supported()) {
alert('Your browser does not support Mapbox GL');
} else {
var map = new mapboxgl.Map({
container: 'map',
//style: 'mapbox://styles/dyavrom/cji1rn1tz00x02sqtervd1sq0',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-153.59179687498357, 65.66995747013945],
zoom: 3.5
});
}
var layerList = document.getElementById('menu');
var inputs = layerList.getElementsByTagName('input');
function switchLayer(layer) {
var layerId = layer.target.id;
map.setStyle('mapbox://styles/mapbox/' + layerId);
}
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
map.on('load', function() {
// Add a new source from our GeoJSON data and set the
// 'cluster' option to true. GL-JS will add the point_count property to your source data.
map.addSource("BRdata", {
type: "geojson",
// Point to GeoJSON data. This example visualizes all M1.0+ BRdata
// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
data: "data.geojson",
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});
map.addLayer({
id: "clusters",
type: "circle",
source: "BRdata",
filter: ["has", "point_count"],
paint: {
// Use step expressions (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
// with three steps to implement three types of circles:
// * Blue, 20px circles when point count is less than 100
// * Yellow, 30px circles when point count is between 100 and 750
// * Pink, 40px circles when point count is greater than or equal to 750
"circle-color": [
"step",
["get", "point_count"],
"#51bbd6",
100,
"#f1f075",
2000,
"#f28cb1"
],
"circle-radius": [
"step",
["get", "point_count"],
20,
100,
30,
750,
40
]
}
});
map.addLayer({
id: "cluster-count",
type: "symbol",
source: "BRdata",
filter: ["has", "point_count"],
layout: {
"text-field": "{point_count_abbreviated}",
"text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
"text-size": 12
}
});
map.addLayer({
id: "unclustered-point",
type: "circle",
source: "BRdata",
filter: ["!", ["has", "point_count"]],
paint: {
"circle-color": "#11b4da",
"circle-radius": 4,
"circle-stroke-width": 1,
"circle-stroke-color": "#fff"
}
});
</script>
</body>
</html>
Hoping that when you click satellite, the new view enters as well as the geojson.

How to clone an SVG Map Using xpath

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

combining two functionality into one for kendo grid

I have kendo grid separately in a fiddle,
I have delete function seprately in a fiddle
when I select ThreeDots in each row in the grid it should show delete in small popup and when you click delete confirmation popup should open up.
after I click yes it should delete that particular row and when I slect no it should not
delete.
trying to display my confirmation box for delete in jquery way..providing that code below
can you guys tell me how to combine my code.
providing code and fiddle below
http://jsfiddle.net/cjyh8Lyc/4/
https://jsfiddle.net/9qpLukrL/
<div class="sports">
<div class="kendopobUpBox kendoWindow kPopupConfirmationBox">
<div class="row kendoPopUpGridCollection kendoPopUpContent lineHeightInputs">
<div class="kendoContent">Are you sure you want to upload file</div>
</div><div class="clearFloat"></div>
<div class="row kendoPopUpFooter textAligncenterImp">
<button class="commonBtn" type="button" id ="playerDocumentOk" (click)="uploadFile($event,document.value)">OK</button>
<button class="clearBtn" type="button" id ="playerDocumentCancel" (click)="cancel()">Cancel</button>
</div><div class="clearFloat"></div>
</div>
</div>
$('.sports').show();
$('.sports').hide();
#runningDocumentsPopup .sports {
position: relative;
}
.sports .kPopupConfirmationBox {
display: block;
z-index: 3;
left: calc(50% - 175px);
width: 350px;
position: absolute;
}
.sports {
display: none;
}

Not sure what is the purpose of your having delete function in the separate since kendo has built in function that can remove the row.You can attach a javascript function to delete(your code in a separate file for.
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="grid"></div>
<script>
var data = [
{ Id: 1, Name: "Decision 1", Position: 1 },
{ Id: 2, Name: "Decision 2", Position: 2 },
{ Id: 3, Name: "Decision 3", Position: 3 }
];
var dataSource = new kendo.data.DataSource({
//data: data,
transport: {
read: function(e) {
e.success(data);
},
update: function(e) {
e.success();
},
create: function(e) {
var item = e.data;
item.Id = data.length + 1;
e.success(item);
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
Name: { type: "string" },
Position: { type: "number" }
}
}
}
});
var grid= $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
editable : true,
navigatable: true,
toolbar: ["save","cancel", "create"],
columns: ["Id", "Name", "Position",{template:"<a class='mybutton'><span class=''></span>ThreeDots</a>"}]
}).data("kendoGrid");
grid.element.on('click','.mybutton',function(){
//var dataItem = grid.dataItem($(this).closest('tr'));
//alert(dataItem.Name + ' was clicked');
//built in kendo function to remove row
grid.removeRow($(this));
})
</script>
</body>
</html>
Jsbin Demo demo with delete confirmation

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