We Keep Coding

How to show two Plotly charts side-by-side in JavaScript

I want to have two Plotly charts appear next to one another on the same line. Presently one chart appears above the other.
This is my JavaScript code for the two graphs:
var barData = [
{
x: x_names,
y: y_data,
text: y_names,
marker: { color: 'rgba(202,210,211,.90)' },
type: 'bar',
orientation: 'v',
width: 0.8,
options: { offset: true }
}];
var barLayout = {
title: "<b>Arrears Balance Managed by CSM</b>",
showlegend: false,
xaxis: { tickangle: 45, zeroline: true },
yaxis: { gridwidth: 1, zeroline: true },
height: 400,
width: 500,
};
Plotly.newPlot('bar', barData, barLayout);
var donutData = [{
labels: y1_names,
values: x1_data,
hole: .4,
type: "pie"
}];
var donutLayout = {
height: 400,
width: 500,
margin: {"t": 0, "b": 0, "l": 0, "r": 0},
showlegend: true
}
Plotly.newPlot('pie', donutData, donutLayout);
The following is from my html document:
<h3 class='display-4'>Graphs</h3>
<div class="col-md-6">
<div id="bar">
</div>
<div class="col-md-6">
<div id="pie">
</div>
Is there a way to get the two charts to line up next to one another?
Thanks in advance for your help.

If you are using a modern browser with your web page. I suggest you use the following CSS: display: flex;. Here is a link to a good guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can also see the example I made in the code snippet:
.graph-container {
display: flex;
}
#bar {
flex: 1;
width: 50px;
height: 50px;
background-color: #FF0000;
}
#pie {
flex: 1;
width: 50px;
height: 50px;
background-color: #0000FF;
}
<h3 class='display-4'>Graphs</h3>
<div class='graph-container'>
<div id="bar"></div>
<div id="pie"></div>
</div>

How to create a Circular Menu in Angular 10?

I wanted to create a circular menu that I came across on npmjs.com
As described, I used npm install circular-menu in order to install it.
After that, I added styles and scripts inside the "angular.json":
"styles": [
"node_modules/circular-menu/dist/css/circular-menu.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/circular-menu/dist/js/circular-menu.js"
]
And then, I created a component using this command, ng g c Components/cir-comp. If I want to paste the following code in my "cir-comp", how do I do that?
Mainly, I wanted to ask how to use the JavaScript code in my application?
var menu = CMenu("#menu1")
.config({
menus: [{
title: "GitHub",
icon: "fa fa-github",
href: {
url: "http://github.com",
blank: true
}
}, {
title: "GitLab",
icon: ["fa fa-gitlab", '#4078c0'],
}, {
title: "subMenu",
icon: "my-icon icon1",
menus: [{
title: 'subMenu1',
icon: 'fa fa-firefox'
}, {
title: 'subMenu2',
icon: 'fa fa-file'
}]
}, {
title: "subMenu",
icon: "my-icon icon2"
}, {
title: "click",
icon: "my-icon icon3"
}, {
title: "hash-href",
href: "#someHash"
}, {
title: "clickMe!",
click: function() {
alert('click event callback');
}
}, {
disabled: true,
title: "disabled"
}]
});
$(document).click(function() {
menu.hide();
});
$(document).contextmenu(function(e) {
menu.show([e.pageX, e.pageY]);
return false;
});
.tips {
font-size: 40px;
color: #999;
position: fixed;
top: 50%;
left: 30%;
}
.menu1 {
left: 50%;
top: 50%;
}
.my-icon {
background: url("https://rawgit.com/yandongCoder/circular-menu/master/examples/circular-menu.png");
}
.icon1 {
background-position: 0 0;
}
.icon2 {
background-position: 0 -56px;
}
.icon3 {
background-position: 0 -116px;
}
<div class="tips">
Right click in page.
</div>
<div id="menu1" class="menu1">
</div>
I am trying to use the .js code inside "cir-comp.component.ts", but it just won't recognize the "CMenu". Could anybody tell me how do I use this code inside my component?
Here are the links:
https://www.npmjs.com/package/circular-menu
https://jsfiddle.net/yandongCoder/kL4j7xor/10/

I think you just have to tell the typescript compiler CMenu exists. You can do this by adding the following line to the top of your ts file:
declare const CMenu: any

var menu = CMenu("#menu1")
.config({
menus: [{
title: "GitHub",
icon: "fa fa-github",
href: {
url: "http://github.com",
blank: true
}
}, {
title: "GitLab",
icon: ["fa fa-gitlab", '#4078c0'],
}, {
title: "subMenu",
icon: "my-icon icon1",
menus: [{
title: 'subMenu1',
icon: 'fa fa-firefox'
}, {
title: 'subMenu2',
icon: 'fa fa-file'
}]
}, {
title: "subMenu",
icon: "my-icon icon2"
}, {
title: "click",
icon: "my-icon icon3"
}, {
title: "hash-href",
href: "#someHash"
}, {
title: "clickMe!",
click: function() {
alert('click event callback');
}
}, {
disabled: true,
title: "disabled"
}]
});
$(document).click(function() {
menu.hide();
});
$(document).contextmenu(function(e) {
menu.show([e.pageX, e.pageY]);
return false;
});
.tips {
font-size: 40px;
color: #999;
position: fixed;
top: 50%;
left: 30%;
}
.menu1 {
left: 50%;
top: 50%;
}
.my-icon {
background: url("https://rawgit.com/yandongCoder/circular-menu/master/examples/circular-menu.png");
}
.icon1 {
background-position: 0 0;
}
.icon2 {
background-position: 0 -56px;
}
.icon3 {
background-position: 0 -116px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/yandongCoder/circular-menu/master/dist/css/circular-menu.css">
<script type="text/javascript" src="https://rawgit.com/yandongCoder/circular-menu/master/dist/js/circular-menu.js"></script>
<div class="tips">
Right click in page.
</div>
<div id="menu1" class="menu1">
</div>
Add Jquery and the scripts and styles:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/yandongCoder/circular-menu/master/dist/css/circular-menu.css">
<script type="text/javascript" src="https://rawgit.com/yandongCoder/circular-menu/master/dist/js/circular-menu.js"></script>
UPDATE:
Add tsconfig.json file to project.
tsconfig.json:
{ "compilerOptions": { ..., "allowJs": true }
Try that.

How to convert this jQuery code to ReactJS code (React, jQuery, HTML, CSS)

I have been trying to convert this code into ReactJS code, but I have never go through any of jQuery so I have try to convert most of the parts into ReactJS and this is what I get:
(This is what I have been trying to convert to ReactJS)
import React, {Component} from 'react';
import $ from "jquery";
import jQuery from 'query';
import jQuery-ui from 'jquery-ui';
import './TestChart.css';
class TestChart extends Component{
render(){
const options = {
animationEnabled: true,
title: {
text: "GDP Growth Rate - 2016"
},
axisY: {
title: "Growth Rate (in %)",
suffix: "%",
includeZero: false
},
axisX: {
title: "Countries"
},
data: [{
type: "column",
yValueFormatString: "#,##0.0#"%"",
dataPoints: [
{ label: "Iraq", y: 10.09 },
{ label: "T & C Islands", y: 9.40 },
{ label: "Nauru", y: 8.50 },
{ label: "Ethiopia", y: 7.96 },
{ label: "Uzbekistan", y: 7.80 },
{ label: "Nepal", y: 7.56 },
{ label: "Iceland", y: 7.20 }
]
}]
};
return(
<div id="container">
<button id="showChart">Click to Show Chart in a Pop-up</button>
</div>,
<div id="dialogBox" style="display: none;">
<div id="chartContainer" class="dialog" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
</div>
);
}
}
export default TestChart;
This is the jQuery part which I don't know how to convert it into ReactJS code:
(I want to convert this part into ReactJS code)
$("#showChart").click(function() {
$("#dialogBox").dialog({
open: function(event,ui) {
$(".ui-widget-overlay").bind("click", function(event,ui) {
$("#dialogBox").dialog("close");
});
},
closeOnEscape: true,
draggable: false,
resizable: false,
title: "GDP Growth Rate",
width: 700,
modal: true,
show: 500
});
$(".ui-widget-overlay").css({"background-color": "#111111"});
$("#chartContainer").CanvasJSChart(options);
});
(This is the original code)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
window.onload = function () {
var options = {
animationEnabled: true,
title: {
text: "GDP Growth Rate - 2016"
},
axisY: {
title: "Growth Rate (in %)",
suffix: "%",
includeZero: false
},
axisX: {
title: "Countries"
},
data: [{
type: "column",
yValueFormatString: "#,##0.0#"%"",
dataPoints: [
{ label: "Iraq", y: 10.09 },
{ label: "T & C Islands", y: 9.40 },
{ label: "Nauru", y: 8.50 },
{ label: "Ethiopia", y: 7.96 },
{ label: "Uzbekistan", y: 7.80 },
{ label: "Nepal", y: 7.56 },
{ label: "Iceland", y: 7.20 }
]
}]
};
$("#showChart").click(function() {
$("#dialogBox").dialog({
open: function(event,ui) {
$(".ui-widget-overlay").bind("click", function(event,ui) {
$("#dialogBox").dialog("close");
});
},
closeOnEscape: true,
draggable: false,
resizable: false,
title: "GDP Growth Rate",
width: 700,
modal: true,
show: 500
});
$(".ui-widget-overlay").css({"background-color": "#111111"});
$("#chartContainer").CanvasJSChart(options);
});
}
</script>
<style>
#showChart{
background-color: #5bb85b;
color: #ffffff;
padding: 10px;
border: 0px;
border-radius: 8px;
font-size: 18px;
outline: none;
cursor: pointer;
}
#container{
position: fixed;
top: 50%;
width:100%;
text-align: center;
margin-top: -41px;
}
</style>
</head>
<body>
<div id="container">
<button id="showChart">Click to Show Chart in a Pop-up</button>
</div>
<div id="dialogBox" style="display: none;">
<div id="chartContainer" class="dialog" style="height: 250px; width: 100%;"></div>
</div>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>
</html>

I wouldn't import any jQuery and do pure React:
import React from 'react';
import './TestChart.css';
class TextChart extends React.Component {
constructor(props) {
super(props);
this.toggleDialogBox = this.toggleDialogBox.bind(this);
this.state = {
isDialogueShown: false;
}
}
toggleDialogBox(event) {
const { isDialogueShown } = this.state;
this.setState({isDialogueShown: !isDialogueShown});
}
render() {
const { isDialogueShown } = this.state;
const dialogueText = isDialogueShown ? "Click to Show Chart in a Pop-up" : "Click to Close Chart";
return (
<div>
<div id="container">
<button id="showChart" onClick={this.toggleDialogBox}>{dialogueText}</button>
</div>
<div class={`dialogBox ${isDialogueShown ? 'visible' : 'hidden'}`}>
<div id="chartContainer" class="dialog"></div>
</div>
</div>
);
}
}
This would be in css file:
.dialogBox.hidden {
display: none;
}
#chartContainer.dialog {
height: 250px;
width: 100%;
}

How to load geojson file from local data in Highmaps?

I'm trying to create a mapping website for my thesis. I got this sample from high-maps, and it works.
// Prepare random data
var data = [
['DE.SH', 728],
['DE.BE', 710],
['DE.MV', 963],
['DE.HB', 541],
['DE.HH', 622],
['DE.RP', 866],
['DE.SL', 398],
['DE.BY', 785],
['DE.SN', 223],
['DE.ST', 605],
['DE.NW', 237],
['DE.BW', 157],
['DE.HE', 134],
['DE.NI', 136],
['DE.TH', 704],
['DE.', 361]
];
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=germany.geo.json&callback=?', function (geojson) {
// Initiate the chart
Highcharts.mapChart('container', {
title: {
text: 'GeoJSON in Highmaps'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
tickPixelInterval: 100
},
series: [{
data: data,
mapData: geojson,
joinBy: ['code_hasc', 0],
keys: ['code_hasc', 'value'],
name: 'Random data',
states: {
hover: {
color: '#a4edba'
}
},
dataLabels: {
enabled: true,
format: '{point.properties.postal}'
}
}]
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px"></div>
I have a map file which is located in my local data, so I want to change the existing map with mine and also change the random data. I try to change the $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=germany.geo.json&callback=?', function (geojson) with $.getJSON('3312kec.geojson', function (geojson).
// Prepare random data
var data = [
['010', 728],
['020', 710],
['030', 963],
['040', 541],
['050', 622],
['060', 866],
['070', 398],
['080', 785],
['090', 223],
['100', 605],
['110', 237],
['120', 157],
['130', 134],
['140', 136],
['150', 704],
['160', 398],
['170', 785],
['180', 223],
['190', 605],
['200', 237],
['201', 157],
['210', 134],
['220', 136],
['230', 704],
['240', 361]
];
$.getJSON('3312kec.geojson', function (geojson) {
// Initiate the chart
Highcharts.mapChart('container', {
title: {
text: 'GeoJSON in Highmaps'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
tickPixelInterval: 100
},
series: [{
data: data,
mapData: geojson,
joinBy: ['code_hasc', 0],
keys: ['code_hasc', 'value'],
name: 'Random data',
states: {
hover: {
color: '#a4edba'
}
},
dataLabels: {
enabled: true,
format: '{point.properties.postal}'
}
}]
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px"></div>
I have tried various ways but always failed. Is there someone who can help me?

Chartist JS color series using for legends

I am currently using a chartist-legend-plugin it was great but when it comes to the colors of the legends it ain't working. Does anyone know how to grab the series of colors in chartist? Because chartist automatically generates distinct colors but of course the plugin doesn't have it
JS:
new Chartist.Bar('.ct-chart-bar', {
labels: ['First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year'],
series: [
{ "name": "Money A", "data": [60000, 40000, 80000, 70000] },
{ "name": "Money B", "data": [40000, 30000, 70000, 65000] },
{ "name": "Money C", "data": [8000, 3000, 10000, 6000] }
],
}, {
fullWidth: true,
chartPadding: {
top: 40
},
high : 100000,
plugins: [
Chartist.plugins.legend(),
]
});
CSS:
.ct-legend {
position: relative;
z-index: 10;
li {
position: relative;
padding-left: 23px;
margin-bottom: 3px;
}
li:before {
width: 12px;
height: 12px;
position: absolute;
left: 0;
content: '';
border: 3px solid transparent;
border-radius: 2px;
}
li.inactive:before {
background: transparent;
}
&.ct-legend-inside {
position: absolute;
top: 0;
right: 0;
}
#for $i from 0 to length($ct-series-colors) {
.ct-series-#{$i}:before {
background-color: nth($ct-series-colors, $i + 1);
border-color: nth($ct-series-colors, $i + 1);
}
}
HTML holder of data:
<div class="ct-chart ct-chart-bar ct-perfect-fourth"></div>
All of its resources came from the link i included. I am a novice on chartist that's why i can't just in to modify the things they are using. Thanks alot everyone!
EDIT:
I think the css is trying to grab the series of colors but it can't unfortunately.

I think that you already solved the issue, but for others who can be looking for the solution. The CSS is basically not CSS but SCSS/SASS. Styles includes loop which uses variable $ct-series-colors. The variable have to imported from _chartist-settings.scss file via #import "chartist-settings"; or if you are using the default set of colors you can just copy and paste following list.
Only for SCSS/SASS not pure CSS!
$ct-series-colors: (
#d70206,
#f05b4f,
#f4c63d,
#d17905,
#453d3f,
#59922b,
#0544d3,
#6b0392,
#f05b4f,
#dda458,
#eacf7d,
#86797d,
#b2c326,
#6188e2,
#a748ca
) !default;