I want to put multiple gauge charts in a div, but I'm not sure how to do this.
Here's index.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>U.S. presidential vote, 1972-2016, by race</title>
<!-- Load c3.css -->
<link href="css/c3.min.css" rel="stylesheet">
<!-- Load d3.js and c3.js -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="js/c3.min.js"></script>
<script type="text/javascript">
var dataDir = "vote-by-race";
d3.csv(dataDir+"/white.csv").then(function(data){
data.forEach(function(d,i){
var chartDiv = document.createElement("div");
chartDiv.id = "chart"+i;
chartDiv.setAttribute("display","inline-block");
document.getElementById("charts-container").appendChild(chartDiv);
var chart = c3.generate({
data: {
json: d
},
type: "gauge",
bindto: '#'+chartDiv.id
});
});
});
</script>
</head>
<body>
<div id="charts-container"></div>
</body>
</html>
Here's the CSV I'm working with.
YEAR,DEMOCRAT,REPUBLICAN,OTHER
1972,32,66,2
1976,47,52,1
1980,35,56,9
1984,35,64,1
1988,40,59,1
1992,39,40,21
1996,43,46,11
2000,42,54,4
2004,41,58,1
2008,43,55,2
2012,39,59,2
2016,37,58,5
But when I open the HTML file in a browser, I see this.
How do I make a gauge chart for each row of data? I want each gauge chart (each year) to show the portions for Dems, GOP, and other.
Related
I'm trying to create a trigger button that, when pressed, will display a value from an excel cell in alert box or on the page.
below is all I could get, but it doesn't display anything on the page.
update: I managed to do this using ActiveX, but I don't want to use this library for some reasons. Do you have any idea how I could do it?
update code:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.6/xlsx.full.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Excel to HTML</title>
</head>
<body>
<p>Press to show</p>
<input type="button" onclick="ReadData(4, 2) ; msgprint()" value="Show" />
<div id="div1">
<script>
function ReadData(cell, row) {
var excel = new ActiveXObject("Excel.Application");
var excel_file = excel.Workbooks.Open("mypah/myworkbook.xlsx");
var excel_sheet = excel.Worksheets("Sheet1");
var data = excel_sheet.Cells(cell, row).Value;
document.getElementById("div1").innerText = data;
}
</script>
</div>
<script>
function msgprint() {
alert(document.getElementById("div1").innerText);
}
</script>
</body>
</html>
I downloaded an awesome JQuery scripts/plugin and I am trying to get the script incorporated into my project. I want to be able to share data or value from JQuery in the Head section of the HTML file to the Javascript in the Body of HTML file. I've tried different ways after reading up many threads and forums and stackoverflow questions but none seem to help me. I keep getting X function is not defined. Have a look at this sample code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="/socket.io/socket.io.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<title>Testing</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/vendor/raphael-min.js"></script>
<script src="/RGraph/libraries/RGraph.svg.common.core.js" ></script>
<script src="/RGraph/libraries/RGraph.svg.line.js" ></script>
<script src="/RGraph/demos/demos.js" ></script>
<script>
$(document).ready(function(){
var socket = io();
socket.on('sensor_values',function(msg){
line.update(msg[0].value); //<------- This function is defined in the Javascript below
});
});
</script>
</head>
<body>
<div style="width: 750px; height: 300px" id="chart-container"></div>
<script>
iteration = 0;
data = [];
labels = [
'','','','','','','','','','',
'','','','','','','','','',''
];
line = new RGraph.SVG.Line({
id: 'chart-container',
data: [data],
options: {
marginInner: 0,
title: 'GasBoss Demo Chart',
xaxisLabels: labels,
xaxisColor: '#aaa',
yaxis: false,
backgroundGridColor: '#eee',
backgroundGridVlines: false,
backgroundGridBorder: false,
colors: ['#00c','#c00'],
linewidth: 1,
tickmarksStyle: 'filledcircle'
}
}).draw();
function update (svalue) //<-------this is the function I am trying to call in the JQuery code above
{
if (iteration === 0) {
line.originalData[0] = RGraph.SVG.arrayPad([],20);
}
line.originalData[0].push(svalue);
line.originalData[0].shift();
line.properties.xaxisLabels.push(iteration + 1)
line.properties.xaxisLabels.shift();
RGraph.SVG.redraw();
iteration++;
}
</script>
</body>
</html>
When start typing the function name in the JQuery section, it pops up a context menu with the name of the function for me to select. That means to me that JQuery is able to see all the functions and variables from within Javascript code, but it still raises Update is not a function. Why? and how do you share or pass data between JQuery and Javascript as described above in their respective place within the HTML file.
I want to create column cards (like buttons).
in that cards, description should appear in its top and when it is clicked, separate link should be opened in new page.
every cards has its own description and link.it should not be hard coded by directly assigning the desc and link to it.and every function and elements should be assigned in javascript file not html.
the desc and link should given in an array like
Table={{"desc":"apple","link":"www.google.com"},{"desc":"banana","link":"www.youtube.com"}}
I tried this code and I'm getting only one card with last description and link
for(i=0;i<10;i++)
{
var temp=my.Table[i].link;
$('.demo').html('<div class="column"><p id="i"></p></div>');
document.getElementById(i).innerHTML ='' + my.Table[i].desc + '';
}
You can iterate the table object, after append what you should use.
HTML code:
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="script.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
</head>
<body>
<div class="demo">
</div>
</body>
</html>
And the jquery code looks like the following:
$(document).ready(function(){
const table=[{"desc":"apple","link":"www.google.com"},{"desc":"banana","link":"www.youtube.com"}];
table.forEach((v, i)=>{
$('.demo').append('<div class="column"><p id="temp_'+i+'">' + v.desc + '</p></div>');
});
});
I have created a pie chart with the following code. I get the result for that, but I need a small favour.
<html lang="en">
<body>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://dc-js.github.io/dc.js/css/dc.css"/>
</head>
<div id="billplan"></div>
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="https://dc- js.github.io/dc.js/js/crossfilter.js"></script>
<script type="text/javascript" src="js/dc.js"></script>
<script type="text/javascript">
var billplanchart = dc.pieChart("#billplan");
d3.csv("data/billplanchart.csv", function(error, experiments) {
var ndx = crossfilter(experiments),
planrate = ndx.dimension(function(d) {return d.plan_amount;}),
billplandimgroup = planrate.group().reduceSum(function(d) {return (Math.round(d.Count));});
billplanchart
.width(240)
.height(80)
.dimension(planrate)
.group(billplandimgroup)
.slicesCap(5)
.innerRadius(10)
.colors(d3.scale.ordinal().range(["#FFDA33","#05BCDC","#EA7262","#0071CF","#58A531","#E51F30"]))
.legend(dc.legend())
.on('pretransition', function(chart2) {
chart2.selectAll('text.pie-slice').text(function(d) {
return Math.round(dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100)*10)/10+ '%';
})
});
billplanchart.render();
});
</script>
</body>
</html>
I got this chart as a result.
Now please tell me how to change the font color of the numbers in percentage to black.
To visualize a node graph Sigma.js looks fantastic. I tried some examples but can't get my graph to display. I used example code and tried to plug in my .gexf file, but nothing displays. This is what I took from the Sigma.js example :
function init() {
// Instanciate sigma.js and customize rendering :
var sigInst = sigma.init(document.getElementById('sigma-example')).drawingProperties({
defaultLabelColor: '#fff',
defaultLabelSize: 14,
defaultLabelBGColor: '#fff',
defaultLabelHoverColor: '#000',
labelThreshold: 6,
defaultEdgeType: 'curve'
}).graphProperties({
minNodeSize: 0.5,
maxNodeSize: 5,
minEdgeSize: 1,
maxEdgeSize: 1
}).mouseProperties({
maxRatio: 32
});
// Parse a GEXF encoded file to fill the graph
// (requires "sigma.parseGexf.js" to be included)
sigInst.parseGexf('donornet.gexf');
// Draw the graph :
sigInst.draw();
}
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
} else {
window.onload = init;
}
I replaced the .gexf file with my own donornet.gexf file and saved it as donornet.js. I then used code from this example (from Max De Marzi), which I replaced with my donornet.js file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Donornet and Sigma.js Example</title>
<script type="text/javascript" src="sigma.min.js"></script>
<script type="text/javascript" src="sigma.parseGexf.js"></script>
<script type="text/javascript" src="sigma.forceatlas2.js"></script>
<link type="text/css" rel="stylesheet" href="neo_sigma.css"/>
</head>
<body>
<h1>Donornet and Sigma.js Example</h1>
<div class="buttons-container">
<button class="btn" id="stop-layout">Stop Layout</button>
<button class="btn" id="rescale-graph">Rescale Graph</button>
</div>
<div class="span12 sigma-parent" id="sigma-example-parent">
<div class="sigma-expand" id="sigma-example"></div>
</div>
<script type="text/javascript" src="donornet.js"></script>
</body>
</html>
All files are in the same folder. parseGexf.js is in the same folder as donornet.js and donornet.gexf.
You don't have to save .gexf file as a .js file. Just leave it as a gexf file and upload it into the script's folder. Remove the line with <script src="donornet.js">. Try to run again. If it doesn't work, also remove the buttons div. Check out the source on http://noduslabs.com/socialplayer/smmrussia/