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.
Related
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.
I want to know how you would go about getting a value from a color picker and returning it to a js script
Here is the HTML Code
<!DOCTYPE html>
<script type="text/javascript" src="Scripts/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap-colorpicker.js"></script>
<link rel='stylesheet' href='css/bootstrap-colorpicker.css' />
<script type="text/javascript" src="js/bootstrap-colorpicker.min.js"></script>
<link rel='stylesheet' href='css/bootstrap-colorpicker.min.css' />
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
</head>
<body>
<p> test test test</p>
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
<script>
$(function () {
$('#cp2').colorpicker({
color: '#AA3399',
format: 'rgb'
})
});
</script>
</body>
</html>
<script>document.getElementById("cp2").value = function () {
return rgb;
}
</script>
`
I am looking to return the value of the color picker which is in RGB format to a js script so that I will to able to assign vars like this
var 1 = rgb[1]
var 2 = rgb[2]
var 3 = rgb[3]
`
If you decide to help me I will be thankful and you could please explain so I can learn from it.
Check javascript function:
<script>
(function() {
var rgb = document.getElementById("cp2").value ;
return rgb;
})();
</script>
I am in process of learning.I wanted to try an qrcode generator project.The project works fine.I have two small doubts.Can someone suggest me anything,It would be very helpful.Thank you guys.
1.How can I save my generated QR code image ?
2.How to set a limit for data entry ? (i mean to set a limit for the value to be entered in the code)
<!DOCTYPE html>
<html lang="en">
<head>
<title>QRCode generator </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
</head>
<body>
<input id="text" type="string" value={"foo":"35"}; style="width:80%" /><br />
<div id="qrcode" style="width:100px; height:100px; margin-top:20px;"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 150,
height: 150,
colorDark: "#1b1076",
colorLight: "#ffffff",
});
function makeCode() {
var elText = document.getElementById("text");
if (!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$("#text,#color").
on("blur", function() {
makeCode();
}).
on("keydown", function(e) {
if (e.keyCode == 13) {
makeCode();
}
});
</script>
</body>
I am using jqplot i want following answer.when i drag points then automatically change graph.any one have solution????
i want display only two points
But i get following output
this is my code anyone having solution
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.js"></script>
<script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.dragable.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<style>
#chart1{
margin-top:5em;
margin-left:1.5em;
}
</style>
</head>
<body>
<div class="example-plot" id="chart1"></div>
<div id="d1"></div>
<div id="d2"></div>
<script type="text/javascript">
var chartNumberTicks=8;
var s1;
$(document).ready(function () {
s1 = [['2014',1000000],['2015', 968526],['2016', 933905],['2017',895822],['2018', 853930],['2019', 807849],['2020', 757161],['2021', 701403],['2022', 640069],['2023', 572603],['2024', 498389],['2025',416754],['2026',326956],['2027',228178],['2028',119522],['2029',0]];
plotpoints();
$('#chart1').bind('jqplotDataClick',function (ev, seriesIndex, pointIndex, data) {
s1 = [['2014-02-04',900000],['2015-01-02', 858526],['2016-01-03', 833905],['2017-01-04',795822],['2018-01-01', 753930],['2019-01-02', 607849],['2020-01-03', 557161],['2021-01-04', 501403],['2022-01-01', 440069],['2023-01-02', 372603],['2024-01-03', 358389],['2025-01-03',316754],['2026-01-03',229996],['2027-01-03',208178],['2028-01-03',108178],['2029-01-03',0]];
plotpoints();
}
);
});
function plotpoints(){
$.jqplot.config.enablePlugins = true;
plot1 = $.jqplot('chart1',[s1],{
title: '',
axes: {enter code here
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%y'
},
numberTicks:chartNumberTicks
},
yaxis: {
tickOptions: {
formatString: '%d'
}, tickInterval: 100000,max:1200000,min:-100000
}
}
});
}
</script>
</body>
</html>
I want to implement a suggestion combobox which shows suggestions grabbed from my own web service (using restapi and jsonp). I found that ComboBox.store.root.children contains suggestion's data and wrote the code below. For the simplicity I use there array instead of getting suggestions from my service.
The problem with that is it looks like a hack and some features don't work properly. For instance, I can't get rid of 'Search' phrase in the list.
Can you suggest more elegant solution?
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.ComboBox");
</script>
<script type="text/javascript">
dojo.addOnLoad(function() {
var cb = dijit.byId("searchQuery");
var bufToClone = cb.store.root.children[0];
cb.store.root.children[0] = null;
var suggestions = ["AAA", "BBB", "CCC"];
dojo.connect(cb, "onKeyPress", function(event) {
var newval = cb.textbox.value;
dojo.forEach(suggestions, function(entry, i) {
var newVal = dojo.clone(bufToClone);
newVal.value = entry;
newVal.text = entry;
cb.store.root.children[i] = newVal;
});
});
});
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<select dojoType="dijit.form.ComboBox" id="searchQuery" name="searchQuery" class="sQ">
<option>
Search
</option>
</select>
</body>
Are you expecting this
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"/>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
</script>
<script type="text/javascript">
var idg = 4;
dojo.addOnLoad(function() {
str = new dojo.data.ItemFileWriteStore({
data:{
identifier:'id',
label:'name',
items:[
{id:1,name:'me'},
{id:2,name:'you'},
{id:3,name:'stackoverflow'}
]
}
})
new dijit.form.ComboBox({
store:str,
name:"searchQuery",
onChange:function(){
alert(dojo.query("[name=searchQuery]")[0].value)
}
},"searchQueryHld")
});
</script>
</head>
<body class=" claro ">
<span id="searchQueryHld"></span>
<span dojoType="dijit.form.Button">
Add one option
<script type="dojo/method" event="onClick">
str.newItem({id:idg,name:'me'+idg})
idg++;
</script>
</span>
</body>
</html>