Graph API

Developer
Size
4,456 Kb
Views
50,600

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 Previews

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);
Graph API - Script Codes
Graph API - Script Codes
Home Page Home
Developer Mnicpt
Username mnicpt
Uploaded July 30, 2022
Rating 3
Size 4,456 Kb
Views 50,600
Do you need developer help for Graph API?

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!

Mnicpt (mnicpt) Script Codes
Create amazing marketing copy with AI!

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!