Graph API
How do I make an graph api?
Simple API for having data-driven graphs of two types: bar and point.. What is a graph api? How do you make a graph api? This script and codes were developed by Mnicpt on 30 July 2022, Saturday.
Graph API - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Graph API</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body { background: linear-gradient(to bottom, #ccc, #fff); height: 100%;
}
.chart { display: inline-block; width: 320px; margin: 60px;
}
.chart.bar .data { height: 0;
}
.chart.dot .data { border-radius: 3px; bottom: 0;
}
.chart .graph { position: relative; display: inline-block; border: 1px solid #555; border-top: 0; border-right: 0; height: 140px; width: 320px;
}
.chart .graph .data { position: absolute; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 100%); font-family: Avenir, sans-serif; font-size: 10px; box-sizing: border-box; border: 1px solid #aaa; border-bottom: none; bottom: 0; width: 1px; height: 1px; text-align: center; opacity: 0; transform-origin: bottom; transition: all 1s ease-out;
}
.chart .graph .data .value { position: absolute; left: 0; margin-top: -15px;
}
.chart .xAxis { position: relative; left: 325px; bottom: 12px; font-family: Avenir, sans-serif;
}
.chart .yAxis { position: relative; display: inline-block; left: 8px; top: -2px; transform: rotate(-90deg); transform-origin: bottom left; font-family: Avenir, sans-serif;
}
.dataEntry { postion: absolute; font-family: Avenir,sans-serif; float: right; margin-top: 20px; margin-right: 20px;
}
.dataEntry label { font-size: 12px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="graph1 bar chart"></div>
<div class="graph2 dot chart"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Graph API - Script Codes CSS Codes
html, body { background: linear-gradient(to bottom, #ccc, #fff); height: 100%;
}
.chart { display: inline-block; width: 320px; margin: 60px;
}
.chart.bar .data { height: 0;
}
.chart.dot .data { border-radius: 3px; bottom: 0;
}
.chart .graph { position: relative; display: inline-block; border: 1px solid #555; border-top: 0; border-right: 0; height: 140px; width: 320px;
}
.chart .graph .data { position: absolute; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 100%); font-family: Avenir, sans-serif; font-size: 10px; box-sizing: border-box; border: 1px solid #aaa; border-bottom: none; bottom: 0; width: 1px; height: 1px; text-align: center; opacity: 0; transform-origin: bottom; transition: all 1s ease-out;
}
.chart .graph .data .value { position: absolute; left: 0; margin-top: -15px;
}
.chart .xAxis { position: relative; left: 325px; bottom: 12px; font-family: Avenir, sans-serif;
}
.chart .yAxis { position: relative; display: inline-block; left: 8px; top: -2px; transform: rotate(-90deg); transform-origin: bottom left; font-family: Avenir, sans-serif;
}
.dataEntry { postion: absolute; font-family: Avenir,sans-serif; float: right; margin-top: 20px; margin-right: 20px;
}
.dataEntry label { font-size: 12px;
}
Graph API - Script Codes JS Codes
/* Graph API: data - elem : {}, type : "line" || "dot" x_label : String y_label : String values : [Number] graph(data); TODO: 3-D flag
*/
var graph = (function(){ return function(data) { var $graph = data.elem, xAxis_template = "<div class=\"xAxis\">{{xAxisValue}}</div>", yAxis_template = "<div class=\"yAxis\">{{yAxisValue}}</div>", data_template = "<div class=\"data\" data-value=\"{{value}}\" style=\"{{style}}\"><span class=\"value\"></span></div>"; //set y-axis labels var prefixHTML = yAxis_template.replace("{{yAxisValue}}", data.y_label); $graph.append(prefixHTML); var dataHTML = "<div class=\"graph\">"; //create bar graph for (var i = 0; i < data.values.length; i++) { var html = data_template.replace("{{style}}", generateStyling(data.values, i)); html = html.replace(/{{value}}/g, data.values[i]); dataHTML += html; } dataHTML += "</div>"; $graph.append(dataHTML); //set x-axis label var suffixHTML = xAxis_template.replace("{{xAxisValue}}", data.x_label); $graph.append(suffixHTML); //private functions function getMaxOfArray(numArray) { return Math.max.apply(null, numArray); } function generateStyling(values, index) { var widthStyle = "width:" +parseInt(100 / (values.length * 2 + 1), 10)+ "%;", dotStyle = "width:6px;height:6px;", leftStyle = "left:" + parseInt(100 / (values.length * 2 + 1) * (2 * i + 1), 10) + "%;", red = 0, green = 150 + parseInt(Math.random() * 56, 10), blue = 200 + parseInt(Math.random() * 56, 10), backgroundStyle = "background-color:rgb("+ red +", "+ green +", "+ blue + ");", barStyle = data.type === "bar" ? widthStyle : dotStyle; return leftStyle + backgroundStyle + barStyle; } //animate graph setTimeout(function(){ $('[data-value]').each(function(){ var $this = $(this), maxValue = getMaxOfArray(data.values), dataScale = $(".graph").height() / maxValue, graphIsBarChart = $this.is(".bar.chart > .graph .data"); //set changed value var value = $this.data('value'); if (graphIsBarChart) { $this.css({ height: value / maxValue * 100 + "%", transform:"scaleY(" +1+ ")", opacity:1 }); $this.children('.value').text(value); } else { $this.css({ transform:"translateY(" +value * -dataScale + "px)", opacity:1 }); $this.children('.value').text(value); } }); }, 500); }
})();
var data = { elem : $('.graph1'), type : "bar", x_label : "Exams", y_label : "Grades", values : [25, 40, 55, 60, 65, 70, 93, 86, 79, 60, 54, 43]
};
graph(data);
data.elem = $('.graph2');
data.type = "dot";
data.values = [70, 93, 86, 79, 60, 54, 43]
graph(data);
Developer | Mnicpt |
Username | mnicpt |
Uploaded | July 30, 2022 |
Rating | 3 |
Size | 4,456 Kb |
Views | 50,600 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Angular Calculator | 3,616 Kb |
Rotate Image | 1,843 Kb |
SerializedAsyncQueue | 2,800 Kb |
Simple Grid | 4,606 Kb |
Solve Intersecting Lines | 1,792 Kb |
Fading Divider | 1,728 Kb |
A Pen by mnicpt | 3,851 Kb |
Contact Snippet | 1,815 Kb |
Balanced Binary Search Tree | 2,313 Kb |
Quick Sort | 7,584 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
Prism | Pyrografix | 2,843 Kb |
Ball Physics | Getsetbro | 3,149 Kb |
Email Marketing Mock | Kristenzirkler | 8,224 Kb |
Website Concept | Sagoza | 3,104 Kb |
Smoke Shader - Frame Buffer | Omarshe7ta | 2,672 Kb |
Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
BenU Maintenance Site | Ksherman | 4,893 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!