How to increase line width of line-charts? - javascript

Is there any option available for increasing the line width of line-charts? I have tried to alter the stroke, but that does not seem to have any affect.
Here is how the line-chart is initialized:
paper.linechart(10, 30, 400, 240, [
[5, 10, 15, 20, 25, 30, 35]
], [
[15, 10, 20, 14, 13, 17, 9],
[7, 13, 17, 9, 10, 20, 14],
[5, 4, 14, 12, 20, 3, 16]
]);


Currently your only option would be to specify a higher width value in the options. From the documentation, under the width property of Paper.lineChart's options:
(width) controls the size of the plotted symbol. Also controls the thickness
of the line using a formula stroke-width=width/2.
To only control the line's stroke-width, you should be able to pass an empty symbol and the desired width value to the opts, e.g.:
paper.linechart(10, 30, 400, 240, [
[5, 10, 15, 20, 25, 30, 35]
], [
[15, 10, 20, 14, 13, 17, 9],
[7, 13, 17, 9, 10, 20, 14],
[5, 4, 14, 12, 20, 3, 16]
], {
symbol: '',
width: 5
});
(You can pass circle as a symbol, of course, but its size will be derived from the width value).

Related

Nested Arrays inside an object, searching with For loop, giving undefined result

I have editted to upload the complete code to run in any browser. All I'm getting is blanks here, but I am looking for every combination of numbers in groups of 3 from 1-80 (of which there are 82,160 combinations) and I want it to output an array of all of those results. However currently, the array is blank, but if I use my original code which includes a jQuery, it only gives me the last value, 78,79,and 80, over and over again 82160 times. It's giving me the right NUMBER of values, but it isn't filling those values correctly.
<!doctype html>
<html>
<head>
<title>Keno Tracker v2</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div {
margin: 0em auto;
padding: 00px;
background-color: #fff;
border-radius: 0em;
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
#media (max-width: 700px) {
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 0em;
}
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="mypanel" style="" id="Heading">Last Draw Result</div>
<div class="mypanel" style="all: unset" id="draw"></div><br>
<div class="mypanel" style="all: unset" id="numbs"></div><br>
<div class="mypanel" style="all: unset" id="bon"></div><br>
<div class="mypanel" style="" id="MostDue">Most Overdue Pairs</div>
<div class="mypanel" style="all: unset" id="mosdu"></div><br>
<div class="mypanel" style="" id="MostFreq">Most Frequent Pairs</div>
<div class="mypanel" style="all: unset" id="mosfq"></div><br>
<div class="mypanel" style="display:none" id="test"></div><br>
<div class="mypanel" style="display:none" id="test2"></div><br>
<script type=text/javascript>
var results = new Object();
results.Num = [12354, 12353, 12352, 12351, 12350, 12349, 12348, 12347, 12346, 12345]
results.Picks = [[1, 2, 4, 6, 8, 9, 13, 15, 38, 39, 22, 25, 65, 44, 66, 75, 80, 34, 12, 77], [5, 2, 4, 38, 39, 7, 8, 9, 18, 14, 23, 25, 65, 44, 66, 75, 80, 34, 12, 77], [1, 2, 3, 7, 9, 10, 14, 15, 26, 21, 63, 41, 67, 71, 38, 39, 79, 32, 17, 72], [11, 12, 14, 16, 18, 19, 13, 15, 26, 27, 61, 43, 62, 72, 79, 38, 39, 37, 10, 74], [1, 2, 4, 6, 8, 9, 13, 15, 22, 25, 65, 44, 66, 75, 80, 38, 39, 34, 12, 77], [2, 3, 5, 7, 9, 10, 14, 16, 23, 26, 67, 45, 66, 76, 1, 38, 39, 35, 13, 78], [10, 22, 19, 1, 8, 9, 37, 4, 11, 5, 20, 14, 3, 35, 38, 39, 41, 74, 57, 61], [1, 2, 4, 6, 8, 9, 13, 15, 22, 25, 65, 44, 66, 75, 80, 38, 39, 34, 12, 77], [1, 2, 4, 6, 8, 9, 13, 15, 22, 25, 65, 44, 66, 75, 80, 38, 39, 34, 12, 77], [1, 2, 4, 6, 8, 9, 13, 15, 22, 25, 65, 44, 66, 75, 80, 38, 39, 34, 12, 77]]
results.Bonus = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
var Totals = new Array();
var temp = new Object();
var drawsdone = 0
var Totsdone = 0
var displayd = 0
function getdraws() {
var results = new Object()
results.Num = [12354, 12353, 12352, 12351, 12350, 12349, 12348, 12347, 12346, 12345]
results.Picks = [[1, 2, 4, 6, 8, 9, 13, 15, 38, 39, 22, 25, 65, 44, 66, 75, 80, 34, 12, 77], [5, 2, 4, 38, 39, 7, 8, 9, 18, 14, 23, 25, 65, 44, 66, 75, 80, 34, 12, 77], [1, 2, 3, 7, 9, 10, 14, 15, 26, 21, 63, 41, 67, 71, 38, 39, 79, 32, 17, 72], [11, 12, 14, 16, 18, 19, 13, 15, 26, 27, 61, 43, 62, 72, 79, 38, 39, 37, 10, 74], [1, 2, 4, 6, 8, 9, 13, 15, 22, 25, 65, 44, 66, 75, 80, 38, 39, 34, 12, 77], [2, 3, 5, 7, 9, 10, 14, 16, 23, 26, 67, 45, 66, 76, 1, 38, 39, 35, 13, 78], [10, 22, 19, 1, 8, 9, 37, 4, 11, 5, 20, 14, 3, 35, 38, 39, 41, 74, 57, 61], [1, 2, 4, 6, 8, 9, 13, 15, 22, 25, 65, 44, 66, 75, 80, 38, 39, 34, 12, 77], [1, 2, 4, 6, 8, 9, 13, 15, 22, 25, 65, 44, 66, 75, 80, 38, 39, 34, 12, 77], [1, 2, 4, 6, 8, 9, 13, 15, 22, 25, 65, 44, 66, 75, 80, 38, 39, 34, 12, 77]]
results.Bonus = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
window.drawsdone = 1
}
function getTotals() {
if (Totsdone == 0){
for (a=1;a<81;a++){
for (b=1;b<81;b++){
if (a<b){
for (c=1;c<81;c++){
if (b<c){
temp.n1 = 0
temp.n2 = 0
temp.n3 = 0
temp.fq123 = 0
temp.sin123 = 0
temp.fq12 = 0
temp.sin12 = 0
temp.fq13 = 0
temp.sin13 = 0
temp.fq23 = 0
temp.sin23 = 0
temp.fq1 = 0
temp.sin1 = 0
temp.fq2 = 0
temp.sin2 = 0
temp.fq3 = 0
temp.sin3 = 0
for (i in results.Picks){
if (results.Picks[i].includes(a)){
if (results.Picks[i].includes(b)){
if (results.Picks[i].includes(c)){
if (temp.sin123 == 0){
temp.sin123 = results.Num[0]-results.Num[i]
}
temp.fq123++
temp.n1=a
temp.n2=b
temp.n3=c
}
}
}
}
Totals.push(temp)
}
}
}
}
}
window.Totsdone = 1
}
}
function display(){
if (displayd == 0){
console.log(Totals)
Totals = new Array()
window.displayd = 1
}
}
getdraws();
setInterval(function(){
getTotals()},2000)
setInterval(function(){
display()},3000)
</script>
</body>
</html>

Because your for-loop has a hardcoded second condition of i<20 and your Picks array only has 10 items, e.g. from the 11th item onwards you'll get undefined...
EDIT: Updated answer based on the updated question.
Still not sure about the entire logic of your code, but regarding
I am looking for every combination of numbers in groups of 3 from 1-80 (of which there are 82,160 combinations) and I want it to output an array of all of those results.
I think this might be a more elegant solution:
function* generateDraws(pool, size) {
if (size < 1) {
yield [];
} else {
for (let i = size; i <= pool; i++) {
for (let tail of generateDraws(i - 1, size - 1)) {
tail.push(i);
yield tail;
}
}
}
}
let draws = [];
for (let draw of generateDraws(80, 3)) {
draws.push(draw);
}
console.log(draws.length);
//console.log(draws); // will not work in stackoverflow snippet runner, does in the browser though!
When dealing with large iterations like that (as you say, it's 82160 combinations, e.g. 80!/(3!(80-3)!) things have a potential get quite slow, so using a generator function seems to be most appropriate as it will run with constant memory usage.
also be aware that generator functions are modern JS, so if you actually need to run this code client side and your users use old browser you need to transpile it with babel or typescript first OR generate the draws server-side and fetch them in your app from the server.
hope it helps at least a bit!

I was trouble with the bubble chart in high charts. i want to change grid line distance in x-axis

https://jsfiddle.net/Kondaldurgam/459tsdjq/1/
I'm tried to do change in grid line distance in x-axis but i won't get exactly answer in my output .when i was applying in my project code it's not working properly
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 'Highcharts Bubbles'
},
xAxis: {
gridLineWidth: 1,
},
yAxis: {
startOnTick: false,
endOnTick: false
},
series: [{
data: [
[9, 81, 63],
[98, 5, 89],
[51, 50, 73],
[41, 22, 14],
[58, 24, 20],
[78, 37, 34],
[55, 56, 53],
[18, 45, 70],
[42, 44, 28],
[3, 52, 59],
[31, 18, 97],
[79, 91, 63],
[93, 23, 23],
[44, 83, 22]
]
},]
});

Adjust panel size bootstrap

I'm using circosJS (d3.js library for visualisation. This is my sample code. I'm not able to adjust the visualisation inside the bootstrap panel-body. I've set max-height to adjust panel size, but it's not taking effect...
FIDDLE LINK
var layout_data = [{
"len": 31,
"color": "#8dd3c7",
"label": "January",
"id": "january"
}, {
"len": 28,
"color": "#ffffb3",
"label": "February",
"id": "february"
}, {
"len": 31,
"color": "#bebada",
"label": "March",
"id": "march"
}, {
"len": 30,
"color": "#fb8072",
"label": "April",
"id": "april"
}, {
"len": 31,
"color": "#80b1d3",
"label": "May",
"id": "may"
}, {
"len": 30,
"color": "#fdb462",
"label": "June",
"id": "june"
}, {
"len": 31,
"color": "#b3de69",
"label": "July",
"id": "july"
}, {
"len": 31,
"color": "#fccde5",
"label": "August",
"id": "august"
}, {
"len": 30,
"color": "#d9d9d9",
"label": "September",
"id": "september"
}, {
"len": 31,
"color": "#bc80bd",
"label": "October",
"id": "october"
}, {
"len": 30,
"color": "#ccebc5",
"label": "November",
"id": "november"
}, {
"len": 31,
"color": "#ffed6f",
"label": "December",
"id": "december"
}];
var heatmap = [
['january', 0, 1, 1368001],
['january', 1, 2, 1458583],
['january', 2, 3, 1481633],
['january', 3, 4, 1408424],
['january', 4, 5, 1400597],
['january', 5, 6, 1548933],
['january', 6, 7, 1537059],
['january', 7, 8, 1517383],
['january', 8, 9, 1544359],
['january', 9, 10, 1580460],
['january', 10, 11, 1440710],
['january', 11, 12, 1417824],
['january', 12, 13, 1597834],
['january', 13, 14, 1666670],
['january', 14, 15, 1707785],
['january', 15, 16, 1656905],
['january', 16, 17, 1620539],
['january', 17, 18, 1487228],
['january', 18, 19, 1418230],
['january', 19, 20, 1666497],
['january', 20, 21, 1739178],
['january', 21, 22, 1755254],
['january', 22, 23, 1732520],
['january', 23, 24, 1702975],
['january', 24, 25, 1546438],
['january', 25, 26, 1454228],
['january', 26, 27, 1684766],
['january', 27, 28, 1759669],
['january', 28, 29, 1764844],
['january', 29, 30, 1737754],
['january', 30, 31, 1749857],
['february', 0, 1, 1577419],
['february', 1, 2, 1509311],
['february', 2, 3, 1688266],
['february', 3, 4, 1690517],
['february', 4, 5, 1719390],
['february', 5, 6, 1693426],
['february', 6, 7, 1613806],
['february', 7, 8, 1521449],
['february', 8, 9, 1473617],
['february', 9, 10, 1632787],
['february', 10, 11, 1698088],
['february', 11, 12, 1702137],
['february', 12, 13, 1690878],
['february', 13, 14, 1661660],
['february', 14, 15, 1445139],
['february', 15, 16, 1392075],
['february', 16, 17, 1565855],
['february', 17, 18, 1622609],
['february', 18, 19, 1593628],
['february', 19, 20, 1564282],
['february', 20, 21, 1569010],
['february', 21, 22, 1458216],
['february', 22, 23, 1338981],
['february', 23, 24, 1495727],
['february', 24, 25, 1554400],
['february', 25, 26, 1574841],
['february', 26, 27, 1643072],
['february', 27, 28, 1644590],
['march', 0, 1, 1500834],
['march', 1, 2, 1424820],
['march', 2, 3, 1607011],
['march', 3, 4, 1615301],
['march', 4, 5, 1559021],
['march', 5, 6, 1547753],
['march', 6, 7, 1508006],
['march', 7, 8, 1309583],
['march', 8, 9, 1189917],
['march', 9, 10, 1365881],
['march', 10, 11, 1403679],
['march', 11, 12, 1403001],
['march', 12, 13, 1397280],
['march', 13, 14, 1367524],
['march', 14, 15, 1251964],
['march', 15, 16, 1159217],
['march', 16, 17, 1334292],
['march', 17, 18, 1391104],
['march', 18, 19, 1366559],
['march', 19, 20, 1342872],
['march', 20, 21, 1327773],
['march', 21, 22, 1268340],
['march', 22, 23, 1276517],
['march', 23, 24, 1467731],
['march', 24, 25, 1503009],
['march', 25, 26, 1496469],
['march', 26, 27, 1500094],
['march', 27, 28, 1450254],
['march', 28, 29, 1240603],
['march', 29, 30, 1086657],
['march', 30, 31, 1282324],
['april', 0, 1, 1283014],
['april', 1, 2, 1270569],
['april', 2, 3, 1293570],
['april', 3, 4, 1293439],
['april', 4, 5, 1150461],
['april', 5, 6, 1050257],
['april', 6, 7, 1209470],
['april', 7, 8, 1260725],
['april', 8, 9, 1285887],
['april', 9, 10, 1266011],
['april', 10, 11, 1234722],
['april', 11, 12, 1100005],
['april', 12, 13, 1034963],
['april', 13, 14, 1221402],
['april', 14, 15, 1265036],
['april', 15, 16, 1279159],
['april', 16, 17, 1266882],
['april', 17, 18, 1241239],
['april', 18, 19, 1153081],
['april', 19, 20, 1082812],
['april', 20, 21, 1084284],
['april', 21, 22, 1245400],
['april', 22, 23, 1248887],
['april', 23, 24, 1235617],
['april', 24, 25, 1229560],
['april', 25, 26, 1117336],
['april', 26, 27, 1074233],
['april', 27, 28, 1249024],
['april', 28, 29, 1273337],
['april', 29, 30, 1246730],
['may', 0, 1, 1036144],
['may', 1, 2, 1156135],
['may', 2, 3, 1106555],
['may', 3, 4, 1041413],
['may', 4, 5, 1182786],
['may', 5, 6, 1192434],
['may', 6, 7, 1193624],
['may', 7, 8, 1047831],
['may', 8, 9, 1106669],
['may', 9, 10, 1043170],
['may', 10, 11, 1000001],
['may', 11, 12, 1205405],
['may', 12, 13, 1247394],
['may', 13, 14, 1238560],
['may', 14, 15, 1223267],
['may', 15, 16, 1199465],
['may', 16, 17, 1040418],
['may', 17, 18, 952650],
['may', 18, 19, 1126219],
['may', 19, 20, 1155800],
['may', 20, 21, 1173902],
['may', 21, 22, 1167218],
['may', 22, 23, 1160702],
['may', 23, 24, 1034886],
['may', 24, 25, 966509],
['may', 25, 26, 1156691],
['may', 26, 27, 1194054],
['may', 27, 28, 1190877],
['may', 28, 29, 1016149],
['may', 29, 30, 1068529],
['may', 30, 31, 993302],
['june', 0, 1, 935590],
['june', 1, 2, 1119046],
['june', 2, 3, 1150676],
['june', 3, 4, 1169570],
['june', 4, 5, 1162795],
['june', 5, 6, 1147372],
['june', 6, 7, 1004244],
['june', 7, 8, 921713],
['june', 8, 9, 968196],
['june', 9, 10, 1140341],
['june', 10, 11, 1152976],
['june', 11, 12, 1165844],
['june', 12, 13, 1154469],
['june', 13, 14, 999352],
['june', 14, 15, 917310],
['june', 15, 16, 1106649],
['june', 16, 17, 1141077],
['june', 17, 18, 1143086],
['june', 18, 19, 1149995],
['june', 19, 20, 1141059],
['june', 20, 21, 1008542],
['june', 21, 22, 939065],
['june', 22, 23, 1129289],
['june', 23, 24, 1161838],
['june', 24, 25, 1158130],
['june', 25, 26, 1159204],
['june', 26, 27, 1146093],
['june', 27, 28, 1009897],
['june', 28, 29, 928706],
['june', 29, 30, 1103970],
['july', 0, 1, 1143862],
['july', 1, 2, 1150514],
['july', 2, 3, 1167512],
['july', 3, 4, 1150024],
['july', 4, 5, 1008307],
['july', 5, 6, 934687],
['july', 6, 7, 1106666],
['july', 7, 8, 1143473],
['july', 8, 9, 1154196],
['july', 9, 10, 1167145],
['july', 10, 11, 1151100],
['july', 11, 12, 1006581],
['july', 12, 13, 930137],
['july', 13, 14, 941594],
['july', 14, 15, 1126558],
['july', 15, 16, 1166553],
['july', 16, 17, 1187503],
['july', 17, 18, 1182767],
['july', 18, 19, 1030447],
['july', 19, 20, 934780],
['july', 20, 21, 1107315],
['july', 21, 22, 1147785],
['july', 22, 23, 1161849],
['july', 23, 24, 1169049],
['july', 24, 25, 1131515],
['july', 25, 26, 993075],
['july', 26, 27, 925852],
['july', 27, 28, 1077760],
['july', 28, 29, 1095700],
['july', 29, 30, 1098378],
['july', 30, 31, 1096670],
['august', 0, 1, 1071402],
['august', 1, 2, 951503],
['august', 2, 3, 878472],
['august', 3, 4, 996356],
['august', 4, 5, 1016188],
['august', 5, 6, 1022237],
['august', 6, 7, 1027197],
['august', 7, 8, 1024299],
['august', 8, 9, 922671],
['august', 9, 10, 872742],
['august', 10, 11, 974684],
['august', 11, 12, 988100],
['august', 12, 13, 988993],
['august', 13, 14, 981883],
['august', 14, 15, 893681],
['august', 15, 16, 894506],
['august', 16, 17, 858478],
['august', 17, 18, 991784],
['august', 18, 19, 1022889],
['august', 19, 20, 1031167],
['august', 20, 21, 1038878],
['august', 21, 22, 1042880],
['august', 22, 23, 951127],
['august', 23, 24, 896613],
['august', 24, 25, 1078972],
['august', 25, 26, 1123401],
['august', 26, 27, 1122117],
['august', 27, 28, 1129891],
['august', 28, 29, 1114953],
['august', 29, 30, 986620],
['august', 30, 31, 921040],
['september', 0, 1, 1103673],
['september', 1, 2, 1143909],
['september', 2, 3, 1149438],
['september', 3, 4, 1157452],
['september', 4, 5, 1149054],
['september', 5, 6, 1010272],
['september', 6, 7, 942892],
['september', 7, 8, 1135215],
['september', 8, 9, 1163859],
['september', 9, 10, 1165798],
['september', 10, 11, 1163321],
['september', 11, 12, 1142868],
['september', 12, 13, 1007248],
['september', 13, 14, 938456],
['september', 14, 15, 1129580],
['september', 15, 16, 1160361],
['september', 16, 17, 1166669],
['september', 17, 18, 1166135],
['september', 18, 19, 1155657],
['september', 19, 20, 1013339],
['september', 20, 21, 939303],
['september', 21, 22, 1115789],
['september', 22, 23, 1155790],
['september', 23, 24, 1175290],
['september', 24, 25, 1171100],
['september', 25, 26, 1156096],
['september', 26, 27, 1016313],
['september', 27, 28, 946015],
['september', 28, 29, 1140783],
['september', 29, 30, 1171328],
['october', 0, 1, 1169047],
['october', 1, 2, 1166792],
['october', 2, 3, 1151218],
['october', 3, 4, 1013653],
['october', 4, 5, 961694],
['october', 5, 6, 1173529],
['october', 6, 7, 1208669],
['october', 7, 8, 1218388],
['october', 8, 9, 1203597],
['october', 9, 10, 1185802],
['october', 10, 11, 1047404],
['october', 11, 12, 1002951],
['october', 12, 13, 1176808],
['october', 13, 14, 1209924],
['october', 14, 15, 1220987],
['october', 15, 16, 1220765],
['october', 16, 17, 1193122],
['october', 17, 18, 1042063],
['october', 18, 19, 960302],
['october', 19, 20, 1151448],
['october', 20, 21, 1213130],
['october', 21, 22, 1255712],
['october', 22, 23, 1282461],
['october', 23, 24, 1267047],
['october', 24, 25, 1115921],
['october', 25, 26, 1086010],
['october', 26, 27, 1232889],
['october', 27, 28, 1282237],
['october', 28, 29, 1278848],
['october', 29, 30, 1258570],
['october', 30, 31, 1225435],
['november', 0, 1, 1072746],
['november', 1, 2, 1049955],
['november', 2, 3, 1272203],
['november', 3, 4, 1340860],
['november', 4, 5, 1408998],
['november', 5, 6, 1451479],
['november', 6, 7, 1437583],
['november', 7, 8, 1274988],
['november', 8, 9, 1210274],
['november', 9, 10, 1327675],
['november', 10, 11, 1246598],
['november', 11, 12, 1396790],
['november', 12, 13, 1432484],
['november', 13, 14, 1422153],
['november', 14, 15, 1275193],
['november', 15, 16, 1234596],
['november', 16, 17, 1453194],
['november', 17, 18, 1484727],
['november', 18, 19, 1514655],
['november', 19, 20, 1511929],
['november', 20, 21, 1462551],
['november', 21, 22, 1294247],
['november', 22, 23, 1202440],
['november', 23, 24, 1404219],
['november', 24, 25, 1459282],
['november', 25, 26, 1453893],
['november', 26, 27, 1454444],
['november', 27, 28, 1426951],
['november', 28, 29, 1294661],
['november', 29, 30, 1287777],
['december', 0, 1, 1549272],
['december', 1, 2, 1633784],
['december', 2, 3, 1684781],
['december', 3, 4, 1689624],
['december', 4, 5, 1666695],
['december', 5, 6, 1545527],
['december', 6, 7, 1523315],
['december', 7, 8, 1683824],
['december', 8, 9, 1754569],
['december', 9, 10, 1734975],
['december', 10, 11, 1669997],
['december', 11, 12, 1641086],
['december', 12, 13, 1489854],
['december', 13, 14, 1474692],
['december', 14, 15, 1633309],
['december', 15, 16, 1607862],
['december', 16, 17, 1632516],
['december', 17, 18, 1536016],
['december', 18, 19, 1490975],
['december', 19, 20, 1394406],
['december', 20, 21, 1387549],
['december', 21, 22, 1538557],
['december', 22, 23, 1550730],
['december', 23, 24, 1469007],
['december', 24, 25, 1314160],
['december', 25, 26, 1499708],
['december', 26, 27, 1508048],
['december', 27, 28, 1570757],
['december', 28, 29, 1792749],
['december', 29, 30, 1770200],
['december', 30, 31, 1721354]
]
days_off = [
['january', 0, 1, 2],
['january', 1, 2, 0],
['january', 2, 3, 0],
['january', 3, 4, 1],
['january', 4, 5, 1],
['january', 5, 6, 0],
['january', 6, 7, 0],
['january', 7, 8, 0],
['january', 8, 9, 0],
['january', 9, 10, 0],
['january', 10, 11, 1],
['january', 11, 12, 1],
['january', 12, 13, 0],
['january', 13, 14, 0],
['january', 14, 15, 0],
['january', 15, 16, 0],
['january', 16, 17, 0],
['january', 17, 18, 1],
['january', 18, 19, 1],
['january', 19, 20, 0],
['january', 20, 21, 0],
['january', 21, 22, 0],
['january', 22, 23, 0],
['january', 23, 24, 0],
['january', 24, 25, 1],
['january', 25, 26, 1],
['january', 26, 27, 0],
['january', 27, 28, 0],
['january', 28, 29, 0],
['january', 29, 30, 0],
['january', 30, 31, 0],
['february', 0, 1, 1],
['february', 1, 2, 1],
['february', 2, 3, 0],
['february', 3, 4, 0],
['february', 4, 5, 0],
['february', 5, 6, 0],
['february', 6, 7, 0],
['february', 7, 8, 1],
['february', 8, 9, 1],
['february', 9, 10, 0],
['february', 10, 11, 0],
['february', 11, 12, 0],
['february', 12, 13, 0],
['february', 13, 14, 0],
['february', 14, 15, 1],
['february', 15, 16, 1],
['february', 16, 17, 0],
['february', 17, 18, 0],
['february', 18, 19, 0],
['february', 19, 20, 0],
['february', 20, 21, 0],
['february', 21, 22, 1],
['february', 22, 23, 1],
['february', 23, 24, 0],
['february', 24, 25, 0],
['february', 25, 26, 0],
['february', 26, 27, 0],
['february', 27, 28, 0],
['march', 0, 1, 1],
['march', 1, 2, 1],
['march', 2, 3, 0],
['march', 3, 4, 0],
['march', 4, 5, 0],
['march', 5, 6, 0],
['march', 6, 7, 0],
['march', 7, 8, 1],
['march', 8, 9, 1],
['march', 9, 10, 0],
['march', 10, 11, 0],
['march', 11, 12, 0],
['march', 12, 13, 0],
['march', 13, 14, 0],
['march', 14, 15, 1],
['march', 15, 16, 1],
['march', 16, 17, 0],
['march', 17, 18, 0],
['march', 18, 19, 0],
['march', 19, 20, 0],
['march', 20, 21, 0],
['march', 21, 22, 1],
['march', 22, 23, 1],
['march', 23, 24, 0],
['march', 24, 25, 0],
['march', 25, 26, 0],
['march', 26, 27, 0],
['march', 27, 28, 0],
['march', 28, 29, 1],
['march', 29, 30, 1],
['march', 30, 31, 0],
['april', 0, 1, 0],
['april', 1, 2, 0],
['april', 2, 3, 0],
['april', 3, 4, 0],
['april', 4, 5, 1],
['april', 5, 6, 1],
['april', 6, 7, 0],
['april', 7, 8, 0],
['april', 8, 9, 0],
['april', 9, 10, 0],
['april', 10, 11, 0],
['april', 11, 12, 1],
['april', 12, 13, 1],
['april', 13, 14, 0],
['april', 14, 15, 0],
['april', 15, 16, 0],
['april', 16, 17, 0],
['april', 17, 18, 0],
['april', 18, 19, 1],
['april', 19, 20, 1],
['april', 20, 21, 2],
['april', 21, 22, 0],
['april', 22, 23, 0],
['april', 23, 24, 0],
['april', 24, 25, 0],
['april', 25, 26, 1],
['april', 26, 27, 1],
['april', 27, 28, 0],
['april', 28, 29, 0],
['april', 29, 30, 0],
['may', 0, 1, 2],
['may', 1, 2, 0],
['may', 2, 3, 1],
['may', 3, 4, 1],
['may', 4, 5, 0],
['may', 5, 6, 0],
['may', 6, 7, 0],
['may', 7, 8, 2],
['may', 8, 9, 0],
['may', 9, 10, 1],
['may', 10, 11, 1],
['may', 11, 12, 0],
['may', 12, 13, 0],
['may', 13, 14, 0],
['may', 14, 15, 0],
['may', 15, 16, 0],
['may', 16, 17, 1],
['may', 17, 18, 1],
['may', 18, 19, 0],
['may', 19, 20, 0],
['may', 20, 21, 0],
['may', 21, 22, 0],
['may', 22, 23, 0],
['may', 23, 24, 1],
['may', 24, 25, 1],
['may', 25, 26, 0],
['may', 26, 27, 0],
['may', 27, 28, 0],
['may', 28, 29, 2],
['may', 29, 30, 0],
['may', 30, 31, 1],
['june', 0, 1, 1],
['june', 1, 2, 0],
['june', 2, 3, 0],
['june', 3, 4, 0],
['june', 4, 5, 0],
['june', 5, 6, 0],
['june', 6, 7, 1],
['june', 7, 8, 1],
['june', 8, 9, 2],
['june', 9, 10, 0],
['june', 10, 11, 0],
['june', 11, 12, 0],
['june', 12, 13, 0],
['june', 13, 14, 1],
['june', 14, 15, 1],
['june', 15, 16, 0],
['june', 16, 17, 0],
['june', 17, 18, 0],
['june', 18, 19, 0],
['june', 19, 20, 0],
['june', 20, 21, 1],
['june', 21, 22, 1],
['june', 22, 23, 0],
['june', 23, 24, 0],
['june', 24, 25, 0],
['june', 25, 26, 0],
['june', 26, 27, 0],
['june', 27, 28, 1],
['june', 28, 29, 1],
['june', 29, 30, 0],
['july', 0, 1, 0],
['july', 1, 2, 0],
['july', 2, 3, 0],
['july', 3, 4, 0],
['july', 4, 5, 1],
['july', 5, 6, 1],
['july', 6, 7, 0],
['july', 7, 8, 0],
['july', 8, 9, 0],
['july', 9, 10, 0],
['july', 10, 11, 0],
['july', 11, 12, 1],
['july', 12, 13, 1],
['july', 13, 14, 2],
['july', 14, 15, 0],
['july', 15, 16, 0],
['july', 16, 17, 0],
['july', 17, 18, 0],
['july', 18, 19, 1],
['july', 19, 20, 1],
['july', 20, 21, 0],
['july', 21, 22, 0],
['july', 22, 23, 0],
['july', 23, 24, 0],
['july', 24, 25, 0],
['july', 25, 26, 1],
['july', 26, 27, 1],
['july', 27, 28, 0],
['july', 28, 29, 0],
['july', 29, 30, 0],
['july', 30, 31, 0],
['august', 0, 1, 0],
['august', 1, 2, 1],
['august', 2, 3, 1],
['august', 3, 4, 0],
['august', 4, 5, 0],
['august', 5, 6, 0],
['august', 6, 7, 0],
['august', 7, 8, 0],
['august', 8, 9, 1],
['august', 9, 10, 1],
['august', 10, 11, 0],
['august', 11, 12, 0],
['august', 12, 13, 0],
['august', 13, 14, 0],
['august', 14, 15, 2],
['august', 15, 16, 1],
['august', 16, 17, 1],
['august', 17, 18, 0],
['august', 18, 19, 0],
['august', 19, 20, 0],
['august', 20, 21, 0],
['august', 21, 22, 0],
['august', 22, 23, 1],
['august', 23, 24, 1],
['august', 24, 25, 0],
['august', 25, 26, 0],
['august', 26, 27, 0],
['august', 27, 28, 0],
['august', 28, 29, 0],
['august', 29, 30, 1],
['august', 30, 31, 1],
['september', 0, 1, 0],
['september', 1, 2, 0],
['september', 2, 3, 0],
['september', 3, 4, 0],
['september', 4, 5, 0],
['september', 5, 6, 1],
['september', 6, 7, 1],
['september', 7, 8, 0],
['september', 8, 9, 0],
['september', 9, 10, 0],
['september', 10, 11, 0],
['september', 11, 12, 0],
['september', 12, 13, 1],
['september', 13, 14, 1],
['september', 14, 15, 0],
['september', 15, 16, 0],
['september', 16, 17, 0],
['september', 17, 18, 0],
['september', 18, 19, 0],
['september', 19, 20, 1],
['september', 20, 21, 1],
['september', 21, 22, 0],
['september', 22, 23, 0],
['september', 23, 24, 0],
['september', 24, 25, 0],
['september', 25, 26, 0],
['september', 26, 27, 1],
['september', 27, 28, 1],
['september', 28, 29, 0],
['september', 29, 30, 0],
['october', 0, 1, 0],
['october', 1, 2, 0],
['october', 2, 3, 0],
['october', 3, 4, 1],
['october', 4, 5, 1],
['october', 5, 6, 0],
['october', 6, 7, 0],
['october', 7, 8, 0],
['october', 8, 9, 0],
['october', 9, 10, 0],
['october', 10, 11, 1],
['october', 11, 12, 1],
['october', 12, 13, 0],
['october', 13, 14, 0],
['october', 14, 15, 0],
['october', 15, 16, 0],
['october', 16, 17, 0],
['october', 17, 18, 1],
['october', 18, 19, 1],
['october', 19, 20, 0],
['october', 20, 21, 0],
['october', 21, 22, 0],
['october', 22, 23, 0],
['october', 23, 24, 0],
['october', 24, 25, 1],
['october', 25, 26, 1],
['october', 26, 27, 0],
['october', 27, 28, 0],
['october', 28, 29, 0],
['october', 29, 30, 0],
['october', 30, 31, 0],
['november', 0, 1, 1],
['november', 1, 2, 1],
['november', 2, 3, 0],
['november', 3, 4, 0],
['november', 4, 5, 0],
['november', 5, 6, 0],
['november', 6, 7, 0],
['november', 7, 8, 1],
['november', 8, 9, 1],
['november', 9, 10, 0],
['november', 10, 11, 2],
['november', 11, 12, 0],
['november', 12, 13, 0],
['november', 13, 14, 0],
['november', 14, 15, 1],
['november', 15, 16, 1],
['november', 16, 17, 0],
['november', 17, 18, 0],
['november', 18, 19, 0],
['november', 19, 20, 0],
['november', 20, 21, 0],
['november', 21, 22, 1],
['november', 22, 23, 1],
['november', 23, 24, 0],
['november', 24, 25, 0],
['november', 25, 26, 0],
['november', 26, 27, 0],
['november', 27, 28, 0],
['november', 28, 29, 1],
['november', 29, 30, 1],
['december', 0, 1, 0],
['december', 1, 2, 0],
['december', 2, 3, 0],
['december', 3, 4, 0],
['december', 4, 5, 0],
['december', 5, 6, 1],
['december', 6, 7, 1],
['december', 7, 8, 0],
['december', 8, 9, 0],
['december', 9, 10, 0],
['december', 10, 11, 0],
['december', 11, 12, 0],
['december', 12, 13, 1],
['december', 13, 14, 1],
['december', 14, 15, 0],
['december', 15, 16, 0],
['december', 16, 17, 0],
['december', 17, 18, 0],
['december', 18, 19, 0],
['december', 19, 20, 1],
['december', 20, 21, 1],
['december', 21, 22, 0],
['december', 22, 23, 0],
['december', 23, 24, 0],
['december', 24, 25, 2],
['december', 25, 26, 0],
['december', 26, 27, 1],
['december', 27, 28, 1],
['december', 28, 29, 0],
['december', 29, 30, 0],
['december', 30, 31, 0]
]
var circos = new circosJS({
container: '#chart'
});
circos
.layout({
ticks: {
display: false
},
},
layout_data
)
.heatmap('h1', {
innerRadius: 180,
outerRadius: 240,
logScale: false,
colorPalette: 'YlOrRd'
}, heatmap)
.heatmap('h2', {
innerRadius: 170,
outerRadius: 179,
logScale: false,
colorPalette: 'Blues'
}, days_off)
.render();
<script type="text/javascript" src="//d3js.org/d3.v3.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="https://cdn.rawgit.com/nicgirault/circosJS/master/dist/circosJS.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/nicgirault/circosJS/master/dist/colorBrewer.css">
<svg id='chart'></svg>

I was able to get the chart inside the panel body with center aligned. Please check the the codepen link the chart is coming inside the panel body without overflowing panel body.
CODEPEN LINK
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-long-arrow-right fa-fw"></i> Host</h3>
</div>
<div class="panel-body centered">
<svg id='chart' style="display:block; margin:auto;"></svg>
</div>
</div>
</div>
</div>
</div>

How to create custom hAxis labels in Google Charts?

I am using Google Charts for a simple Area Chart. I have many points to draw, i would like to set the interval between them. At the moment there is a list 1,2,3,4,5,6,7 etc
I would like to show all points but with custom hAxis labels, like: 0 5 10 15 20 etc
The code is:
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Day', 'Visit', 'Applic.'],
['1', 19, 1],
['2', 100, 9],
['3', 103, 18],
['4', 42, 8],
['5', 34, 2],
['6', 63, 9],
['7', 35, 7],
['8', 427, 51],
['9', 314, 38],
['10', 71, 4],
['11', 27, 0],
['12', 25, 0],
['13', 78, 0],
['14', 54, 0],
['15', 60, 0],
['16', 47, 0],
['17', 29, 0],
['18', 16, 0],
['19', 10, 0],
['20', 26, 0],
['21', 200, 0],
['22', 255, 0],
['23', 160, 0],
['24', 30, 0],
['25', 35, 0],
['26', 9, 0],
]);
var options = {
vAxis: {minValue: 0},
hAxis: {
title: 'Days',
},
pointSize: 8,
colors: ['#9EC653', '#475825'],
chartArea: {
left: 40,
top: 40,
width: 600,
height: 250
},
legend: {position: 'top', textStyle: {fontSize: 14}, alignment: 'center'},
backgroundColor: '#f7f6f4',
};
var chart = new google.visualization.AreaChart(document.getElementById('visits'));
chart.draw(data, options);
}
</script>
And the result is:
The horizontal labels represent all points, I need all of them, but showing specific horizontal labels. How can i set specific interval?
Thanks

This will be much easier to achieve if you enter your axis values as numbers instead of strings:
var data = google.visualization.arrayToDataTable([
['Day', 'Visit', 'Applic.'],
[1, 19, 1],
[2, 100, 9],
[3, 103, 18],
[4, 42, 8],
[5, 34, 2],
[6, 63, 9],
[7, 35, 7],
[8, 427, 51],
[9, 314, 38],
[10, 71, 4],
[11, 27, 0],
[12, 25, 0],
[13, 78, 0],
[14, 54, 0],
[15, 60, 0],
[16, 47, 0],
[17, 29, 0],
[18, 16, 0],
[19, 10, 0],
[20, 26, 0],
[21, 200, 0],
[22, 255, 0],
[23, 160, 0],
[24, 30, 0],
[25, 35, 0],
[26, 9, 0]
]);
You can then specify the hAxis.ticks option to tell the chart which values should be labeled on the axis:
hAxis: {
title: 'Days',
ticks: [0, 5, 10, 15, 25]
}

fail to make xAxis on Highstock chart to go before

I have a jsFiddle here to show my problem,
I want my chart to start on xAxis two month before than it has data on it,
how can I show from two month before?
'xAxis': {
'min': Date.UTC(2013, 4, 24, 16, 44, 10),
'startOnTick' : false,
'startOfWeek': 6,
'dateTimeLabelFormats': {
'week': '%a,<br/>%e. %b'
}
},

start the data from the date you want to show in chart.
if there is no data give the y value as null
in your case you want the min for xAxis to be Date.UTC(2012, 1, 24, 16, 44, 10)
so start data from
data: [
[Date.UTC(2012, 1, 24, 16, 44, 10), null],
[Date.UTC(2013, 6, 24, 16, 44, 10), 336000.],
[Date.UTC(2013, 6, 27, 13, 57, 36), 393500.]
]
this will make the xAxis plot from the day you want.
I've updated your fiddle here

Categories

Resources