Develop Reference

How do I highlight the marker on the map when click on matching carousel corresponding to the marker to the map?

Say the first carousel slide is Los Angeles California and when click on it, the red dot marker on the map will change its color to like blue on Los Angeles, CA coordinate. When click on the 2nd slide the 1st highlighted marker will back to default red and the new marker will be highlighted to blue.
I am not sure how to go about connecting these two using Vanilla JS.
If logic connects, I can easily change the red dot color using CSS.
I am using DataMaps to render the USA map with coordinates of certain cities from a JSON file and slick-carousel for the bottom carousel.
JSON
[
{
"city": "Madison",
"state": "WI",
"latitude": 43.07199845990384,
"longitude": -89.40813691528471
},
{
"city": "Columbus",
"state": "OH",
"latitude": 40.00178899021552,
"longitude": -83.01964928313465
}
]
Here I fetch the json file, initialization of DataMaps and logic for populate json objects into carousel HTMLs.
// Get JSON data
fetch('assets/json/cities.json')
.then(function (response) {
return response.json();
})
.then(function (data) {
appendData(data);
})
.catch(function (err) {
console.log('error: ' + err);
});
var map = new Datamap({
element: document.getElementById("map"),
responsive: true,
height: null,
width: null,
scope: 'usa',
geographyConfig: { // USA map color
popupOnHover: false,
highlightOnHover: false,
borderWidth: 1,
borderOpacity: 0.6,
borderColor: '#ffffff'
},
bubblesConfig: { // USA city popup color
borderWidth: 1,
borderOpacity: 1,
borderColor: '#c5002e',
popupOnHover: true,
radius: null,
fillOpacity: 1,
animate: true,
highlightOnHover: true,
highlightFillColor: '#c5002e', // hover dot color
highlightBorderColor: '#c5002e',
highlightBorderWidth: 1,
highlightBorderOpacity: 1,
highlightFillOpacity: 0.75,
exitDelay: 100,
key: JSON.stringify,
popupTemplate: function(geography, data) {
return '<div class="hoverinfo">' + data.name + '</div>';
},
},
fills: {
defaultFill: '#3a3a3a', // map color
city: '#c5002e' // dot color
}
});
// Responsive map
window.addEventListener('resize', function() {
map.resize();
});
// Loop to grab all json objects and render them in the page
function appendData(data) {
for (var i = 0; i < data.length; i++) {
var city = (data[i].city),
state = (data[i].state),
const locations = document.createElement("div");
// Add html
locations.innerHTML = `
<div class="city__locations-slide">
<div class="city__locations-slide-inner">
<p class="">${city} ${state}</p>
</div>
</div>
`;
document.querySelector(".city__locations").append(locations)
}
Slick-carousel code
//initilize city locations slick carousel
$(document).ready(function() {
$(".city__locations").slick({
dots: true,
prevArrow: '<button type="button" class="city__locations-prev-button"/>',
nextArrow: '<button type="button" class="city__locations-next-button"/>',
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 640,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
HTML
<div class="row">
<div class="columns small-24">
<div id="map-location" class="push--40 city__locations"></div>
</div>
</div>
Here is initial example in jsbin.
If this all work out, there is another date feature I would like to implement it. When the current date is bigger/equal to the date in the json date object, the red dot marker will also be highlighted it.
Any help is appreciated.
Thanks!

if you can add some data attributes to the
return '<div data-unique-identifier class="hoverinfo">' + data.name + '</div>';
then with the carousel divs wire up a mouse over event and then you can use the data attributes to match the div to the corresponding icon. With the date you can again add a custom CSS class in the above line to create a highlight a bit like so:
return '<div data-unique-identifier class="' + new Date(data.someDate) === new Date('Jul 12 2011') ? highlight : hoverinfo + '">' + data.name + '</div>';
It's hard to help without a minimal reproducible example
I hope this helps

Here is a glow effect, the glow is a bit much, CSS isn't my strong suit but should do what you wanted and you can tweak the CSS. I couldn't find a way to override the CSS on the map dots, so I used a div that is positioned in the create the glow effect
// Init USA map
var map = new Datamap({
element: document.getElementById("map"),
responsive: true,
height: null,
width: null,
scope: 'usa',
geographyConfig: { // USA map color
popupOnHover: false,
highlightOnHover: false,
borderWidth: 1,
borderOpacity: 0.6,
borderColor: '#ffffff'
},
bubblesConfig: { // USA city popup color
borderWidth: 1,
borderOpacity: 1,
borderColor: '#c5002e',
popupOnHover: true,
radius: null,
fillOpacity: 1,
animate: true,
highlightOnHover: true,
highlightFillColor: '#c5002e', // hover dot color
highlightBorderColor: '#c5002e',
highlightBorderWidth: 1,
highlightBorderOpacity: 1,
highlightFillOpacity: 0.75,
exitDelay: 100,
key: JSON.stringify,
popupTemplate: function(geography, data) {
return '<div class="hoverinfo">' + data.name + '</div>';
},
},
fills: {
defaultFill: '#3a3a3a', // map color
city: '#c5002e' // dot color
}
});
// Responsive map
window.addEventListener('resize', function() {
map.resize();
});
// City popup
map.bubbles([{
radius: 10,
fillKey: 'city',
name: 'Madison, WI',
cityId: "1",
latitude: 43.07199845990384,
longitude: -89.40813691528471
},
{
radius: 10,
fillKey: 'city',
name: 'Columbus, OH',
cityId: "2",
latitude: 40.00178899021552,
longitude: -83.01964928313465
},
{
radius: 10,
fillKey: 'city',
name: 'Gainesville, FL',
cityId: "3",
latitude: 29.645407365499,
longitude: -82.348610942268
},
{
radius: 10,
fillKey: 'city',
name: 'Chestnut Hill, MA',
cityId: "4",
latitude: 42.335294607839636,
longitude: -71.16643600759312
}
]);
//initilize city locations slick carousel
$(document).ready(function() {
$(".city__locations").slick({
dots: true,
prevArrow: '<button type="button" class="city__locations-prev-button"/>',
nextArrow: '<button type="button" class="city__locations-next-button"/>',
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 640,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
$(".city__locations-slide").each(function() {
$(this).mouseover(function() {
const location = $(this)
.children(".city__locations__locations-slide-inner")
.children("p").html()
const mapMatch = $(".datamaps-bubble").filter(function() {
return $(this).data("info").name === location
})
$(".glow").css({
top: mapMatch.position().top + 'px',
left: mapMatch.position().left + 'px',
}).show();
}).mouseout(function() {
$(".glow").hide();
})
})
});
.glow {
display: none;
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 60px 30px #fff, 0 0 100px 60px #f0f, 0 0 140px 90px #0ff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width">
<title>USA Map with carousel</title>
<style>
.city__locations-slide {
background-color: lightgrey;
padding: 10px;
margin: 10px;
}
.city__locations-prev-button {
position: absolute;
left: 0;
top: 30%;
width: 20px;
height: 20px;
z-index: 111;
}
.city__locations-next-button {
position: absolute;
right: 0;
top: 30%;
width: 20px;
height: 20px;
z-index: 111;
}
</style>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick-theme.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="columns small-24">
<div id="map" class="" style="position: relative; height: 100%; width: 100%; background-color: rgb(255, 255, 255, 1);"></div>
<div id="map-location" class="push--40 city__locations">
<div class="city__locations-slide">
<div class="city__locations__locations-slide-inner">
<p>Madison, WI</p>
</div>
</div>
<div class="city__locations-slide">
<div class="city__locations__locations-slide-inner">
<p>Columbus, OH</p>
</div>
</div>
<div class="city__locations-slide">
<div class="city__locations__locations-slide-inner">
<p>Gainesville, FL</p>
</div>
</div>
<div class="city__locations-slide">
<div class="city__locations__locations-slide-inner">
<p>Chestnut Hill, MA</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="glow" class="glow">
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.usa.js"></script>
<script src="//code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.min.js"></script>
</body>
</html>
https://jsfiddle.net/PatrickHume/e1m7quj6/90/
I hope this helps ?

Chartjs make bubbels responsive in bubble chart

As the title says I have a bubble chart made with chartjs. The problem is the size of bubbles that do not change depending of the screen size, they are not responsive. I multiple the radius with 5 but I do not want this as it is not responsive. Is there a way to achive that in chartjs? I read on the documentation that the bubble sizes are in pixes. Any way to transform it in dynamic value, like percentage for example?
<div id="<%= containerId %>" class="item">
<script>
async function createChart() {
response = await axios.get(`<%= url %>`);
if(Object.keys(response["data"]["data"]).length) {
container = document.getElementById(`<%= containerId %>`)
container.innerHTML = ` <div class="container">
<div class="section">
<div class="py-4">
<img src="/images/logo.png" width="180" alt="">
</div>
<h2 class="fw-700" id="<%= mainTitleId %>" style="text-transform: capitalize"></h2>
<hr>
<br><br>
<div style="width: 100%;">
<canvas id="<%= chartId %>" style="display: block; width: 1379px; height: 686px;" width="1379" height="689"></canvas>
</div>
</div>
</div>
`
mainTitleElement = document.getElementById(`<%= mainTitleId %>`)
mainTitleElement.innerHTML = response["data"]["data"]["slide_title"]
var phases = [
"Phase 1",
"Phase 2",
"Phase 3",
"Phase 4",
];
var sponsors = response["data"]["data"]["sponsors"];
var dataPoints = response["data"]["data"]["phases_per_sponsors"]
var myBubbleChart = new Chart(document.getElementById(`<%= chartId %>`), {
type: 'bubble',
plugins: [{
afterDatasetUpdate: chart => {
chart.getDatasetMeta(0).data.forEach(v => {
v._model.radius = v._model.radius * 5
v._options.hoverRadius = v._model.radius;
})
}
}],
data: {
datasets: [
{
label: "",
data: dataPoints,
backgroundColor: 'rgba(237, 130, 60, 0.5)',
}
]
},
options: {
legend: {
display: false
},
responsive: true,
scales: {
yAxes: [{
ticks: {
stepSize: 1,
callback: function (value, index, values) {
if (index < sponsors.length) {
return sponsors[sponsors.length - (1 + index)]; //this is to reverse the ordering
}
}
},
position: 'left'
}],
xAxes: [{
ticks: {
stepSize: 1,
callback: function (value, index, values) {
if (index < phases.length) {
return phases[index];
}
}
},
position: 'bottom'
}]
}
}
});
} else {
container = document.getElementById(`<%= containerId %>`)
container.innerHTML = `
<div class="container">
<div class="py-4">
<img src="/images/logo.png" width="180" alt="">
</div>
</div>
<div class="container center">
<div class="section pt-4 px-20">
<h1 class="fw-800 text-center">
${response["data"]["message"]}
</h1>
<hr class="hr-mid">
</div>
</div>
`
};
}
createChart();
</script>
</div>

Create close button near the shape JointJS

I have some rectangular shapes (they will appear when the data science toolkit buttons is clicked) and they can drag&drop to the free-space (paper). Also you can run and check easily in codepen.io.
Thing that I want to add, is remove dropped shapes by clicking close button. But I don't know how can create close button near the dropped shape and also removing that shape.
Any help would be greatly appreciated, thanks!
// Canvas where sape are dropped
var graph = new joint.dia.Graph,
paper = new joint.dia.Paper({
el: $('#paper'),
model: graph
});
// Canvas from which you take shapes
var stencilGraph = new joint.dia.Graph,
stencilPaper = new joint.dia.Paper({
el: $('#stencil'),
model: stencilGraph,
interactive: false
});
var r1a = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 10
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect1a'
}
}
});
var r1b = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 60
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect1b'
}
}
});
var r2a = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 10
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect2a'
}
}
});
var r2b = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 60
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect2b'
}
}
});
var r3a = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 10
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect3a'
}
}
});
var r3b = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 60
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect3b'
}
}
});
var r4a = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 10
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect4a'
}
}
});
var r4b = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 60
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect4b'
}
}
});
var statistic = document.getElementById("statistic-button");
var clustering = document.getElementById("clustering-button");
var classification = document.getElementById("classification-button");
var regression = document.getElementById("regression-button");
statistic.onclick = function(){
r1a.addTo(stencilGraph);
r1b.addTo(stencilGraph);
r2a.remove(stencilGraph);
r2b.remove(stencilGraph);
r3a.remove(stencilGraph);
r3b.remove(stencilGraph);
r4a.remove(stencilGraph);
r4b.remove(stencilGraph);
};
clustering.onclick = function(){
r1a.remove(stencilGraph);
r1b.remove(stencilGraph);
r2a.addTo(stencilGraph);
r2b.addTo(stencilGraph);
r3a.remove(stencilGraph);
r3b.remove(stencilGraph);
r4a.remove(stencilGraph);
r4b.remove(stencilGraph);
};
classification.onclick = function(){
r1a.remove(stencilGraph);
r1b.remove(stencilGraph);
r2a.remove(stencilGraph);
r2b.remove(stencilGraph);
r3a.addTo(stencilGraph);
r3b.addTo(stencilGraph);
r4a.remove(stencilGraph);
r4b.remove(stencilGraph);
};
regression.onclick = function(){
r1a.remove(stencilGraph);
r1b.remove(stencilGraph);
r2a.remove(stencilGraph);
r2b.remove(stencilGraph);
r3a.remove(stencilGraph);
r3b.remove(stencilGraph);
r4a.addTo(stencilGraph);
r4b.addTo(stencilGraph);
};
stencilPaper.on('cell:pointerdown', function(cellView, e, x, y) {
$('body').append('<div id="flyPaper" style="position:fixed;z-index:100;opacity:.7;pointer-event:none;"></div>');
var flyGraph = new joint.dia.Graph,
flyPaper = new joint.dia.Paper({
el: $('#flyPaper'),
model: flyGraph,
interactive: false
}),
flyShape = cellView.model.clone(),
pos = cellView.model.position(),
offset = {
x: x - pos.x,
y: y - pos.y
};
flyShape.position(0, 0);
flyGraph.addCell(flyShape);
$("#flyPaper").offset({
left: e.pageX - offset.x,
top: e.pageY - offset.y
});
$('body').on('mousemove.fly', function(e) {
$("#flyPaper").offset({
left: e.pageX - offset.x,
top: e.pageY - offset.y
});
});
$('body').on('mouseup.fly', function(e) {
var x = e.pageX,
y = e.pageY,
target = paper.$el.offset();
// Dropped over paper ?
if (x > target.left && x < target.left + paper.$el.width() && y > target.top && y < target.top + paper.$el.height()) {
var s = flyShape.clone();
s.position(x - target.left - offset.x, y - target.top - offset.y);
graph.addCell(s);
}
$('body').off('mousemove.fly').off('mouseup.fly');
flyShape.remove();
$('#flyPaper').remove();
});
});
.data-science-toolkit{
height: 300px;
border: 5px double #005580;
}
.data-science-toolkit .before-drop-display-none{
display: none;
}
.ds-tool-space{
border: 5px double #005580;
}
.free-space{
border: 5px solid #005580;
height: auto;
}
.doitcenter{
text-align: center;
}
#paper {
height: auto;
background-color: #f2e6e6;
}
#stencil {
background-color: darkcyan;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row mt-4">
<div class="col-2">
<div class="data-science-toolkit mb-2">
<div class="nav-logo">
<h5 class="doitcenter" style="text-shadow: 0.5px 0.5px 1px gray;">Toolkit</h5>
</div>
<hr>
<div class="dropdown doitcenter mb-1">
<button id="statistic-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Statistics
<span class="caret"></span></button>
</div>
<div class="dropdown doitcenter mb-1">
<button id="clustering-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Clustering
<span class="caret"></span></button>
</div>
<div class="dropdown doitcenter mb-1">
<button id="classification-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Classification
<span class="caret"></span></button>
</div>
<div class="dropdown doitcenter mb-1">
<button id="regression-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Regression
<span class="caret"></span></button>
</div>
</div>
<div class="ds-tool-space mb-2">
<div id="stencil" style="height: 250px;"></div>
</div>
</div>
<div class="col-10">
<div class="free-space">
<div id="paper" style=""></div>
</div>
</div>
</div>
</div>

You can use the built-in elementTools.remove, and bind with an event like the following:
paper.on('element:mouseenter', (elementView) => {
elementView.addTools(
new joint.dia.ToolsView({
tools: [
new joint.elementTools.Remove({
useModelGeometry: true,
y: '0%',
x: '100%',
}),
],
})
);
});
paper.on('element:mouseleave', (elementView) => {
elementView.removeTools();
});
Note that you might need to change the position according to your element shape.
This is also included in the official demo

Highcharts - How would I use HTML input boxes to input the data for a Pie Chart?

Sorry, this is my first stackoverflow question so let me know if I've formatted this wrong.
I attempted to use document.getElementById("id").value in order to get the input value from the input box but I couldn't quite figure out how to make it work. I saw other answers making use of JSON or JQuery but I don't have much experience in those yet so if I could make this work without those(if possible) I'll take that option.
Any bits of code that are commented out are just me trying to get it to work.
(Sidenote: I know my HTML code might be a bit scuffed, that isn't a priority right now)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Pricer.ie</title>
<link rel="stylesheet" href="homepage.css"/>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="/js/themes/gray.js"></script>
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
</head>
<body>
<nav class="navbar">
<ul>
<li class="logo">
<img src="logopricer.png" alt="logo" id="logo" >
</li>
<li>
Login
</li>
</ul>
</nav>
<main>
<figure class="highcharts-figure">
<div id="container" style="width:100%; height:400px;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var myChart = Highcharts.chart({
chart: {
renderTo: 'container',
type: 'pie',
events: {
load: function(event) {
var chart = this,
points = chart.series[0].points,
len = points.length,
total = 0,
i = 0;
for (; i < len; i++) {
total += points[i].y;
}
chart.setTitle({
text: '<span style="font-size: 13px">Current Price</small><br>' + '<b>' + '€' + total.toFixed(2) + '</b>',
align: 'center',
verticalAlign: 'middle',
y: -10,
});
}
}
},
title: {
text: 'Product Details'
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}</b>' + '<b>%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: €{point.y:.2f}'
}
}
},
series: [{
name: 'Total', [{
name: 'Profit Margin',
// y: document.getElementById('pcost').value
y : 0.29
}, {
name: 'Taxes',
// y: document.getElementById('taxes').value // external thing! database cuz tax changes depending on product
y : 4.25
}, {
name: 'Ebay Fees',
// y: document.getElementById('listfee').value
y : 3.93
}, {
name: 'Unit + Shipping Costs',
// y : document.getElementById('icost').value + document.getElementById('scost').value
y : 17.03
}],
size: '60%',
innerSize: '70%',
showInLegend:true,
dataLabels: {
enabled: true
}
}]
},
)
}
)
</script>
</figure>
<article>
<form>
<label for="icost">Item Cost:</label>
<input type="number" id="icost" name="icost" step="0.01"><br><br>
<label for="scost">Shipping Cost:</label>
<input type="number" id="scost" name="scost" step="0.01"><br><br> <!-- names and ids are incorrect just like this for now -->
<label for="pcost">Pickpack Cost:</label>
<input type="number" id="pcost" name="scost" step="0.01"><br><br>
<label for="taxes">Taxes:</label>
<input type="number" id="taxes" name="taxes" step="0.01"><br><br> <!-- shouldnt exist as taxes is from database but sure look-->
<label for="listfee">Listing Fee:</label>
<input type="number" id="listfee" name="listfee"><br><br>
<button onclick="Function()">Save Changes</button>
</form>
</article>
</main>
<footer>
</footer>
</body>
<html>
I would link to a JSFiddle but not sure how I would do that as my JS is currently embedded within my HTML lol. Thanks in advance to anyone that decides to give me a hand with this. Any advice with this is useful!

You need to get data and put them in a format required by Highcharts. Simple example below:
document.getElementById('btn').addEventListener('click', function() {
var data = [
parseInt(document.getElementById('data1').value),
parseInt(document.getElementById('data2').value)
];
Highcharts.chart('container', {
series: [{
type: 'pie',
data
}]
});
});
Live demo: http://jsfiddle.net/BlackLabel/dyp5208b/
API Reference: https://api.highcharts.com/highcharts/series.pie.data

How to onload <div> to run automatically when page start loading?

My code works well but when i refresh my page, both <div> run together whereas i need only one when each radio button is clicked.
<input type="radio" name="cardType" id="one" class="css-checkbox" value="db" checked>Pie
<input type="radio" name="cardType" id="two" class="css-checkbox" value="cc">Column
$(document).ready(function () {
$(".css-checkbox").click(function () {
if ($(this).attr('id') == "one") {
$('#a').show();
$('#b').hide();
} else {
$('#a').hide();
$('#b').show();
}
});
});
<div id="a">
<div id="Revenue" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</div>
<div id="b">
<div id="Revenue2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</div>
and here's my graph code. Revenue and revenue2 basically a graph that will alternately shown when radio button is clicked. so basically both code are the same with different data only.
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'Revenue2',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Revenue'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Revenue (RM)'
}
},
plotOptions: {
column: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name;
}
}
}
},
series: [{
type: 'column',
name: 'Revenue',
data: []
}]
}
$.getJSON("dataCountryRevenue.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
});
</script>

Try hiding one of the divs on document load:
EDIT:
I'm not super familiar with the HighCharts API, but it looks like there is a callback in the constructor that will allow you to do something after the chart is done loading. In this case, I hide the chart after it has finished loading.
$(document).ready(function() {
$(".css-checkbox").click(function() {
if ($(this).attr('id') == "one") {
$('#a').show();
$('#b').hide();
} else {
$('#a').hide();
$('#b').show();
}
});
var options1 = {
//removed for brevity;
}
var options2 = {
//removed for brevity;
}
//get chart1
$.getJSON("dataCountryRevenue.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options1);
});
//get chart2
$.getJSON("dataCountryRevenue.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options2, function() {
//hide chart after it has been loaded
$("#b").hide();
});
});
});

Since you are dealing with something filling the contents while potentially hidden, you might set the div off screen rather than display: none;.
function setOnScreen(id){
var $a = $("#a");
var $b = $("#b");
var $hide = (id === "one" ? $a : $b);
var className = "offscreen";
$a.addClass(className);
$b.addClass(className);
$hide.removeClass(className);
}
$(document).ready(function () {
setOnScreen($(".css-checkbox[checked]").attr("id"));
$(".css-checkbox").click(function () { setOnScreen($(this).attr("id")); });
});
#a { background-color: aliceblue; border: solid 1px; }
#b { background-color: mistyrose; border: solid 1px; }
.offscreen {
position: absolute;
left: -10000px;
}
<div id="a" class="offscreen">
<div id="Revenue" style="min-width: 100px; height: 100px; margin: 0 auto"></div>
</div>
<div id="b" class="offscreen">
<div id="Revenue2" style="min-width: 100px; height: 100px; margin: 0 auto"></div>
</div>
<input type="radio" name="cardType" id="one" class="css-checkbox" value="db" checked>Pie
<input type="radio" name="cardType" id="two" class="css-checkbox" value="cc">Column
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>