I am trying to generate a responsive dojocharts for mobile and tablets.
Here I had already trying though media queries through CSS. but its not working properly.
So anyone please suggest me how can I make my dojo chart responsive.
Below is my example for dojo responsive chart.but not working.
<script>
require(["dojox/charting/Chart",
"dojox/charting/plot2d/Pie",
"dojox/charting/action2d/Highlight",
"dojox/charting/action2d/MoveSlice",
"dojo/fx/easing",
"dojox/charting/action2d/Tooltip",
"dojox/charting/themes/MiamiNice",
"dojox/charting/widget/Legend",
"dojo/ready"
],
function(Chart, Pie, Highlight, MoveSlice, easing, Tooltip, MiamiNice, Legend, ready) {
ready(function() {
var chartTwo = new Chart("chartTwo");
chartTwo.setTheme(MiamiNice)
.addPlot("default", {
type: Pie,
font: "normal normal 11pt Tahoma",
fontColor: "black",
animate: {
duration: 1000,
easing: easing.cubicIn
},
labelOffset: -30,
radius: 150
}).addSeries("Series A", [{
"y": 101,
67,
"text": "INDIA",
"tooltip": "INDIA"
}, {
"y": 339.86,
"text": "USA",
"tooltip": "USA"
}, {
"y": 329.73,
"text": "UK",
"tooltip": "UK"
}, {
"y": 953.96,
"text": "UAE",
"tooltip": "UAE"
}]);
var anim_a = new MoveSlice(chartTwo, "default");
var anim_b = new Highlight(chartTwo, "default");
var anim_c = new Tooltip(chartTwo, "default");
chartTwo.render();
var legendTwo = new Legend({
chart: chartTwo
}, "legendTwo");
});
});
</script>
<body class="claro">
<div id="chartTwo" style="width: 600px; height: 350px;"></div>
<div id="legendTwo"></div>
So kindly request to everbody and also dojo community please suggest for this question for responsive dojocharts.
Related
Google Calendar Docs suggest that there is an way to enter 3P links. But, I failed after multiple attempts. Is there any way to do so?
I tried different ways to enter details into conferenceData object. Tried insert, update and patch.
Code Snippet
const insertEvent = await calendar.events.insert({
calendarId: "primary",
sendNotifications: true,
supportsAttachments: true,
requestBody: {
summary: "Hell Yeah",
start: {
dateTime: "2022-03-25T08:30:00.000Z",
timeZone: "Asia/Kolkata",
},
end: {
dateTime: "2022-03-25T09:30:00.000Z",
timeZone: "Asia/Kolkata",
},
conferenceData: {
conferenceId: "93831668388",
conferenceSolution: {
iconUri: "https://st1.zoom.us/static/6.0.5527/image/new/ZoomLogo.png",
key: { type: "addOn" },
name: "Zoom",
},
entryPoints: [
{
entryPointType: "video",
label: "zoom.us/j/93831668388?pwd=UHRqU0VwMjF3d1B0VXU5bFBRYWIxdz09",
passcode: "4gnZXJ",
uri: "https://zoom.us/j/93831668388?pwd=UHRqU0VwMjF3d1B0VXU5bFBRYWIxdz09",
},
],
},
},
});
But the event was created without any zoom meeting links.
The problem with your request is the iconUri. Your request will work without it. The documentation does not specify any requirement for iconUri, however, I tried with multiple formats (png, SVG, jpg, etc.) and it's not clear to me what the restrictions are, even the icon they use for Google Meet will fail. One example of a working iconUri is the one used by the Zoom add-on.
The minimal working example is something like this:
conferenceData: {
conferenceSolution: {
key: { type: "addOn" },
name: "Zoom",
},
entryPoints: [
{
entryPointType: "video",
passcode: "4gnZXJ",
uri: "https://zoom.us/j/93831668388?pwd=UHRqU0VwMjF3d1B0VXU5bFBRYWIxdz09",
},
],
},
Something similar to the one generated by the plugin will be like this:
"conferenceData": {
"entryPoints": [
{
"entryPointType": "video",
"uri": "https://zoom.us/j/93831668388?pwd=UHRqU0VwMjF3d1B0VXU5bFBRYWIxdz09",
"label": "zoom.us/j/93831668388?pwd=UHRqU0VwMjF3d1B0VXU5bFBRYWIxdz09",
"meetingCode": "93831668388",
"passcode": "4gnZXJ"
},
{
"regionCode": "US",
"entryPointType": "phone",
"uri": "tel:+13092053325,,89815701514#",
"label": "+1 309-205-3325",
"passcode": "2753507469"
},
{
"regionCode": "IE",
"entryPointType": "phone",
"uri": "tel:+35316533895,,89815701514#",
"label": "+353 1 653 3895",
"passcode": "2753507469"
},
{
"entryPointType": "more",
"uri": "https://applications.zoom.us/addon/invitation/detail?meetingUuid%3D%252BEfhBWj1RaeatV6Qo4QPeg%253D%253D%26signature%1a2E5Aa06313c4d378f6a231d83a13eec96f1643f81e300de80bf9eb4784b91440%26v%3D1&sa=D&source=calendar&usg=AOvVaw2jZJmsX7bEbWL1wVde7dOM"
}
],
"conferenceSolution": {
"key": {
"type": "addOn"
},
"name": "Zoom Meeting",
"iconUri": "https://lh3.googleusercontent.com/pw/AM-JKLUkiyTEgH-6DiQP85RGtd_BORvAuFnS9katNMgwYQBJUTiDh12qtQxMJFWYH2Dj30hNsNUrr-kzKMl7jX-Qd0FR7JmVSx-Fhruf8xTPPI-wdsMYez6WJE7tz7KmqsORKBEnBTiILtMJXuMvphqKdB9X=s128-no"
},
"conferenceId": "93831668388",
"notes": "Meeting host: <a href=\"mailto:meeting_creator#mail.com\" target=\"_blank\" > meeting_creator#mail.com</a> <br> <br> Join Zoom Meeting: <br> <a href=\"meeting_creator#mail.com\" target=\"_blank\" > https://zoom.us/j/93831668388?pwd=UHRqU0VwMjF3d1B0VXU5bFBRYWIxdz09 </a>"
}
How can I change hover color for a hyperlink in a SharePoint List View?
My JSON for the list view is below.
Thank you!
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "a",
"txtContent": "#currentField",
"attributes": {
"class": "sp-field-fontSize14",
"href": "[$Link]"
},
"style": {
"color": "#8F7034",
"text-decoration": "none",
"width": "300px",
"min-width": "200px",
"min-height":"1em",
"height":"1em",
"white-space": "nowrap",
"padding-left": "=if(indexOf(#currentField, ' ') == 1, '', if(indexOf(#currentField, ' ') == 3, '20px', '40px'))"
}
}
}
Use ms-bgColor-<color>--hover to change hover color.
For example:
attributes": {
"class": "sp-field-fontSize14 ms-bgColor-red--hover",
"href": "[$Link]"
},
Is there any way I can change the anchor for geojson points? Below a stripped down version of my project.
The problem I'm facing is that these icons start to "float" away from their location once I zoom out. (using a 40x40 square icon).
I've seen a lot similair questions on this matter, however none of the examples involved markers generated using geojson and/or changing the icon using setStyle.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 51.822976,
lng: 4.128522
},
zoom: 8,
minZoom: 2,
maxZoom: 26,
tilt: 0,
});
var infowindow = new google.maps.InfoWindow();
var offices = new google.maps.Data();
offices.addGeoJson({
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [4.403528, 51.260561]
},
"properties": {
"Location": "Antwerp",
"Country": "BE"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [9.986818, 53.554377]
},
"properties": {
"Location": "Hamburg",
"Country": "DE"
}
}
]
});
offices.setStyle({
icon: 'images/icons/logo-bl1.png'
});
offices.setMap(map);
offices.addListener('click', function(event) {
var office_location = event.feature.getProperty("Location");
var office_country = event.feature.getProperty("Country");
infowindow.setContent(office_location + " - " + office_country);
infowindow.setPosition(event.feature.getGeometry().get());
infowindow.setOptions({
pixelOffset: new google.maps.Size(0, -30)
});
infowindow.open(map);
map.panTo(event.latLng);
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
}
Figured it out by adding
var officeicon = {
url: 'images/icons/logo-bl1.png',
size: new google.maps.Size(40, 40),
anchor: new google.maps.Point(20, 20)
};
and then
offices.setStyle({
icon: officeicon,
I am trying to create a mixed chart with the angular plugin instead of plain javascript. For that, I am using this library http://jtblin.github.io/angular-chart.js/
In plain javascript it is created with something similar to this:
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
type: 'bar',
label: "Visitor",
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: '#71B37C',
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y-axis-1'
},
{
label: "Sales",
type:'line',
data: [51, 65, 40, 49, 60, 37, 40],
fill: false,
borderColor: '#EC932F',
backgroundColor: '#EC932F',
pointBorderColor: '#EC932F',
pointBackgroundColor: '#EC932F',
pointHoverBackgroundColor: '#EC932F',
pointHoverBorderColor: '#EC932F',
yAxisID: 'y-axis-2'
}
]
},
options: {
responsive: true,
tooltips: {
mode: 'label'
},
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [
{
display: true,
gridLines: {
display: false
},
labels: {
show: true,
}
}
],
yAxes: [
{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
gridLines:{
display: false
},
labels: {
show: true,
}
},
{
type: "linear",
display: true,
position: "right",
id: "y-axis-2",
gridLines: {
display: false
},
labels: {
show:true,
}
}
]
}
}
});
It can be seen here: http://plnkr.co/edit/TvY5tz?p=preview
I have tried tons of ways to do the same thing with angular-chart but I have been unable to do so. Has anyone been able to create any mixed chart type with the library? If so, please share any example.
Thanks in advance.
Not possible right now, there is an open issue to track this: https://github.com/jtblin/angular-chart.js/issues/336
It is now possible with 1.0.0-alpha8, See here on github
I'm so close on this one right now, but can't quite get the result I'm looking for. This is an attempt to pull a series of geolocations - along with a title and text. These are then assigned to markers which are populated on a google map. My ultimate goal is to get the distance and duration of travel between each of the markers and the 'map-center' marker (hub if you will) and populate it in the infoWindow when an individual marker is clicked.
So far I've got every aspect of this working EXCEPT getting the distance/duration to populate correctly in the infoWindow. I can successfully populate a div outside of the 'map-canvas' with innerHTML.
If I either try to print an assigned var or change the content of a div within the infoWindow, the function only works on the first click event. After that the infoWindow shows up blank. Here is the working script:
<head>
<meta charset="utf-8" />
<title>Towns Hub</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<style>
.wrapper {position:relative;width:500px;height:300px;margin:30px auto;}
#map {width:500px;height:300px;}
.container{position:absolute;bottom:0;left:0;width:100%;z-index:999;}
.trav-det{border:1px solid #000;float:left;padding:7px;font-size:1.5em;background: rgba(255,255,255, .85);}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class='trav-det' id='distance_road'></div>
<div class='trav-det' id='duration'></div>
</div>
<div id="map"></div>
</div>
<script>
var map;
var arrMarkers = [];
var infowindow = new google.maps.InfoWindow();
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function mapInit(){
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true,
preserveViewport:true
});
var latlng = new google.maps.LatLng(45.18929617,-109.24727440);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),myOptions);
directionsDisplay.setMap(map);
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(45.18929617,-109.24727440),
map: map,
title: 'Red Lodge, MT',
icon: 'http://mywebsite.com/images/orange-marker.png'
});
$.getJSON("hub.txt", {}, function(data){
$.each(data.places, function(i, item){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(item.lat, item.lng),
map: map,
title: item.title
});
arrMarkers[i] = marker;
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent("<p><strong>" + item.title + "</strong><br>"+ item.description +"</p>");
calcRoute(this.getPosition());
infowindow.open(map, this);
});
function calcRoute(drive_end) {
var start = new google.maps.LatLng(45.18929617,-109.24727440);
var end = drive_end;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.IMPERIAL
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
distance = response.routes[0].legs[0].distance.text;
duration = response.routes[0].legs[0].duration.text;
document.getElementById("distance_road").innerHTML = distance;
document.getElementById("duration").innerHTML = duration;
}
});
}
});
});
}
google.maps.event.addDomListener(window, 'load', mapInit);
</script>
text file:
{"places": [{
"title": "Cooke City, MT",
"description": "TEXT",
"lat": 45.02009497,
"lng": -109.93234595
},
{
"title": "Silver Gate, MT",
"description": "TEXY",
"lat": 45.00687965,
"lng": -109.98979568
},
{
"title": "Absarokee, MT",
"description": "TEXT",
"lat": 45.52004697,
"lng": -109.44136186
},
{
"title": "Billings, MT",
"description": "TEXT",
"lat": 45.78333000,
"lng": -108.50000000
},
{
"title": "Bridger, MT",
"description": "TEXT",
"lat": 45.28568200,
"lng": -108.90821700
},
{
"title": "Cody, WY",
"description": "TEXT",
"lat": 44.52313500,
"lng": -109.07561100
},
{
"title": "Columbus, MT",
"description": "TEXT",
"lat": 45.62617100,
"lng": -109.25712600
},
{
"title": "Gardiner, MT",
"description": "TEXT",
"lat": 45.03049875,
"lng": -110.70471900
},
{
"title": "Nye, MT",
"description": "TEXT",
"lat": 45.43584263,
"lng": -109.80859757
},
{
"title": "Joliet, MT",
"description": "TEXT",
"lat": 45.48287830,
"lng": -108.97241592
}]}
Any ideas about populating the duration/distance in the infoWindow?
Help appreciated!
Thanks,
Sam
ps I apologize for any ugly scripting. I'm learning as I go and appreciate any thoughts on making this script more efficient!
i might be wrong but from looking at your code:
<div class="wrapper">
<div class="container">
<div class='trav-det' id='distance_road'></div>
<div class='trav-det' id='duration'></div>
</div>
</div>
you are poulating divs in the dom with the distance/duration.
assuming the info is appearing in the divs ok...
to get it into the info window you would need to use:
infowindow.setContent(" distance: "+distance+"<br> duration: "+duration+" ")