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'm working on the next simple racing game.
I animate the cars using some JQuery code, adding the values that comes from the carspeed array. I have manage to make it work, but i have a problem with the addClass function: once the game started the task is already done, so it is not syncing to the animate function which has 200 duration.
I tried the answers from here but still don't work, I also tried to separate the addClass function inside a setTimeout but didn't work.
Check the next snippet example, Hope you help me.
Thanks.
var cars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var winningCars = shuffle(cars);
var carSpeeds = [
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15, 16, 17, 18, 19, 20,
19, 18, 17, 16, 15, 16, 18, 20, 22, 24, 26, 27, 28, 29, 30, 32,
34, 35, 36, 38, 40, 38, 37, 36, 35, 34, 36, 38, 40, 42, 44, 46,
48, 50, 50, 50, 49, 48, 47, 91.5],
[1, 2, 3, 4, 5, 5, 5, 5, 5, 7, 9, 11, 13, 15, 16, 17, 17, 17, 17,
19, 19, 19, 19, 20, 22, 22, 22, 22, 24, 24, 24, 26, 28, 30, 32,
34, 35, 35, 35, 35, 37, 39, 41, 43, 45, 46, 47, 48, 49, 50, 51,
52, 53, 54, 53, 53, 52, 51, 50, 91.5],
[2, 4, 6, 8, 10, 11, 12, 13, 14, 16, 18, 20, 19, 18, 17, 16, 15,
15, 15, 15, 16, 17, 18, 19, 20, 21, 22, 24, 25, 26, 27, 28, 29, 30,
31, 32, 33, 34, 35, 34, 33, 32, 31, 30, 29, 28, 27, 26, 25, 27, 29,
31, 33, 35, 37, 39, 41, 42, 43, 44, 91.5],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 21, 22, 23,
24, 25, 23, 21, 19, 17, 17, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
27, 28, 29, 30, 32, 34, 36, 38, 40, 41, 42, 43, 44, 45, 46, 47, 48,
49, 50, 50, 50, 50, 52, 54, 56, 91.5],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 10, 10, 10, 12, 14, 16, 18, 20,
22, 24, 23, 22, 21, 20, 19, 18, 19, 20, 21, 22, 23, 24, 26, 28, 28,
28, 28, 29, 30, 31, 32, 33, 34, 35, 37, 39, 41, 43, 45, 46, 47, 48,
49, 49, 49, 49, 48, 47, 46, 45, 44, 91.5],
[1, 2, 3, 4, 5, 5, 5, 5, 5, 6, 8, 10, 12, 14, 14, 14, 16, 17, 17, 17,
17, 16, 15, 14, 16, 18, 20, 22, 24, 26, 28, 30, 31, 32, 33, 34, 35,
36, 37, 38, 39, 40, 39, 38, 37, 38, 39, 40, 41, 42, 43, 44, 44, 44,
44, 46, 48, 50, 48, 47, 46, 48, 50, 91.5],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 18, 20, 22, 24, 23, 23,
22, 22, 20, 19, 18, 16, 18, 20, 22, 24, 26, 28, 30, 31, 32, 33, 34,
35, 36, 37, 38, 39, 40, 39, 39, 38, 38, 37, 38, 39, 39, 39, 38, 38,
38, 38, 38, 38, 38, 40, 42, 44, 46, 48, 50, 91.5],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 15, 15, 16, 16,
16, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 35, 34, 33,
32, 31, 30, 29, 28, 27, 26, 27, 28, 28, 28, 28, 27, 28, 29, 30, 31,
32, 33, 34, 35, 34, 33, 32, 31, 30, 32, 34, 36, 91.5],
[1, 2, 3, 4, 5, 5, 5, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
18, 18, 18, 18, 19, 20, 21, 22, 23, 24, 23, 22, 21, 20, 19, 18, 17,
16, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 27, 29, 31, 33, 35,
37, 39, 40, 40, 40, 40, 41, 41, 41, 43, 45, 47, 91.5],
[2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 21, 22, 23, 24, 25, 26, 27, 28,
29, 30, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 22, 24, 26, 28, 30,
32, 34, 36, 38, 40, 41, 41, 41, 41, 41, 42, 43, 44, 45, 46, 47, 48,
49, 50, 50, 50, 50, 50, 50, 51, 51, 51, 52, 52, 52, 52, 52, 91.5]
];
function burst(current, prev)
{
const speed = current - prev;
if (speed <= 2)
{
return 'burst';
}
else if (speed > 2)
{
return 'mega-burst';
}
}
for (let i = 0; i < winningCars.length; i++)
{
for (let x = 0; x < carSpeeds[i].length; x++)
{
$('.track .lane:nth-child(' + winningCars[i] + ') .cars')
.removeClass('mega-burst burst')
.addClass(burst(carSpeeds[i][x], carSpeeds[i][x - 1]))
.animate({right: carSpeeds[i][x] + '%'}, 200);
}
}
function shuffle(array)
{
var currentIndex = array.length, temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex)
{
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
.track {
position: relative;
width: 588px;
height: 490px;
background-image: url(https://i.postimg.cc/fTP5Q9Bb/road2.png);
background-position: 0px 0px;
background-repeat: repeat-x;
}
.track.start {
animation: animatedBackground 1s linear infinite;
}
#keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: -100% 0;
}
}
.road {
position: absolute;
width: 100%;
top: 42px;
}
.road .lane {
height: 17.5px;
width: 100%;
margin-bottom: 1px;
padding-top: 3px;
position: relative;
}
.road .cars {
width: 30px;
height: 15px;
position: absolute;
right: 10px;
}
.road .car1 {
background-color: blue;
}
.road .car2 {
background-color: red;
}
.road .car3 {
background-color: yellow;
}
.road .car4 {
background-color: orange;
}
.road .car5 {
background-color: purple;
}
.road .car6 {
background-color: black;
}
.road .car7 {
background-color: green;
}
.road .car8 {
background-color: violet;
}
.road .car9 {
background-color: lime;
}
.road .car10 {
background-color: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="track start">
<div class="road">
<div class="road-lanes">
<div class="lane">
<div class="cars car1"></div>
</div>
<div class="lane">
<div class="cars car2"></div>
</div>
<div class="lane">
<div class="cars car3"></div>
</div>
<div class="lane">
<div class="cars car4"></div>
</div>
<div class="lane">
<div class="cars car5"></div>
</div>
<div class="lane">
<div class="cars car6"></div>
</div>
<div class="lane">
<div class="cars car7"></div>
</div>
<div class="lane">
<div class="cars car8"></div>
</div>
<div class="lane">
<div class="cars car9"></div>
</div>
<div class="lane">
<div class="cars car10"></div>
</div>
</div>
</div>
</div>
As you are iterating classes in for loop, all the manipulations will happen within a loop hence you wont be able to see it happening.
Use setTimeout with proper timeout duration.
var cars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var winningCars = shuffle(cars);
var carSpeeds = [
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15, 16, 17, 18, 19, 20,
19, 18, 17, 16, 15,
16, 18, 20, 22, 24, 26, 27, 28, 29, 30, 32, 34, 35, 36, 38, 40,
38, 37, 36, 35, 34,
36, 38, 40, 42, 44, 46, 48, 50, 50, 50, 49,
48, 47,
91.5
]
}
function burst(current, prev) {
const speed = current - prev;
if (speed <= 2) {
return 'burst';
} else if (speed > 2) {
return 'mega-burst';
}
}
let count = 0;
const timeout = 2000;
for (let i = 0; i < winningCars.length; i++) {
for (let x = 0; x < carSpeeds[i].length; x++) {
setTimeout(() => {
$('.racing-animation-modal .track .lane:nth-child(' + winningCars[i] + ') .cars').removeClass('mega-burst burst').addClass(burst(carSpeeds[i][x], carSpeeds[i][x - 1])).animate({
right: carSpeeds[i][x] + '%'
}, 200);
}, count++ * timeout);
}
}
Here is my approach, using the features of the complete callback method of the JQuery animate function, and a recursive approach. To check how this is done proggresively in time, just uncomment the console.log() inside the moveCar() function. Here is a preview of the main code that manage animations proggresively:
for (let i = 0; i < winningCars.length; i++)
{
// Start moving the cars.
setTimeout(function(){moveCar(i, 0);}, 100);
}
function moveCar(carIdx, iteration)
{
//console.log("Entering iteration: " + iteration + " for car: " + carIdx);
// Check the stop condition.
if (iteration >= carSpeeds[carIdx].length)
return;
// Get the burst class.
var burstClass;
if (iteration > 0)
burstClass = burst(carSpeeds[carIdx][iteration], carSpeeds[carIdx][iteration - 1]);
else
burstClass = burst(carSpeeds[carIdx][iteration], 0);
// Make an iteration of movement on the car.
$('.track .lane:nth-child(' + winningCars[carIdx] + ') .cars')
.removeClass('mega-burst burst')
.addClass(burstClass)
.animate({right: carSpeeds[carIdx][iteration] + '%'}, 200, function()
{
// On amination complete, call recursively next iteration.
moveCar(carIdx, iteration + 1);
});
}
And here you can see the working snippet:
var cars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var winningCars = shuffle(cars);
var carSpeeds = [
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15, 16, 17, 18, 19, 20,
19, 18, 17, 16, 15, 16, 18, 20, 22, 24, 26, 27, 28, 29, 30, 32,
34, 35, 36, 38, 40, 38, 37, 36, 35, 34, 36, 38, 40, 42, 44, 46,
48, 50, 50, 50, 49, 48, 47, 91.5],
[1, 2, 3, 4, 5, 5, 5, 5, 5, 7, 9, 11, 13, 15, 16, 17, 17, 17, 17,
19, 19, 19, 19, 20, 22, 22, 22, 22, 24, 24, 24, 26, 28, 30, 32,
34, 35, 35, 35, 35, 37, 39, 41, 43, 45, 46, 47, 48, 49, 50, 51,
52, 53, 54, 53, 53, 52, 51, 50, 91.5],
[2, 4, 6, 8, 10, 11, 12, 13, 14, 16, 18, 20, 19, 18, 17, 16, 15,
15, 15, 15, 16, 17, 18, 19, 20, 21, 22, 24, 25, 26, 27, 28, 29, 30,
31, 32, 33, 34, 35, 34, 33, 32, 31, 30, 29, 28, 27, 26, 25, 27, 29,
31, 33, 35, 37, 39, 41, 42, 43, 44, 91.5],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 21, 22, 23,
24, 25, 23, 21, 19, 17, 17, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
27, 28, 29, 30, 32, 34, 36, 38, 40, 41, 42, 43, 44, 45, 46, 47, 48,
49, 50, 50, 50, 50, 52, 54, 56, 91.5],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 10, 10, 10, 12, 14, 16, 18, 20,
22, 24, 23, 22, 21, 20, 19, 18, 19, 20, 21, 22, 23, 24, 26, 28, 28,
28, 28, 29, 30, 31, 32, 33, 34, 35, 37, 39, 41, 43, 45, 46, 47, 48,
49, 49, 49, 49, 48, 47, 46, 45, 44, 91.5],
[1, 2, 3, 4, 5, 5, 5, 5, 5, 6, 8, 10, 12, 14, 14, 14, 16, 17, 17, 17,
17, 16, 15, 14, 16, 18, 20, 22, 24, 26, 28, 30, 31, 32, 33, 34, 35,
36, 37, 38, 39, 40, 39, 38, 37, 38, 39, 40, 41, 42, 43, 44, 44, 44,
44, 46, 48, 50, 48, 47, 46, 48, 50, 91.5],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 18, 20, 22, 24, 23, 23,
22, 22, 20, 19, 18, 16, 18, 20, 22, 24, 26, 28, 30, 31, 32, 33, 34,
35, 36, 37, 38, 39, 40, 39, 39, 38, 38, 37, 38, 39, 39, 39, 38, 38,
38, 38, 38, 38, 38, 40, 42, 44, 46, 48, 50, 91.5],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 15, 15, 16, 16,
16, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 35, 34, 33,
32, 31, 30, 29, 28, 27, 26, 27, 28, 28, 28, 28, 27, 28, 29, 30, 31,
32, 33, 34, 35, 34, 33, 32, 31, 30, 32, 34, 36, 91.5],
[1, 2, 3, 4, 5, 5, 5, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
18, 18, 18, 18, 19, 20, 21, 22, 23, 24, 23, 22, 21, 20, 19, 18, 17,
16, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 27, 29, 31, 33, 35,
37, 39, 40, 40, 40, 40, 41, 41, 41, 43, 45, 47, 91.5],
[2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 21, 22, 23, 24, 25, 26, 27, 28,
29, 30, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 22, 24, 26, 28, 30,
32, 34, 36, 38, 40, 41, 41, 41, 41, 41, 42, 43, 44, 45, 46, 47, 48,
49, 50, 50, 50, 50, 50, 50, 51, 51, 51, 52, 52, 52, 52, 52, 91.5]
];
function burst(current, prev)
{
const speed = current - prev;
if (speed <= 2)
{
return 'burst';
}
else if (speed > 2)
{
return 'mega-burst';
}
}
for (let i = 0; i < winningCars.length; i++)
{
// Start moving the cars.
setTimeout(function(){moveCar(i, 0);}, 100);
}
function moveCar(carIdx, iteration)
{
//console.log("Entering iteration: " + iteration + " for car: " + carIdx);
// Check the stop condition.
if (iteration >= carSpeeds[carIdx].length)
return;
// Get the burst class.
var burstClass;
if (iteration > 0)
burstClass = burst(carSpeeds[carIdx][iteration], carSpeeds[carIdx][iteration - 1]);
else
burstClass = burst(carSpeeds[carIdx][iteration], 0);
// Make an iteration of movement on the car.
$('.track .lane:nth-child(' + winningCars[carIdx] + ') .cars')
.removeClass('mega-burst burst')
.addClass(burstClass)
.animate({right: carSpeeds[carIdx][iteration] + '%'}, 200, function()
{
// On amination complete, call recursively next iteration.
moveCar(carIdx, iteration + 1);
});
}
function shuffle(array)
{
var currentIndex = array.length, temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex)
{
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
.track {
position: relative;
width: 588px;
height: 490px;
background-image: url(https://i.postimg.cc/fTP5Q9Bb/road2.png);
background-position: 0px 0px;
background-repeat: repeat-x;
}
.track.start {
animation: animatedBackground 1s linear infinite;
}
#keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: -100% 0;
}
}
.road {
position: absolute;
width: 100%;
top: 42px;
}
.road .lane {
height: 17.5px;
width: 100%;
margin-bottom: 1px;
padding-top: 3px;
position: relative;
}
.road .cars {
width: 30px;
height: 15px;
position: absolute;
right: 10px;
}
.road .car1 {
background-color: blue;
}
.road .car2 {
background-color: red;
}
.road .car3 {
background-color: yellow;
}
.road .car4 {
background-color: orange;
}
.road .car5 {
background-color: purple;
}
.road .car6 {
background-color: black;
}
.road .car7 {
background-color: green;
}
.road .car8 {
background-color: violet;
}
.road .car9 {
background-color: lime;
}
.road .car10 {
background-color: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="track start">
<div class="road">
<div class="road-lanes">
<div class="lane">
<div class="cars car1"></div>
</div>
<div class="lane">
<div class="cars car2"></div>
</div>
<div class="lane">
<div class="cars car3"></div>
</div>
<div class="lane">
<div class="cars car4"></div>
</div>
<div class="lane">
<div class="cars car5"></div>
</div>
<div class="lane">
<div class="cars car6"></div>
</div>
<div class="lane">
<div class="cars car7"></div>
</div>
<div class="lane">
<div class="cars car8"></div>
</div>
<div class="lane">
<div class="cars car9"></div>
</div>
<div class="lane">
<div class="cars car10"></div>
</div>
</div>
</div>
</div>
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>
Is it possible to set compare to all by default? When I refresh the page it shows only one line, I want chart to show all lines by default and user can hide them.
This is the default behaviour:
I want to somehow achieve this:
But I can't figure out what to change in settings of the graph. (in fact I don't need "comparing" attitude, just chart for all prices with multiple lines which can be hidden).
This is the chart (the {{ google_chart|safe }} is a variable for JSON - {"web_name": [[[year,month...], price], [[year,month..], price],...}):
<script>
var lines = [];
var dataSets = [];
generateChartData();
function generateChartData() {
var google_chart_json = {{ google_chart|safe }};
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);
});
}
console.log(dataSets)
var chart = AmCharts.makeChart("chartdiv", {
categoryAxesSettings: {
minPeriod: "hh",//(at least that is not grouped)
groupToPeriods: ["DD", "WW", "MM"]//(Data will be grouped by day,week and month)
},
"type": "stock",
"theme": "light",
"dataSets": dataSets,
"panels": [{
"showCategoryAxis": false,
"title": "Value",
"percentHeight": 70,
"stockGraphs": [{
"id": "g1",
"valueField": "value",
"comparable": true,
"compareField": "value",
"balloonText": "[[date]][[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>
Set compared to true in each dataSet that you want compared/visible by default. The first dataSet doesn't need to have this set, so you'll want to check your index value before setting the property or else it will appear twice:
$.each(lines, function (idx, name_line) {
var dict = {
'title': name_line[0],
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}],
"dataProvider": name_line[1],
"categoryField": "date"
};
if (idx > 0) {
dict.compared = true;
}
dataSets.push(dict);
});
Demo below using the data from your previous question.
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 (idx, name_line) {
var dict = {
'title': name_line[0],
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}],
"dataProvider": name_line[1],
"categoryField": "date"
};
if (idx > 0) {
dict.compared = true;
}
dataSets.push(dict);
});
}
console.log(dataSets)
var chart = AmCharts.makeChart("chartdiv", {
categoryAxesSettings: {
minPeriod: "hh",//(at least that is not grouped)
groupToPeriods: ["DD", "WW", "MM"]//(Data will be grouped by day,week and month)
},
"type": "stock",
"theme": "light",
"dataSets": dataSets,
"panels": [{
"showCategoryAxis": false,
"title": "Value",
"percentHeight": 70,
"stockGraphs": [{
"id": "g1",
"valueField": "value",
"comparable": true,
"compareField": "value",
"balloonText": "[[date]][[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'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>