Im trying to use this Gauges - https://canvas-gauges.com
I create javascript with this gauges and it works fine in chrome and Firefox, but in doesn't work in IE 11
There is my code:
<!DOCTYPE html>
<html>
<head>
<title>Gauges as Components</title>
<script src="http:////cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/latest/all/gauge.min.js"></script>
</head>
<body>
<h1 align="center" >CPU Dashboard</h1>
<canvas id="canvas-id" >
</canvas>
<script>
var gauge = new RadialGauge({
renderTo: 'canvas-id',
animationRule: "linear",
animationDuration: 1500,
needleCircleInner: false,
needleCircleOuter: true,
needleCircleSize: 7,
needleWidth: 2,
needleType: "arrow",
borders: false,
borderShadowWidth: 0,
colorPlate: "#fff",
highlights: [
{
"from": 160000,
"to": 200000,
"color": "rgba(255,216, 0, 1)"
},
{
"from": 200000,
"to": 268000,
"color": "rgba(255, 50, 50, .75)"
}
],
strokeTicks: true,
minorTicks: 2,
majorTicks: [
"0",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
"268000"
],
valueDec: 0,
valueInt: 5,
maxValue: 268000,
minValue: 0,
value:150000,
units: "mhz",
title:"CPU UTIL",
height: 300,
width: 300
}).draw();
</script>
</body>
</html>
I'm new in javascript. What I do wrong?
Thanks in advance!
I just use local js file and now it works in IE.
Recently I had the issue when my ES6 code does not work at IE11.
I had used IFEE, arrow functions and const.
I convert my code via the Babel recompiler and that helped me out to get everything to work just like in Chrome.
Related
I want to align my cytoscape graph on the center of the canvass, can anyone help?
This is the result i get:
Heres my layout code:
var cy = window.cy = cytoscape({
// Contenedor
container: document.getElementById('graficaCytoscape'),
// Layout
layout: {
name: 'cose',
idealEdgeLength: 100,
nodeOverlap: 20,
refresh: 20,
padding: 30,
randomize: false,
componentSpacing: 100,
nodeRepulsion: 400000,
edgeElasticity: 100,
nestingFactor: 5,
gravity: 80,
numIter: 1000,
initialTemp: 200,
coolingFactor: 0.95,
minTemp: 1.0
},
// Styles
style: [{
"selector": "node",
"style": {
"width": "mapData(score, 0, 25, 30, 70)",
"height": "mapData(score, 0, 25, 30, 70)",
"content": "data(name)",
"font-size": "12px",
"background-color": "#c2c2c2",
"text-outline-color": "#555",
"text-outline-width": "2px",
"color": "#fff",
"overlay-padding": "6px",
"z-index": "10"
}
}, {
"selector": "edge",
"style": {
"curve-style": "haystack",
"haystack-radius": "0.5",
"opacity": "0.4",
"line-color": "#EC0000",
"width": "mapData(weight, 0, 1, 1, 8)",
"overlay-padding": "3px"
}
}],
// Data
elements: data
});
So what i need is that the graph goes to the center of its container.
I think its a easy question but i never worked before with cytoescape and im stucked in this.
Thanks.
You may try to use cy.center() when you in .js file while rendering your graph.
Cytoscape.js documentation: https://js.cytoscape.org/#cy.center
You can try to add cy.center() in script.js file to see the effect in this example: http://embed.plnkr.co/O7mWEfZuIhhtahdAhsAM/
Alternatively, from your code, you can also try to add cy.center() at the end of the cy variable declaration.
At last i could do it with:
pan: { x: 400, y: 100 },
I am creating a new radial gauge and I am using canvas for this purpose. The data that I have entered inside the canvas tag needs to be placed in another file and then rendered on load of the page.
How can I do this? Please help me with it.
The following is my code.
I tried many methods but it is not working for me. I also need to pass data to this to make the pointer move. But I need this functionality to happen first. Please help me.
var gauge = new RadialGauge({
renderTo: 'canvas-id',
width: 400,
height: 400,
//units: "Km/h",
minValue: 0,
startAngle: 90,
ticksAngle: 180,
valueBox: false,
maxValue: 100,
majorTicks: [
"0",
"20",
"40",
"60",
"80",
"100"
],
minorTicks: 4,
strokeTicks: true,
borders: true,
needleType: "arrow",
needleWidth: 1,
needleCircleSize: 5,
needleCircleOuter: true,
needleCircleInner: true,
animationDuration: 1500,
animationRule: "circular"
}).draw();
<html>
<head>
<title>Gauges as Components</title>
<script src="gauge.min.js"></script>
</head>
<body>
<canvas
data-type="radial-gauge"
data-width="400"
data-height="400"
data-min-value="0"
data-start-angle="90"
data-ticks-angle="180"
data-value-box="false"
data-max-value="100"
data-major-ticks="0,20,40,60,80,100"
data-minor-ticks="4"
data-stroke-ticks="true"
data-border-shadow-width="0"
data-borders="false"
data-needle-type="arrow"
data-needle-width="1"
data-needle-circle-size="5"
data-needle-circle-outer="true"
data-needle-circle-inner="true"
data-animation-duration="1500"
data-animation-rule="circular"
></canvas>
</body>
</html>
My page speed is being damaged by the TradingView chart widget. I need to load the javascript async / defer. However, adding that to the script makes it disappear.
I use it for charts on this swedish page: https://cryptorunner.com/sv/hur-man-koper-bitcoin/
With this specific code in the wordpress editor:
<div class="tradingview-widget-container"><script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "BITFINEX:BTCUSD",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "3",
"locale": "sv_SE",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_top_toolbar": true,
"hide_legend": true,
"allow_symbol_change": true,
"container_id": "tradingview_7589b"
}
);
</script></div>
You will find the code here:
https://uk.tradingview.com/HTML5-stock-forex-bitcoin-charting-library/
I would really appreciate if someone could help me lazy load this chart. Any ideas why it doesn'tâ work?
You could try loading their script async and initate the chart once the whole page is fully loaded.
Vanilla/native JS minimal example from https://flippening.org/:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="tradingview-widget-container">
<div id="tradingview_d2337"></div>
<div class="tradingview-widget-copyright"><span class="blue-text">ETHBTC Rates</span> by TradingView</div>
</div>
</body>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js" async></script>
<script type="text/javascript">
window.onload = function(){
new TradingView.MediumWidget(
{
"symbols": [
[
"BINANCE:ETHBTC|12M"
]
],
"chartOnly": true,
"width": 1000,
"height": 400,
"locale": "en",
"colorTheme": "light",
"gridLineColor": "rgba(240, 243, 250, 0)",
"trendLineColor": "#2962FF",
"fontColor": "#787B86",
"underLineColor": "rgba(41, 98, 255, 0.3)",
"underLineBottomColor": "rgba(41, 98, 255, 0)",
"isTransparent": false,
"autosize": false,
"showFloatingTooltip": false,
"container_id": "tradingview_d2337"
}
);
};
</script>
</html>
But at some point, if you really want to optimize performance you cannot rely on a solution like tradingview. They provide a free solution to millions of websites and load a bunch load of 3rd party code which will slow down your page.
Either compare different options or do it yourself (minimal charts js library + your own data)
I'm using amCharts to display a map. I'm aiming to change the color of a specify country using Javascript.
I do use the following line to change the color inside my web browser :
document.getElementsByClassName("amcharts-map-area-FR")[0].setAttribute("fill", color);
But when I use it inside my html page, this does not work.
Here is the full html page :
<!DOCTYPE html>
<html>
<head>
<title>map created with amCharts | amCharts</title>
<meta name="description" content="map created using amCharts pixel map generator" />
<!--
This map was created using Pixel Map Generator by amCharts and is licensed under the Creative Commons Attribution 4.0 International License.
You may use this map the way you see fit as long as proper attribution to the name of amCharts is given in the form of link to http://pixelmap.amcharts.com/
To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/
If you would like to use this map without any attribution, you can acquire a commercial license for the JavaScript Maps - a tool that was used to produce this map.
To do so, visit amCharts Online Store: http://www.amcharts.com/online-store/
-->
<!-- amCharts javascript sources -->
<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
AmCharts.makeChart("map",{
"type": "map",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"addClassNames": true,
"fontSize": 15,
"color": "#FFFFFF",
"backgroundAlpha": 1,
"backgroundColor": "rgba(80,80,80,1)",
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true,
"images": [
{
"top": 40,
"left": 60,
"width": 80,
"height": 40,
"pixelMapperLogo": true,
"imageURL": "http://pixelmap.amcharts.com/static/img/logo.svg",
"url": "http://www.amcharts.com"
}
]
},
"balloon": {
"horizontalPadding": 15,
"borderAlpha": 0,
"borderThickness": 1,
"verticalPadding": 15
},
"areasSettings": {
"color": "rgba(129,129,129,1)",
"outlineColor": "rgba(80,80,80,1)",
"rollOverOutlineColor": "rgba(80,80,80,1)",
"rollOverBrightness": 20,
"selectedBrightness": 20,
"selectable": true,
"unlistedAreasAlpha": 0,
"unlistedAreasOutlineAlpha": 0
},
"imagesSettings": {
"alpha": 1,
"color": "rgba(129,129,129,1)",
"outlineAlpha": 0,
"rollOverOutlineAlpha": 0,
"outlineColor": "rgba(80,80,80,1)",
"rollOverBrightness": 20,
"selectedBrightness": 20,
"selectable": true
},
"linesSettings": {
"color": "rgba(129,129,129,1)",
"selectable": true,
"rollOverBrightness": 20,
"selectedBrightness": 20
},
"zoomControl": {
"zoomControlEnabled": true,
"homeButtonEnabled": false,
"panControlEnabled": false,
"right": 38,
"bottom": 30,
"minZoomLevel": 0.25,
"gridHeight": 100,
"gridAlpha": 0.1,
"gridBackgroundAlpha": 0,
"gridColor": "#FFFFFF",
"draggerAlpha": 1,
"buttonCornerRadius": 2
}
});
</script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
console.log( "document loaded" );
color = "#000000";
document.getElementsByClassName("amcharts-map-area-FR")[0].setAttribute("fill", color);
}
);
$( window ).load(function() {
console.log( "window loaded" );
});
</script>
</head>
<body style="margin: 0;background-color: rgba(80,80,80,1);">
<div id="map" style="width: 100%; height: 767px;"></div>
</body>
</html>
Hope this problem can be solved !
Thanks !
Your code to manipulate fill color of the area is correct. However, it executes immediately on page load. At that point the map is still initializing, meaning there's no such element yet, hence it not working.
There are a number of ways to go about it.
If you just need to load the map with certain areas (countries) colored, you could do that with map's config:
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true,
"areas": [ {
"id": "FR",
"color": "#00FF00"
} ],
"images": [ {
"top": 40,
"left": 60,
"width": 80,
"height": 40,
"pixelMapperLogo": true,
"imageURL": "http://pixelmap.amcharts.com/static/img/logo.svg",
"url": "http://www.amcharts.com"
} ]
}
If that is not acceptable, or if you need to manipulate the map after it's built, I suggest you use map's API functions (getObjectById() to get area object, then validate() to refresh it) to manipulate area colors, rather than CSS.
You would also need to ensure that map is initialized before doing so. We can use init event for that.
Consider the following code:
AmCharts.makeChart("map", {
"type": "map",
// ...
"listeners": [{
"event": "init",
"method": function(event) {
var area = event.chart.getObjectById("FR");
area.color = "#000000";
area.validate();
}
}]
});
Here's a working example.
You could use the same event to manipulate color of the area using your CSS code, however I strongly suggest using API functions. While manipulating CSS directly may work, the changes might be reset when there's something going on on the map, such as when you hover the area.
I'm trying to call a jQuery click function at the navigation of my bxslider like the following:
$("a.bx-next").click(function(){
alert("works!");
});
the problem is, that somehow i can't access anything that is in the .bx-controls section... if i try to:
$(".bx-viewport li").click(function(){
alert("works!");
});
it works as expected...
is there anyone, who experienced the same or knows, what the problem could be?
thanks in advance :)
EDIT
Actually i am using Drupal and the views slideshow plugin to include the bxslider... i don't know, what impact that could have, but these are the options given in JSON:
"viewsSlideshowBxslider": {
"views_slideshow_bxslider_images_1": {
"general": {
"mode": "horizontal",
"speed": 500,
"slideMargin": 0,
"startSlide": 0,
"randomStart": 0,
"infiniteLoop": 1,
"hideControlOnEnd": 0,
"captions": 1,
"ticker": 0,
"tickerHover": 0,
"adaptiveHeight": 0,
"adaptiveHeightSpeed": 500,
"video": 0,
"touchEnabled": 1,
"preloadImages": "all",
"disable_standard_css": 0,
"useCSS": 1,
"align_image": "left",
"align_caption": "left",
"swipeThreshold": 50,
"oneToOneTouch": 1,
"preventDefaultSwipeX": 1,
"preventDefaultSwipeY": 0,
"color_caption": "80, 80, 80, 0.75"
},
"controlsfieldset": {
"controls": 1,
"nextText": "",
"prevText": "",
"startText": "",
"stopText": "",
"autoControls": 0,
"autoControlsCombine": 0
},
"pagerfieldset": {
"pager": 1,
"pagerType": "full",
"pagerShortSeparator": " \/ "
},
"autofieldset": {
"pause": 4000,
"autoStart": 1,
"auto": 0,
"autoHover": 0,
"autoDelay": 0,
"autoDirection": "next"
},
"carousel": {
"minSlides": 4,
"maxSlides": 6,
"moveSlides": 1,
"slideWidth": 0
},
"callback": [
],
"fixes": {
"height_does_not_dyn_change": 0
}
}
}
okay, i found it on my own...
i'm not sure if it didn't work, because of the implementation via Drupal.
I had to define custom navigation like
<p><span id="slider-prev"></span> | <span id="slider-next"></span></p>
and then in a custom js file
$('.bxslider').bxSlider({
nextSelector: '#slider-next',
prevSelector: '#slider-prev',
nextText: 'Onward â',
prevText: 'â Go back',
onSlideNext: function(){
handleBxNav("next");
},
onSlidePrev: function(){
handleBxNav("prev");
}
});
function handleBxNav(direction){
if(direction == "prev"){
console.log("prev");
}else{
console.log("next");
}
}
with this solution, i can add custom events to the navigation :)
hope it helps if anyone is running in the same issue