Scribd
Upload
59 views

Topalian JavaScript Graph by Christopher Topalian

Here is my JavaScript Bar Graph application. Code: https://sites.google.com/view/collegeofscripting/topalian_javascript_graph Video: https://www.youtube.com/watch?v=X5SsEtTHxaE Use App Here: https://sites.google.com/view/collegeofscripting/topalian_javascript_graph Happy Scripting :-)

Uploaded by

CollegeOfScripting
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
59 views

Topalian JavaScript Graph by Christopher Topalian

Here is my JavaScript Bar Graph application. Code: https://sites.google.com/view/collegeofscripting/topalian_javascript_graph Video: https://www.youtube.com/watch?v=X5SsEtTHxaE Use App Here: https://sites.google.com/view/collegeofscripting/topalian_javascript_graph Happy Scripting :-)

Uploaded by

CollegeOfScripting
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 50

Topalian

JavaScript
Graph
by
Christopher Andrew Topalian
All Rights Reserved
Copyright 2000-2024
Dedicated
to
God the Father
<!-- Dedicated to God the Father -->

<!-- All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024 -->

<!-- https://github.com/ChristopherTopalian --
>

<!--
https://github.com/ChristopherAndrewTopalia
n -->

<!--
https://github.com/ChristopherTopalian/Topal
ianGameEngineDataNavigator -->

<!-- Topalian_JavaScript_Graph.html -->


<!-- Version 001 - (2024-04-23) -->

<html>
<head>
<title> Topalian JavaScript Graph </title>

<link rel = 'stylesheet' href =


'css/style001.css'>

<script src =
'js/1shortcuts/shortcuts.js'></script>

<script src =
'js/2worldVariables/worldVariables.js'></scrip
t>

<script src = 'js/data/temperature.js'></script>


<script src =
'js/make/makeGraph.js'></script>

<script src =
'js/make/makeGraphTitle.js'></script>

<script src =
'js/make/makeInfoDiv.js'></script>

<script src =
'js/make/makeTitleOfApp.js'></script>

<script src = 'js/sound/sounds.js'></script>

<script src =
'js/sound/loadSounds.js'></script>

<script src = 'js/sound/audioPlay.js'></script>


<script src =
'js/whenLoaded/whenLoaded.js'></script>

</head>

<body onload = "whenLoaded();">

</body>

</html>
/* Dedicated to God the Father */

/* All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024 */

/* https://github.com/ChristopherTopalian */

/*
https://github.com/ChristopherAndrewTopalia
n */

/* style001.css */

body
{
background-color: rgb(0, 0, 0);
}
a
{
color: rgb(100, 100, 100);
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

#graphTitle
{
font-family: Arial;
}

#mainDiv
{
position: relative;
width: 75%;
height: 55%;
margin: auto;
padding-right: 25px;
border: solid 1px rgb(255, 255, 255);
border-radius: 8px;
background-color: rgb(83, 83, 83);
overflow: scroll;
}

.dataPoint
{
width: 30px;
border: solid 1px rgb(255, 255, 255);
background-color: rgb(20, 20, 20);
font-family: arial;
font-size: 17px;
font-weight: bold;
color: rgb(255, 255, 255);
text-align: center;
}

.temperatureText
{
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
}

.yearLabel
{
position: absolute;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
font-family: arial;
font-size: 14px;
color: rgb(255, 255, 255);
}

#infoContainer
{
position: absolute;
left: 0px;
right: 0px;
width: 30%;
height: 50px;
margin: auto;
margin-top: 10px;
border: solid 3px rgb(255, 255, 255);
border-radius: 8px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
padding-bottom: 2px;
background-color: rgb(0, 0, 0);
font-family: Arial;
font-size: 30px;
font-weight: bold;
color: rgb(255, 255, 255);
text-align: center;
line-height: 43px;
overflow: hidden;
resize: none;
}

#titleOfApp
{
font-family: Arial;
font-weight: bold;
color: rgb(100, 100, 100);
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// shortcuts.js

function ge(whichId)
{
let result =
document.getElementById(whichId);
return result;
}

function ce(whichType)
{
let result =
document.createElement(whichType);

return result;
}

function ba(whichElement)
{
let result =
document.body.append(whichElement);

return result;
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// worldVariables.js

let online = false;


// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// temperature.js

let temperature =
[
20,
67,
35,
85,
32,
84,
26,
16,
18,
43,
34,
22,
83,
98,
38,
48,
77,
70,
40,
82,
21,
50,
78,
87,
45,
75,
45,
48,
90,
50,
70,
55,
45,
35,
20,
10,
98,
100,
125,
100,
83,
77,
70,
53,
100,
97,
30,
45,
16,
82
];
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// makeGraph.js

function makeGraph(whichArray)
{
let xPos = 15;
let yPos = 195;
//-//

let mainDiv = ce("div");


mainDiv.id = 'mainDiv';
ba(mainDiv);

//-//

for (let x = 0; x < whichArray.length; x++)


{
let dataPoint = ce("div");
dataPoint.id = 'dataPoint' + x;
dataPoint.className = "dataPoint";
dataPoint.style.position = 'absolute';
dataPoint.style.left = xPos + "px";
dataPoint.style.top = yPos -
whichArray[x] + "px";
dataPoint.style.height = whichArray[x] +
"px";
dataPoint.onmouseover = function()
{
audioPlay('sfx_warp_001', 1.0);

ge('temperature' + x).style.color =
'rgb(0, 255, 255)';

ge('dataPoint' + x).style.borderColor =
'rgb(0, 255, 255)';

ge('infoContainer').value =
whichArray[x];

ge('infoContainer').style.borderColor =
'rgb(0, 255, 255)';
ge('infoContainer').style.color = 'rgb(0,
255, 255)';
};

dataPoint.onmouseleave = function()
{
ge('temperature' + x).style.color =
'rgb(255, 255, 255)';

ge('dataPoint' + x).style.borderColor =
'rgb(255, 255, 255)';

ge('infoContainer').style.borderColor =
'rgb(255, 255, 255)';

ge('infoContainer').style.color =
'rgb(255, 255, 255)';
};
dataPoint.onclick = function()
{
audioPlay('sfx_blip_001', 1.0);

ge('temperature' + x).style.color =
'rgb(255, 0, 255)';

ge('dataPoint' + x).style.borderColor =
'rgb(255, 0, 255)';

ge('infoContainer').style.borderColor =
'rgb(255, 0, 255)';

ge('infoContainer').style.color =
'rgb(255, 0, 255)';
};
mainDiv.append(dataPoint);
//-//

let temperatureText = ce("div");


temperatureText.id = 'temperature' + x;
temperatureText.className =
"temperatureText";
temperatureText.textContent =
whichArray[x];
dataPoint.append(temperatureText);

//-//

let yearLabel =
document.createElement("div");
yearLabel.className = "yearLabel";
yearLabel.textContent = 1990 + x;
dataPoint.append(yearLabel);
//-//

xPos += 50;
}

//-//

let infoContainer = ce('textarea');


infoContainer.id = 'infoContainer';
mainDiv.insertAdjacentElement("afterend",
infoContainer);
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// makeGraphTitle.js

function makeGraphTitle()
{
let graphTitle = ce('div');
graphTitle.id = 'graphTitle';
graphTitle.innerHTML = 'Graph Title';
graphTitle.style.marginBottom = '7px';
graphTitle.style.fontSize = '30px';
graphTitle.style.fontWeight = 'bold';
graphTitle.style.color = 'rgb(255, 255, 255)';
graphTitle.style.textAlign = 'center';
ge('mainDiv').before(graphTitle);
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// makeInfoDiv.js

function makeInfoDiv()
{
let infoContainer = ce('textarea');
infoContainer.id = 'infoContainer';
infoContainer.style.position = 'relative';
infoContainer.style.margin = 'auto';
ge('mainDiv').after(infoContainer);
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// makeTitleOfApp.js

function makeTitleOfApp()
{
// titleContainer
let titleContainer = ce('div');
titleContainer.style.position = 'absolute';
titleContainer.style.right = '10px';
titleContainer.style.bottom = '5px';
titleContainer.style.zIndex = 1;
ba(titleContainer);

//-//

// titleOfApp
let titleOfApp = ce('div');
titleOfApp.id = 'titleOfApp';
titleOfApp.innerHTML =
`<a href =
'https://github.com/christophertopalian/topali
an_javascript_graph' target = '_blank'>
Topalian JavaScript Graph </a>`;
titleContainer.append(titleOfApp);
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// audioPlay.js

function audioPlay(whichId, whichVolume)


{
let audio = ge(whichId);

if (audio)
{
audio.volume = whichVolume;
audio.play();
}
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// loadSounds.js

function loadSounds(whichArray)
{
for (let x = 0; x < whichArray.length; x++)
{
let theSound = ce('audio');
if (online == false)
{
theSound.src =
whichArray[x].soundFileOffline;
}
else
{
theSound.src =
whichArray[x].soundFileOnline;
}

theSound.id = whichArray[x].name;
theSound.loop = false;
theSound.volume = 1.0;
ba(theSound);
}
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// sounds.js

let sounds =
[
{
name: 'sfx_blip_001',
soundFileOffline:
'media/sounds/sfx_blip_001.mp4',
soundFileOnline:
'https://collegeofscripting.weebly.com/upload
s/6/4/4/8/64482293/sfx_blip_001.mp4'
},

{
name: 'sfx_warp_001',
soundFileOffline:
'media/sounds/sfx_warp_001.mp3',
soundFileOnline:
'https://collegeofscripting.weebly.com/upload
s/6/4/4/8/64482293/sfx_warp_001.mp3'
}
];
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// whenLoaded.js

function whenLoaded()
{
loadSounds(sounds);

makeGraph(temperature);
makeGraphTitle();

makeTitleOfApp();
}
True Artificial Intelligence System
16-Gon
Tautology
MI 1111 CI
1101 1011
AND XNOR
0001 1001
LP RP
0011 0101

OR NOR
0111 1000

RC LC
1010 1100

XOR NAND
0110 1110
CNI MNI
Contra-
0100 0010
-diction
0000
For More Tutorials:
GitHub.com/ChristopherTopalian

GitHub.com/ChristopherAndrewTopalian

Sites.google.com/view/CollegeOfScripting

CollegeOfScripting.weebly.com

CollegeOfScripting.wordpress.com

Youtube.com/ScriptingCollege

Twitter.com/CollegeOfScript
Dedicated to God the Father
This book is created by the
College of Scripting Music & Science.
Always remember, that each time you write a script
with a pencil and paper, it becomes imprinted so
deeply in memory that the material and methods are
learned extremely well.
When you Type the scripts, the same is true. The
more you type and write out the scripts by keyboard
or pencil and paper, the more you will learn
programming!
Write and Type every example that you find.
Keep all of your scripts organized.
Every script that you create increases your
programming abilities.
SEEING CODE, is one thing,
but WRITING CODE is another.
Write it, Type it, Speak it, See it, Dream it.
CollegeOfScripting.weebly.com

You might also like