Related
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 am drawing an image on canvas via drawImage method, it draw the image but when any event is called is become blank and disappear. I tried different ways but not success. I want to show the image on canvas and not disappear, Because I convas this canvas to dataUrl which become blank.
My working Link
Please anyone who know please guide me where i am going wrong.
Below is my code.
<!DOCTYPE html>
<html>
<head>
<title>Canvas.dataURL tainted(polluted) Issue</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://technology-architects.com/daulat/customizer_assets/js/bootstrap-slider.js"></script>
<script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/js/jquery.liteuploader.js"></script>
<script type="text/javascript" src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>
<script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/js/custom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://technology-architects.com/daulat/customizer_assets/cartjs/cart.js"></script>
<script src="https://technology-architects.com/daulat/customizer_assets/fabric-js/custom/fabricExtensions.js"></script>
<script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/bgrins-spectrum/spectrum.js"></script>
<script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/js/fabric.curvedText.js"></script>
</head>
<body>
<style>
.canvas-container{display:inline-block;vertical-align:middle;}
</style>
<canvas id="canvas" height=758 width=497 style="border:1px solid lightgrey;display:inline-block;"></canvas>
<img id="curveImg" src="http://production.technology-architects.com/doulat/curtains_new/3d_view/images/sample.png" alt="" style="display:inline-block;vertical-align:middle;">
<button type="button" id="clickme">Click Me!</button>
<script>
var canvas = new fabric.Canvas('canvas');
var offsetY=[0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0]
var ctx = canvas.getContext("2d");
var immg = 'http://production.technology-architects.com/doulat/curtains_new/3d_view/images/sample.png';
fabric.util.loadImage(immg, function(img) {
for(var x=0;x<offsetY.length;x++){
ctx.drawImage(img,
// clip 1 pixel wide slice from the image
x,0,1,img.height,
// draw that slice with a y-offset
x,offsetY[x],1,img.height
);
}
},null, {crossOrigin:'anonymous'});
canvas.renderAll();
$(document).on('click','#clickme',function(){
var imagedatafinal = canvas.toDataURL('image/png');
console.log(imagedatafinal);
$('#curveImg').attr('src',imagedatafinal);
var imgdatafinal = imagedatafinal.replace(/^data:image\/(png|jpg);base64,/, "");
//ajax call to save image inside folder
$.ajax({
url: '../save_image.php',
data: {
imgdata:imgdatafinal
},
type: 'post',
success: function (response) {
$('#curveImg').attr('src',response);
console.log(response);
}
});
});
</script>
</body>
</html>
Check this Fiddle.
You are getting this problem because you are drawing that in context and not adding that to canvas object. So after drawing in context you get that context data using ctx.getImageData(0, 0, img.width, img.height); After that create a canvas element and put that image datac.getContext('2d').putImageData(data, 0, 0); then create an fabricjs image object from that canvas image data.
*Crossorigin problem is there so fiddle not working, you can check this in your local server
Working fiddle
You have to add image on fabric canvas as below.
var imgbase64 = new fabric.Image(img, {})
canvas.add(imgbase64);
And then it will work. Just make sure to check this on your local server as here it will throw CROS error.
I've changed image src to get it work as getting CORS error from your sample.
var canvas = new fabric.Canvas('canvas');
var offsetY = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29, 29.5, 30, 30.1, 30.2, 30.3, 30.4, 30.5, 30.6, 30.7, 30.8, 30.9, 30, 29.5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0]
var ctx = canvas.getContext("2d");
var immg = 'http://i.imgur.com/3tU4Vig.jpg';
var img = new Image();
img.crossOrigin = "anonymous";
img.src = immg;
img.onload = function() {
var imgbase64 = new fabric.Image(img, {
width: 400,
height: 500
})
canvas.add(imgbase64);
canvas.deactivateAll().renderAll();
}
canvas.renderAll();
$(document).on('click', '#clickme', function() {
var imagedatafinal = canvas.toDataURL('image/png');
console.log(imagedatafinal);
$('#curveImg').attr('src', imagedatafinal);
var imgdatafinal = imagedatafinal.replace(/^data:image\/(png|jpg);base64,/, "");
//ajax call to save image inside folder
$.ajax({
url: '../save_image.php',
data: {
imgdata: imgdatafinal
},
type: 'post',
success: function(response) {
$('#curveImg').attr('src', response);
console.log(response);
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Canvas.dataURL tainted(polluted) Issue</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://technology-architects.com/daulat/customizer_assets/js/bootstrap-slider.js"></script>
<script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/js/jquery.liteuploader.js"></script>
<script type="text/javascript" src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>
<script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/js/custom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://technology-architects.com/daulat/customizer_assets/cartjs/cart.js"></script>
<script src="https://technology-architects.com/daulat/customizer_assets/fabric-js/custom/fabricExtensions.js"></script>
<script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/bgrins-spectrum/spectrum.js"></script>
<script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/js/fabric.curvedText.js"></script>
</head>
<body>
<style>
.canvas-container {
display: inline-block;
vertical-align: middle;
}
</style>
<canvas id="canvas" height=758 width=497 style="border:1px solid lightgrey;display:inline-block;"></canvas>
<img id="curveImg" alt="" style="display:inline-block;vertical-align:middle;">
<button type="button" id="clickme">Click Me!</button>
</body>
</html>
I'm trying to create a chart which shows prices for product from different shops. The problem is that it shows only the first value of every shop instead of all values (cca 10 for every shop).
The data is passed using JSON. Since it has to be multiline chart, I use StockChart.
Do you see where is the problem?
<script>
var lines = [];
var dataSets = [];
generateChartData();
function generateChartData() {
var google_chart_json = {"fotolab.sk": [[[2016, 12, 19, 20, 38], 338.36], [[2016, 12, 18, 20, 38], 341.82], [[2016, 12, 17, 20, 38], 382.92], [[2016, 12, 16, 20, 38], 384.24], [[2016, 12, 15, 20, 38], 393.16], [[2016, 12, 14, 20, 38], 319.6], [[2016, 12, 13, 20, 38], 329.64], [[2016, 12, 12, 20, 38], 300.1], [[2016, 12, 11, 20, 38], 324.66], [[2016, 12, 10, 20, 38], 377.9], [[2016, 12, 20, 18, 52], 359.0]], "hej.sk": [[[2016, 12, 19, 20, 38], 380.18], [[2016, 12, 18, 20, 38], 327.4], [[2016, 12, 17, 20, 38], 382.5], [[2016, 12, 16, 20, 38], 389.76], [[2016, 12, 15, 20, 38], 385.23], [[2016, 12, 14, 20, 38], 355.48], [[2016, 12, 13, 20, 38], 328.39], [[2016, 12, 12, 20, 38], 311.35], [[2016, 12, 11, 20, 38], 350.8], [[2016, 12, 10, 20, 38], 389.81], [[2016, 12, 20, 18, 52], 399.0]], "mall.sk": [[[2016, 12, 19, 20, 38], 341.9], [[2016, 12, 18, 20, 38], 319.2], [[2016, 12, 17, 20, 38], 360.81], [[2016, 12, 16, 20, 38], 315.76], [[2016, 12, 15, 20, 38], 347.37], [[2016, 12, 14, 20, 38], 353.97], [[2016, 12, 13, 20, 38], 300.64], [[2016, 12, 12, 20, 38], 302.87], [[2016, 12, 11, 20, 38], 308.8], [[2016, 12, 10, 20, 38], 351.25], [[2016, 12, 20, 18, 52], 399.0]], "shoppie.sk": [[[2016, 12, 19, 20, 38], 363.41], [[2016, 12, 18, 20, 38], 315.55], [[2016, 12, 17, 20, 38], 369.09], [[2016, 12, 16, 20, 38], 369.85], [[2016, 12, 15, 20, 38], 354.29], [[2016, 12, 14, 20, 38], 305.96], [[2016, 12, 13, 20, 38], 387.4], [[2016, 12, 12, 20, 38], 303.95], [[2016, 12, 11, 20, 38], 384.83], [[2016, 12, 10, 20, 38], 303.81], [[2016, 12, 20, 18, 52], 399.0]], "k24.sk": [[[2016, 12, 19, 20, 38], 329.87], [[2016, 12, 18, 20, 38], 349.04], [[2016, 12, 17, 20, 38], 317.51], [[2016, 12, 16, 20, 38], 386.28], [[2016, 12, 15, 20, 38], 371.44], [[2016, 12, 14, 20, 38], 321.24], [[2016, 12, 13, 20, 38], 391.55], [[2016, 12, 12, 20, 38], 372.62], [[2016, 12, 11, 20, 38], 383.1], [[2016, 12, 10, 20, 38], 337.88], [[2016, 12, 20, 18, 52], 310.58]], "ello24.com": [[[2016, 12, 19, 20, 38], 327.53], [[2016, 12, 18, 20, 38], 395.58], [[2016, 12, 17, 20, 38], 366.37], [[2016, 12, 16, 20, 38], 328.88], [[2016, 12, 15, 20, 38], 330.78], [[2016, 12, 14, 20, 38], 349.29], [[2016, 12, 13, 20, 38], 327.62], [[2016, 12, 12, 20, 38], 396.08], [[2016, 12, 11, 20, 38], 336.72], [[2016, 12, 10, 20, 38], 345.49], [[2016, 12, 20, 18, 52], 304.0]]};
var loopcounter = -1;
$.each(google_chart_json, function (key, val) {
var line = [];
loopcounter = loopcounter + 1;
$.each(val, function (_, scan) {
var year = scan[0][0];
var month = scan[0][1];
var day = scan[0][2];
var hour = scan[0][3];
var minute = scan[0][4];
var price = scan[1];
var data = {
'date': new Date(year, month - 1, day, hour, minute),
'value': price
};
line.push(data);
});
lines.push([key, line]);
});
console.log('LINES');
console.log(lines);
$.each(lines, function (_, name_line) {
var dict = {
'title': name_line[0],
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}],
"dataProvider": name_line[1],
"categoryField": "date"
};
dataSets.push(dict);
});
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "stock",
"theme": "light",
"dataSets": dataSets,
"panels": [{
"showCategoryAxis": false,
"title": "Value",
"percentHeight": 70,
"stockGraphs": [{
"id": "g1",
"valueField": "value",
"comparable": true,
"compareField": "value",
"balloonText": "[[title]]:<b>[[value]]</b>",
"compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
}],
"stockLegend": {
"periodValueTextComparing": "[[percents.value.close]]%",
"periodValueTextRegular": "[[value.close]]"
}
}],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"fullWidth": true,
"cursorAlpha": 0.1,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueLineAlpha": 0.5
},
"periodSelector": {
"position": "left",
"periods": [{
"period": "MM",
"selected": true,
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
}]
},
"dataSetSelector": {
"position": "left"
},
"export": {
"enabled": true
}
});
chart.panelsSettings.recalculateToPercents = "never";
</script>
AmCharts only supports data in date-ascending order so you have to sort your data accordingly. I added this after you loaded your line data, but prior to adding it to your lines array:
line.sort(function(lhs, rhs) {
return lhs.date.getTime() - rhs.date.getTime();
});
Demo below:
var lines = [];
var dataSets = [];
generateChartData();
function generateChartData() {
var google_chart_json = {"fotolab.sk": [[[2016, 12, 19, 20, 38], 338.36], [[2016, 12, 18, 20, 38], 341.82], [[2016, 12, 17, 20, 38], 382.92], [[2016, 12, 16, 20, 38], 384.24], [[2016, 12, 15, 20, 38], 393.16], [[2016, 12, 14, 20, 38], 319.6], [[2016, 12, 13, 20, 38], 329.64], [[2016, 12, 12, 20, 38], 300.1], [[2016, 12, 11, 20, 38], 324.66], [[2016, 12, 10, 20, 38], 377.9], [[2016, 12, 20, 18, 52], 359.0]], "hej.sk": [[[2016, 12, 19, 20, 38], 380.18], [[2016, 12, 18, 20, 38], 327.4], [[2016, 12, 17, 20, 38], 382.5], [[2016, 12, 16, 20, 38], 389.76], [[2016, 12, 15, 20, 38], 385.23], [[2016, 12, 14, 20, 38], 355.48], [[2016, 12, 13, 20, 38], 328.39], [[2016, 12, 12, 20, 38], 311.35], [[2016, 12, 11, 20, 38], 350.8], [[2016, 12, 10, 20, 38], 389.81], [[2016, 12, 20, 18, 52], 399.0]], "mall.sk": [[[2016, 12, 19, 20, 38], 341.9], [[2016, 12, 18, 20, 38], 319.2], [[2016, 12, 17, 20, 38], 360.81], [[2016, 12, 16, 20, 38], 315.76], [[2016, 12, 15, 20, 38], 347.37], [[2016, 12, 14, 20, 38], 353.97], [[2016, 12, 13, 20, 38], 300.64], [[2016, 12, 12, 20, 38], 302.87], [[2016, 12, 11, 20, 38], 308.8], [[2016, 12, 10, 20, 38], 351.25], [[2016, 12, 20, 18, 52], 399.0]], "shoppie.sk": [[[2016, 12, 19, 20, 38], 363.41], [[2016, 12, 18, 20, 38], 315.55], [[2016, 12, 17, 20, 38], 369.09], [[2016, 12, 16, 20, 38], 369.85], [[2016, 12, 15, 20, 38], 354.29], [[2016, 12, 14, 20, 38], 305.96], [[2016, 12, 13, 20, 38], 387.4], [[2016, 12, 12, 20, 38], 303.95], [[2016, 12, 11, 20, 38], 384.83], [[2016, 12, 10, 20, 38], 303.81], [[2016, 12, 20, 18, 52], 399.0]], "k24.sk": [[[2016, 12, 19, 20, 38], 329.87], [[2016, 12, 18, 20, 38], 349.04], [[2016, 12, 17, 20, 38], 317.51], [[2016, 12, 16, 20, 38], 386.28], [[2016, 12, 15, 20, 38], 371.44], [[2016, 12, 14, 20, 38], 321.24], [[2016, 12, 13, 20, 38], 391.55], [[2016, 12, 12, 20, 38], 372.62], [[2016, 12, 11, 20, 38], 383.1], [[2016, 12, 10, 20, 38], 337.88], [[2016, 12, 20, 18, 52], 310.58]], "ello24.com": [[[2016, 12, 19, 20, 38], 327.53], [[2016, 12, 18, 20, 38], 395.58], [[2016, 12, 17, 20, 38], 366.37], [[2016, 12, 16, 20, 38], 328.88], [[2016, 12, 15, 20, 38], 330.78], [[2016, 12, 14, 20, 38], 349.29], [[2016, 12, 13, 20, 38], 327.62], [[2016, 12, 12, 20, 38], 396.08], [[2016, 12, 11, 20, 38], 336.72], [[2016, 12, 10, 20, 38], 345.49], [[2016, 12, 20, 18, 52], 304.0]]};
var loopcounter = -1;
$.each(google_chart_json, function (key, val) {
var line = [];
loopcounter = loopcounter + 1;
$.each(val, function (_, scan) {
var year = scan[0][0];
var month = scan[0][1];
var day = scan[0][2];
var hour = scan[0][3];
var minute = scan[0][4];
var price = scan[1];
var data = {
'date': new Date(year, month - 1, day, hour, minute),
'value': price
};
line.push(data);
});
line.sort(function(lhs, rhs) {
return lhs.date.getTime() - rhs.date.getTime();
});
lines.push([key, line]);
});
console.log('LINES');
console.log(lines);
$.each(lines, function (_, name_line) {
var dict = {
'title': name_line[0],
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}],
"dataProvider": name_line[1],
"categoryField": "date"
};
dataSets.push(dict);
});
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "stock",
"theme": "light",
"dataSets": dataSets,
"panels": [{
"showCategoryAxis": false,
"title": "Value",
"percentHeight": 70,
"stockGraphs": [{
"id": "g1",
"valueField": "value",
"comparable": true,
"compareField": "value",
"balloonText": "[[title]]:<b>[[value]]</b>",
"compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
}],
"stockLegend": {
"periodValueTextComparing": "[[percents.value.close]]%",
"periodValueTextRegular": "[[value.close]]"
}
}],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"fullWidth": true,
"cursorAlpha": 0.1,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueLineAlpha": 0.5
},
"periodSelector": {
"position": "left",
"periods": [{
"period": "MM",
"selected": true,
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
}]
},
"dataSetSelector": {
"position": "left"
},
"export": {
"enabled": true
}
});
chart.panelsSettings.recalculateToPercents = "never";
#chartdiv {
width: 100%;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>
I have a problem with this highcharts fiddle.
$(function() {
$('#container').highcharts({
lang: {
"noData": "no Data from 01.07.2016 until 01.08.2016"
},
"title": {
"text": ""
},
"series": [{
"zIndex": 10,
"color": "#2f7ed8",
"name": "Series 1",
"stickyTracking": false,
"marker": {
"symbol": "square",
"radius": 5
},
"lineWidth": 0,
"data": [{
"y": 291.0,
"x": Date.UTC(2015, 11, 10, 10, 45, 0),
}, {
"y": 156.0,
"x": Date.UTC(2015, 11, 10, 13, 0, 0),
}, {
"y": 215.0,
"x": Date.UTC(2015, 11, 10, 16, 30, 0),
}, {
"y": 212.0,
"x": Date.UTC(2015, 11, 10, 18, 45, 0),
}, {
"y": 232.0,
"x": Date.UTC(2015, 11, 10, 21, 15, 0),
}, {
"y": 73.0,
"x": Date.UTC(2015, 11, 10, 23, 15, 0),
}, {
"y": 112.0,
"x": Date.UTC(2015, 11, 11, 7, 30, 0),
}, {
"y": 264.0,
"x": Date.UTC(2015, 11, 11, 9, 30, 0),
}, {
"y": 152.0,
"x": Date.UTC(2015, 11, 11, 11, 15, 0),
}, {
"y": 138.0,
"x": Date.UTC(2015, 11, 11, 12, 0, 0),
}, {
"y": 133.0,
"x": Date.UTC(2015, 11, 11, 14, 30, 0),
}, {
"y": 272.0,
"x": Date.UTC(2015, 11, 11, 16, 30, 0),
}, {
"y": 106.0,
"x": Date.UTC(2015, 11, 11, 20, 15, 0),
}, {
"y": 239.0,
"x": Date.UTC(2015, 11, 11, 22, 45, 0),
}, {
"y": 220.0,
"x": Date.UTC(2015, 11, 11, 23, 45, 0),
}, {
"y": 257.0,
"x": Date.UTC(2015, 11, 12, 8, 45, 0),
}, {
"y": 140.0,
"x": Date.UTC(2015, 11, 12, 10, 45, 0),
}, {
"y": 86.0,
"x": Date.UTC(2015, 11, 12, 12, 0, 0),
}, {
"y": 96.0,
"x": Date.UTC(2015, 11, 12, 13, 45, 0),
}, {
"y": 230.0,
"x": Date.UTC(2015, 11, 12, 16, 0, 0),
}, {
"y": 262.0,
"x": Date.UTC(2015, 11, 12, 18, 30, 0),
}, {
"y": 133.0,
"x": Date.UTC(2015, 11, 12, 20, 15, 0),
}, {
"y": 167.0,
"x": Date.UTC(2015, 11, 12, 22, 0, 0),
}, {
"y": 59.0,
"x": Date.UTC(2015, 11, 13, 7, 45, 0),
}, {
"y": 207.0,
"x": Date.UTC(2015, 11, 13, 10, 15, 0),
}, {
"y": 133.0,
"x": Date.UTC(2015, 11, 13, 12, 0, 0),
}, {
"y": 127.0,
"x": Date.UTC(2015, 11, 13, 19, 45, 0),
}, {
"y": 207.0,
"x": Date.UTC(2015, 11, 13, 21, 15, 0),
}, {
"y": 88.0,
"x": Date.UTC(2015, 11, 14, 8, 15, 0),
}, {
"y": 161.0,
"x": Date.UTC(2015, 11, 14, 11, 0, 0),
}, {
"y": 142.0,
"x": Date.UTC(2015, 11, 14, 13, 30, 0),
}, {
"y": 155.0,
"x": Date.UTC(2015, 11, 14, 15, 45, 0),
}, {
"y": 197.0,
"x": Date.UTC(2015, 11, 14, 18, 45, 0),
}, {
"y": 310.0,
"x": Date.UTC(2015, 11, 14, 22, 15, 0),
}, {
"y": 89.0,
"x": Date.UTC(2015, 11, 15, 0, 15, 0),
}, {
"y": 182.0,
"x": Date.UTC(2015, 11, 15, 8, 15, 0),
}, {
"y": 96.0,
"x": Date.UTC(2015, 11, 15, 11, 30, 0),
}, {
"y": 70.0,
"x": Date.UTC(2015, 11, 15, 13, 0, 0),
}, {
"y": 111.0,
"x": Date.UTC(2015, 11, 15, 14, 30, 0),
}, {
"y": 233.0,
"x": Date.UTC(2015, 11, 15, 16, 0, 0),
}, {
"y": 191.0,
"x": Date.UTC(2015, 11, 15, 17, 45, 0),
}, {
"y": 162.0,
"x": Date.UTC(2015, 11, 15, 21, 15, 0),
}, {
"y": 248.0,
"x": Date.UTC(2015, 11, 16, 9, 15, 0),
}, {
"y": 77.0,
"x": Date.UTC(2015, 11, 16, 11, 0, 0),
}, {
"y": 94.0,
"x": Date.UTC(2015, 11, 16, 13, 15, 0),
}, {
"y": 100.0,
"x": Date.UTC(2015, 11, 16, 16, 15, 0),
}, {
"y": 101.0,
"x": Date.UTC(2015, 11, 16, 18, 15, 0),
}, {
"y": 154.0,
"x": Date.UTC(2015, 11, 16, 21, 30, 0),
}, {
"y": 162.0,
"x": Date.UTC(2015, 11, 17, 0, 15, 0),
}, {
"y": 132.0,
"x": Date.UTC(2015, 11, 17, 11, 15, 0),
}, {
"y": 151.0,
"x": Date.UTC(2015, 11, 17, 15, 30, 0),
}, {
"y": 144.0,
"x": Date.UTC(2015, 11, 17, 18, 30, 0),
}, {
"y": 84.0,
"x": Date.UTC(2015, 11, 17, 21, 30, 0),
}, {
"y": 136.0,
"x": Date.UTC(2015, 11, 17, 23, 15, 0),
}, {
"y": 55.0,
"x": Date.UTC(2015, 11, 18, 4, 45, 0),
}, {
"y": 131.0,
"x": Date.UTC(2015, 11, 18, 6, 0, 0),
}, {
"y": 182.0,
"x": Date.UTC(2015, 11, 18, 10, 15, 0),
}, {
"y": 203.0,
"x": Date.UTC(2015, 11, 18, 12, 15, 0),
}, {
"y": 332.0,
"x": Date.UTC(2015, 11, 18, 15, 0, 0),
}, {
"y": 177.0,
"x": Date.UTC(2015, 11, 18, 21, 0, 0),
}, {
"y": 85.0,
"x": Date.UTC(2015, 11, 18, 23, 30, 0),
}, {
"y": 63.0,
"x": Date.UTC(2015, 11, 19, 9, 0, 0),
}, {
"y": 189.0,
"x": Date.UTC(2015, 11, 19, 10, 30, 0),
}, {
"y": 170.0,
"x": Date.UTC(2015, 11, 19, 11, 15, 0),
}, {
"y": 175.0,
"x": Date.UTC(2015, 11, 19, 15, 15, 0),
}, {
"y": 204.0,
"x": Date.UTC(2015, 11, 19, 17, 30, 0),
}, {
"y": 169.0,
"x": Date.UTC(2015, 11, 19, 18, 45, 0),
}, {
"y": 115.0,
"x": Date.UTC(2015, 11, 19, 21, 45, 0),
}, {
"y": 117.0,
"x": Date.UTC(2015, 11, 20, 8, 15, 0),
}, {
"y": 83.0,
"x": Date.UTC(2015, 11, 20, 10, 0, 0),
}, {
"y": 49.0,
"x": Date.UTC(2015, 11, 20, 11, 30, 0),
}, {
"y": 195.0,
"x": Date.UTC(2015, 11, 20, 15, 15, 0),
}, {
"y": 273.0,
"x": Date.UTC(2015, 11, 20, 17, 30, 0),
}, {
"y": 227.0,
"x": Date.UTC(2015, 11, 20, 19, 45, 0),
}, {
"y": 243.0,
"x": Date.UTC(2015, 11, 20, 22, 0, 0),
}, {
"y": 190.0,
"x": Date.UTC(2015, 11, 20, 23, 15, 0),
}, {
"y": 170.0,
"x": Date.UTC(2015, 11, 21, 0, 15, 0),
}, {
"y": 86.0,
"x": Date.UTC(2015, 11, 21, 8, 15, 0),
}, {
"y": 311.0,
"x": Date.UTC(2015, 11, 21, 10, 45, 0),
}, {
"y": 244.0,
"x": Date.UTC(2015, 11, 21, 11, 45, 0),
}, {
"y": 129.0,
"x": Date.UTC(2015, 11, 21, 13, 30, 0),
}, {
"y": 119.0,
"x": Date.UTC(2015, 11, 21, 15, 30, 0),
}, {
"y": 125.0,
"x": Date.UTC(2015, 11, 21, 19, 30, 0),
}, {
"y": 206.0,
"x": Date.UTC(2015, 11, 21, 21, 0, 0),
}, {
"y": 230.0,
"x": Date.UTC(2015, 11, 21, 23, 45, 0),
}, {
"y": 229.0,
"x": Date.UTC(2015, 11, 22, 0, 15, 0),
}, {
"y": 137.0,
"x": Date.UTC(2015, 11, 22, 8, 30, 0),
}, {
"y": 118.0,
"x": Date.UTC(2015, 11, 22, 10, 30, 0),
}, {
"y": 57.0,
"x": Date.UTC(2015, 11, 22, 13, 15, 0),
}, {
"y": 211.0,
"x": Date.UTC(2015, 11, 22, 15, 15, 0),
}, {
"y": 88.0,
"x": Date.UTC(2015, 11, 22, 19, 15, 0),
}, {
"y": 290.0,
"x": Date.UTC(2015, 11, 22, 22, 30, 0),
},{
"y": 268.0,
"x": Date.UTC(2015, 11, 25, 20, 0, 0),
}, {
"y": 297.0,
"x": Date.UTC(2015, 11, 25, 21, 0, 0),
}, {
"y": 265.0,
"x": Date.UTC(2015, 11, 25, 22, 15, 0),
}, {
"y": 236.0,
"x": Date.UTC(2015, 11, 26, 8, 15, 0),
}, {
"y": 249.0,
"x": Date.UTC(2015, 11, 26, 10, 0, 0),
}, {
"y": 181.0,
"x": Date.UTC(2015, 11, 26, 11, 15, 0),
}, {
"y": 250.0,
"x": Date.UTC(2015, 11, 26, 12, 0, 0),
}, {
"y": 241.0,
"x": Date.UTC(2015, 11, 26, 15, 30, 0),
}, {
"y": 270.0,
"x": Date.UTC(2015, 11, 26, 17, 30, 0),
}, {
"y": 225.0,
"x": Date.UTC(2015, 11, 26, 18, 30, 0),
}, {
"y": 146.0,
"x": Date.UTC(2015, 11, 26, 20, 0, 0),
}, {
"y": 143.0,
"x": Date.UTC(2015, 11, 26, 21, 15, 0),
}, {
"y": 88.0,
"x": Date.UTC(2015, 11, 26, 22, 45, 0),
}, {
"y": 98.0,
"x": Date.UTC(2015, 11, 27, 0, 0, 0),
}, {
"y": 144.0,
"x": Date.UTC(2015, 11, 27, 8, 0, 0),
}, {
"y": 295.0,
"x": Date.UTC(2015, 11, 27, 10, 15, 0),
}, {
"y": 256.0,
"x": Date.UTC(2015, 11, 27, 11, 15, 0),
}, {
"y": 214.0,
"x": Date.UTC(2015, 11, 27, 16, 45, 0),
}, {
"y": 179.0,
"x": Date.UTC(2015, 11, 27, 19, 15, 0),
}, {
"y": 191.0,
"x": Date.UTC(2015, 11, 27, 21, 15, 0),
}, {
"y": 160.0,
"x": Date.UTC(2015, 11, 28, 0, 0, 0),
}, {
"y": 95.0,
"x": Date.UTC(2015, 11, 28, 9, 45, 0),
}, {
"y": 138.0,
"x": Date.UTC(2015, 11, 28, 12, 0, 0),
}, {
"y": 104.0,
"x": Date.UTC(2015, 11, 28, 13, 45, 0),
}, {
"y": 165.0,
"x": Date.UTC(2015, 11, 28, 17, 45, 0),
}, {
"y": 185.0,
"x": Date.UTC(2015, 11, 28, 18, 45, 0),
}, {
"y": 338.0,
"x": Date.UTC(2015, 11, 28, 21, 30, 0),
}, {
"y": 286.0,
"x": Date.UTC(2015, 11, 28, 23, 15, 0),
}, {
"y": 131.0,
"x": Date.UTC(2015, 11, 29, 3, 15, 0),
}, {
"y": 98.0,
"x": Date.UTC(2015, 11, 29, 8, 30, 0),
}, {
"y": 205.0,
"x": Date.UTC(2015, 11, 29, 10, 30, 0),
}, {
"y": 130.0,
"x": Date.UTC(2015, 11, 29, 11, 45, 0),
}, {
"y": 80.0,
"x": Date.UTC(2015, 11, 29, 13, 30, 0),
}, {
"y": 246.0,
"x": Date.UTC(2015, 11, 29, 16, 30, 0),
}, {
"y": 183.0,
"x": Date.UTC(2015, 11, 29, 18, 45, 0),
}, {
"y": 199.0,
"x": Date.UTC(2015, 11, 29, 19, 45, 0),
}, {
"y": 219.0,
"x": Date.UTC(2015, 11, 29, 21, 30, 0),
}, {
"y": 318.0,
"x": Date.UTC(2015, 11, 29, 23, 45, 0),
}, {
"y": 156.0,
"x": Date.UTC(2015, 11, 30, 8, 45, 0),
}, {
"y": 73.0,
"x": Date.UTC(2015, 11, 30, 11, 0, 0),
}, {
"y": 98.0,
"x": Date.UTC(2015, 11, 30, 11, 45, 0),
}, {
"y": 105.0,
"x": Date.UTC(2015, 11, 30, 14, 30, 0),
}, {
"y": 194.0,
"x": Date.UTC(2015, 11, 30, 17, 45, 0),
}, {
"y": 183.0,
"x": Date.UTC(2015, 11, 30, 20, 15, 0),
}, {
"y": 289.0,
"x": Date.UTC(2015, 11, 30, 21, 15, 0),
}, {
"y": 350.0,
"x": Date.UTC(2015, 11, 31, 0, 15, 0),
}, {
"y": 242.0,
"x": Date.UTC(2015, 11, 31, 8, 45, 0),
}, {
"y": 240.0,
"x": Date.UTC(2015, 11, 31, 10, 30, 0),
}, {
"y": 146.0,
"x": Date.UTC(2015, 11, 31, 11, 15, 0),
}, {
"y": 117.0,
"x": Date.UTC(2015, 11, 31, 13, 30, 0),
}, {
"y": 191.0,
"x": Date.UTC(2015, 11, 31, 15, 15, 0),
}, {
"y": 189.0,
"x": Date.UTC(2015, 11, 31, 17, 45, 0),
}, {
"y": 153.0,
"x": Date.UTC(2015, 11, 31, 20, 45, 0),
}, {
"y": 161.0,
"x": Date.UTC(2016, 0, 1, 0, 0, 0),
}, {
"y": 143.0,
"x": Date.UTC(2016, 0, 1, 0, 45, 0),
}, {
"y": 62.0,
"x": Date.UTC(2016, 0, 1, 8, 30, 0),
}, {
"y": 98.0,
"x": Date.UTC(2016, 0, 1, 13, 0, 0),
}, {
"y": 166.0,
"x": Date.UTC(2016, 0, 1, 14, 30, 0),
}, {
"y": 202.0,
"x": Date.UTC(2016, 0, 1, 17, 45, 0),
}, {
"y": 273.0,
"x": Date.UTC(2016, 0, 1, 21, 0, 0),
}, {
"y": 240.0,
"x": Date.UTC(2016, 0, 2, 0, 15, 0),
}, {
"y": 145.0,
"x": Date.UTC(2016, 0, 2, 8, 45, 0),
}, {
"y": 87.0,
"x": Date.UTC(2016, 0, 2, 12, 0, 0),
}, {
"y": 163.0,
"x": Date.UTC(2016, 0, 2, 16, 0, 0),
}, {
"y": 196.0,
"x": Date.UTC(2016, 0, 2, 19, 45, 0),
}, {
"y": 347.0,
"x": Date.UTC(2016, 0, 2, 22, 45, 0),
}, {
"y": 200.0,
"x": Date.UTC(2016, 0, 3, 0, 30, 0),
}, {
"y": 132.0,
"x": Date.UTC(2016, 0, 3, 8, 45, 0),
}, {
"y": 251.0,
"x": Date.UTC(2016, 0, 3, 10, 0, 0),
}, {
"y": 254.0,
"x": Date.UTC(2016, 0, 3, 12, 0, 0),
}, {
"y": 94.0,
"x": Date.UTC(2016, 0, 3, 14, 30, 0),
}, {
"y": 88.0,
"x": Date.UTC(2016, 0, 3, 18, 15, 0),
}, {
"y": 247.0,
"x": Date.UTC(2016, 0, 3, 21, 30, 0),
}, {
"y": 179.0,
"x": Date.UTC(2016, 0, 4, 0, 0, 0),
}, {
"y": 109.0,
"x": Date.UTC(2016, 0, 4, 10, 0, 0),
}, {
"y": 67.0,
"x": Date.UTC(2016, 0, 4, 12, 15, 0),
}, {
"y": 172.0,
"x": Date.UTC(2016, 0, 4, 15, 30, 0),
}, {
"y": 96.0,
"x": Date.UTC(2016, 0, 4, 17, 0, 0),
}, {
"y": 116.0,
"x": Date.UTC(2016, 0, 4, 18, 45, 0),
}, {
"y": 111.0,
"x": Date.UTC(2016, 0, 4, 21, 0, 0),
}, {
"y": 234.0,
"x": Date.UTC(2016, 0, 4, 22, 45, 0),
}, {
"y": 187.0,
"x": Date.UTC(2016, 0, 5, 0, 0, 0),
}, {
"y": 72.0,
"x": Date.UTC(2016, 0, 5, 9, 45, 0),
}, {
"y": 266.0,
"x": Date.UTC(2016, 0, 5, 11, 45, 0),
}, {
"y": 237.0,
"x": Date.UTC(2016, 0, 5, 13, 15, 0),
}, {
"y": 268.0,
"x": Date.UTC(2016, 0, 5, 16, 45, 0),
}, {
"y": 261.0,
"x": Date.UTC(2016, 0, 5, 18, 0, 0),
}, {
"y": 140.0,
"x": Date.UTC(2016, 0, 5, 21, 30, 0),
}],
"tooltip": {
"pointFormat": "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y}</b> ",
"useHTML": true,
"crosshairs": true
}
}, {
"zIndex": 11,
"color": "#D6487E",
"name": "Series 2",
"marker": {
"symbol": "triangle-down",
"radius": 5
},
"lineWidth": 0,
"data": [],
"tooltip": {
"pointFormat": "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y}</b> ",
"useHTML": true,
"crosshairs": true
}
}, {
"zIndex": 10,
"color": "#2f7ed8",
"name": "Series 3",
"marker": {
"symbol": "triangle",
"radius": 5
},
"lineWidth": 0,
"data": [],
"tooltip": {
"pointFormat": "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y}</b> ",
"useHTML": true,
"crosshairs": true
}
}, {
"enableMouseTracking": false,
"zIndex": 3,
"isThreshold": true,
"name": "Background series",
"color": "#edf9d2",
"type": "arearange",
"data": [
[Date.UTC(2015, 11, 1, 0, 0, 0), 80.0, 160.0],
[Date.UTC(2016, 0, 10, 23, 59, 59), 80.0, 160.0],
[Date.UTC(2016, 0, 10, 23, 59, 59), 80.0, 160.0]
],
"scalingFix": true
}, {
"zIndex": 10,
"color": "#2f7ed8",
"name": "Test series",
"marker": {
"symbol": "circle",
"radius": 5
},
"lineWidth": 0,
"data": [],
"tooltip": {
"pointFormat": "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y}</b> ",
"useHTML": true,
"crosshairs": true
}
}, {
"name": "scaling-fix",
"data": [
[Date.UTC(2016, 6, 31, 23, 59, 59), 80.0],
[Date.UTC(2016, 7, 1, 23, 59, 59), 80.0]
],
"zIndex": 0,
"visible": false,
"type": "line",
"showInLegend": false
} ],
"yAxis": {
"minRange": 20,
"startOnTick": true,
"plotBands": [],
"title": {
"text": "Values",
"enabled": true
},
"gridZIndex": 0,
"min": 0,
"endOnTick": false,
"plotLines": [],
"tickInterval": 20
},
"chart": {
"zoomType": "x",
"marginLeft": 70,
"resetZoomButton": {
"theme": {
"states": {
"hover": {
"style": {
"color": "white"
},
"fill": "#DA5430"
}
},
"stroke": "#DA5430",
"r": 0,
"style": {
"color": "white"
},
"fill": "#DA5430"
}
},
"type": "line",
},
"tooltip": {
"dateTimeLabelFormats": {
"millisecond": "%A, %e. %b., %H:%M:%S.%L",
"week": "Woche von %A, %e. %b. %Y",
"hour": "%A, %e. %b., %H:%M",
"month": "%B %Y",
"second": "%A, %e. %b., %H:%M:%S",
"year": "%Y",
"day": "%A, %e. %b. %Y",
"minute": "%A, %e. %b., %H:%M"
},
"snap": 0,
"shared": false,
"followPointer": false,
"useHTML": true
},
"credits": {
"enabled": false
},
"plotOptions": {
"series": {
"states": {
"hover": {
"lineWidth": 0,
"lineWidthPlus": 0
}
},
"cursor": "pointer",
"stickyTracking": false
},
"line": {
"zIndex": 6,
"marker": {
"enabled": true
},
"stickyTracking": false,
"dataLabels": {
"enabled": false,
"useHTML": true
}
},
"arearange": {},
"scatter": {
"marker": {
"enabled": true
},
"stickyTracking": false,
"dataLabels": {
"enabled": false,
"useHTML": true
}
},
"area": {
"stacking": true,
"enableMouseTracking": false,
"marker": {
"enabled": false
},
"shadow": false,
"lineWidth": 0,
"showInLegend": false
}
},
"xAxis": {
"minRange": 60000,
"min": Date.UTC(2015, 11, 1, 0, 0, 0),
"minPadding": 0.0,
"plotBands": [{
"zIndex": -100,
"to": Date.UTC(2016, 6, 3, 21, 59, 59),
"from": Date.UTC(2016, 6, 1, 22, 0, 0),
"color": "rgba(200,200,200,0.1)"
}, {
"zIndex": -100,
"to": Date.UTC(2015, 11, 6, 22, 59, 59),
"from": Date.UTC(2015, 11, 4, 23, 0, 0),
"color": "rgba(200,200,200,0.1)"
}, {
"zIndex": -100,
"to": Date.UTC(2015, 11, 13, 22, 59, 59),
"from": Date.UTC(2015, 11, 11, 23, 0, 0),
"color": "rgba(200,200,200,0.1)"
}, {
"zIndex": -100,
"to": Date.UTC(2015, 11, 20, 22, 59, 59),
"from": Date.UTC(2015, 11, 18, 23, 0, 0),
"color": "rgba(200,200,200,0.1)"
}, {
"zIndex": -100,
"to": Date.UTC(2015, 11, 27, 22, 59, 59),
"from": Date.UTC(2015, 11, 25, 23, 0, 0),
"color": "rgba(200,200,200,0.1)"
}],
"plotLines": [{
"zIndex": -100,
"width": 2,
"dashStyle": "ShortDash",
"color": "rgba(200,200,200,0.3)",
"value": Date.UTC(2015, 11, 6, 23, 0, 0)
}, {
"zIndex": -100,
"width": 2,
"dashStyle": "ShortDash",
"color": "rgba(200,200,200,0.3)",
"value": Date.UTC(2015, 11, 13, 23, 0, 0)
}, {
"zIndex": -100,
"width": 2,
"dashStyle": "ShortDash",
"color": "rgba(200,200,200,0.3)",
"value": Date.UTC(2015, 11, 20, 23, 0, 0)
}, {
"zIndex": -100,
"width": 2,
"dashStyle": "ShortDash",
"color": "rgba(200,200,200,0.3)",
"value": Date.UTC(2015, 11, 27, 23, 0, 0)
}],
"gridZIndex": 0,
"dateTimeLabelFormats": {
"millisecond": "%H:%M:%S.%L",
"week": "%e. %b. %y",
"hour": "%H:%M",
"month": "%B %y",
"second": "%H:%M:%S",
"year": "%Y",
"day": "%e. %b. %y",
"minute": "%H:%M"
},
"gridLineWidth": 0,
"maxPadding": 0.0,
"endOnTick": false,
"max": Date.UTC(2016, 0, 10, 23, 59, 59),
"minTickInterval": 60000,
"type": "datetime",
"events": {
"afterSetExtremes": function() {
var axis = "xAxis";
var axis2 = "yAxis";
var chartgroup = null;
if (typeof charts_p_allchartsmodule != 'undefined') {
chartgroup = charts_p_allchartsmodule;
}
if (typeof charts_container != 'undefined' && charts_container['p_allchartsmodule']) {
chartgroup = charts_container['p_allchartsmodule'];
}
if (chartgroup && this.chart.controllingChart == true) {
if (this.chart.inverted == true) {
var min = this.chart.xAxis[0].min;
var max = this.chart.xAxis[0].max;
} else {
var min = this.chart.xAxis[0].min;
var max = this.chart.xAxis[0].max;
}
for (key in chartgroup) {
if (this.chart != chartgroup[key]) {
if (chartgroup[key].inverted == true) {
chartgroup[key].xAxis[0].setExtremes(min, max, true);
} else {
chartgroup[key].xAxis[0].setExtremes(min, max, true);
}
}
}
this.chart.controllingChart = false;
}
}
}
},
"exporting": {
"url": "/m/hc-export/",
"chartOptions": {
"rangeSelector": {
"enabled": false
},
"navigator": {
"enabled": false
},
"scrollbar": {
"enabled": false
}
}
},
"rangeSelector": {
"buttons": [{
"text": "Alle",
"type": "all"
}],
"inputEnabled": false,
"enabled": true
},
"type": "scatter",
"legend": {
"draggable":true,
"floating":true,
"verticalAlign": "top",
"zIndex": 2000,
"title": {
"text": ":: Legend"
},
"itemStyle": {
"fontSize": "8px"
},
"align": "left",
"draggable": true,
"borderWidth": 1,
"backgroundColor": "rgba(234, 234, 234,0.8)",
"floating": true
}
});
});
When you hover over on of the points it will select a other point with nearly the same X-Axis. The Y-Axis is switching up and down but not to the point where the mouse hovers over. So the selection behavior isn´t precise, so you can´t see the right tooltip where your mouse hovers over.
Mouse = red dot
Please have a look at it.
Your series is treated as a "line" chart, which causes this behaviour of the tooltip popup. I found a problem in your configuration object. The type:"scatter" option must be placed in the "chart":{} object.
chart:{
type:"scatter"
}
see: http://jsfiddle.net/u9q2m9wp/2/
see also: Highcharts - only show tooltip when hovering directly on point
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>