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.
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>
I have a node js application that visualises a graph using Cytoscape JS. I wanted to use the new feature of taxi edge style in 3.5.2, but everytime I render the graph the page freezes and crashes after a while with version 3.5.2. Also the CPU usage spikes to ~100%. I use the Cytoscape instance as part of a class.
I have traced it back to the migration from Cytoscape JS 3.2.22 to 3.3.0. But that is all I could find. I examined the changelogs in the Cytoscape JS repo, but couldn't find anything that seemed relevant, except: https://github.com/cytoscape/cytoscape.js/issues/2311. This leads to #2295, the fix there didn't help either. So I guess that was not related either.
this.renderedGraph = Cytoscape({
container: $(`#${graphID}`),
style: Cytoscape.stylesheet()
.selector("node")
.css({
"content": "data(graphAbbrev)",
"text-wrap": "wrap",
"padding": "4px",
"width": "label",
"height": "label",
"text-valign": "center",
"text-halign": "center",
"shape": "roundrectangle",
"background-color": `mapData(weight, 0, ${
this.maxNodeWeight
}, #1cb5e0, #000046)`,
"color": "white"
})
.selector("edge")
.css({
"line-fill": "linear-gradient",
"text-margin-x": "20px",
"text-rotation": "autorotate",
"label": "data(weight)",
// "curve-style": "taxi",
// "taxi-direction": "downward",
// "taxi-turn": 20,
// "taxi-turn-min-distance": 5,
"target-arrow-shape": "triangle",
"target-arrow-color": `mapData(weight, 0, ${
this.maxEdgeWeight
}, #E6DADA, #274046)`,
"line-color": `mapData(weight, 0, ${
this.maxEdgeWeight
}, #E6DADA, #274046)`
}),
layout: {
name: "preset",
fit: true,
padding: 30
},
elements: {
nodes: this.nodes,
edges: this.edges
}
});
I would expect this to render the usual graph as it does in 3.2.22, but no luck with anything from 3.3.0 and above.
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)
How can i use bootstrap glyphicons instead of "regular" symbols in the contextbuttons of Highcharts. Going to exporting > buttons > contextButton.
I have added some glyphicon in the className propery, but the symbol shows up instead. Is there any way to override this?
Here is an example JSON object for Highcharts:
{
"chart": {
"type": "column",
"renderTo": "periodChart"
},
"title": {
"text": "Verkoop per periode"
},
"xAxis": {
"categories": ["2015", "2016", "2017"]
},
"yAxis": {
"title": {
"text": "Aantal verkochte producten"
}
},
"exporting": {
"buttons": {
"contextButton": {
"align": "right",
"symbol": "menu",
"height": 22,
"width": 24,
"y": 0,
"x": 0,
"className": "glyphicon glyphicon-print",
"enabled": true
}
}
},
"series": [{
"borderColor": "#555",
"data": [{
"name": "2015",
"y": 6121.0
}, {
"name": "2016",
"y": 6172.0
}, {
"name": "2017",
"y": 4943.0
}],
"name": "Aantallen per jaar (P/s)"
}]
}
I have added the following packages to my html, along with bootstrap and jquery:
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
Edit: when i leave the symbol property empty ("") then nothing shows up. Not using the property at all will result in the default "menu" symbol.
EDIT
The post before the edit contained only the information how to add a regular image as a background to the context button which wasn't the actual answer for this question.
Here I used glyphicon as a charcter in the text of te button: http://jsfiddle.net/kkulig/LoLtm8bn/
I haven't found a way to completely disable the symbol in the context button. The workaround for this is to hide it but the space reserved for it still remains there.
I ended up using the approach from Full text button example in this API record: https://api.highcharts.com/highcharts/exporting.buttons.contextButton.text (contextButton disabled, exportButton used instead).
Live demo: http://jsfiddle.net/kkulig/np80zf58/
END OF EDIT
Context button is an SVG element so you need to use defspattern for this:
JS:
events: {
load: function() {
var chart = this,
renderer = chart.renderer;
var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
width: 1,
height: 1,
id: "image1",
patternContentUnits: 'userSpaceOnUse'
});
renderer.image('https://www.highcharts.com/samples/graphics/sun.png', 0, 0, 24, 24).add(pattern);
}
}
CSS:
// hide the default symbol
.highcharts-button-symbol {
display: none
}
// use a new one
.highcharts-button-box {
fill: url(#image1)
}
Live working example: http://jsfiddle.net/kkulig/2cpvuydd/
SO related question: Fill SVG path element with a background-image
Highcharts docs reference: https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns
Highcharts API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer