viewgit/inc/functions.php:22 Function utf8_encode() is deprecated [8192]
/** * SeekQuarry/Yioop -- * Open Source Pure PHP Search Engine, Crawler, and Indexer * * Copyright (C) 2009 - 2019 Chris Pollett chris@pollett.org * * LICENSE: * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see <https://www.gnu.org/licenses/>. * * END LICENSE * * @author Chris Pollett * @license https://www.gnu.org/licenses/ GPL3 * @link https://www.seekquarry.com/ * @copyright 2016 * @filesource */ /** * Defines a class useful for making point and line graph charts. * * @param String chart_id id of tag that the chart will be drawn into * @param Object data a sequence {x_1:y_1, ... x_1,y_n} points to plot * x_i's can be arbitrary labels, y_i's are assumes to be floats * @param Object (optional) properties override values for any of the * properties listed in the property_defaults variable below */ function Chart(chart_id, data) { var self = this; var p = Chart.prototype; var properties = (typeof arguments[2] !== 'undefined') ? arguments[2] : {}; var container = document.getElementById(chart_id); if (!container) { return false; } var property_defaults = { 'axes_color' : 'rgb(128,128,128)', // color of the x and y axes lines 'caption' : '', // caption text appears at bottom 'caption_style' : 'font-size: 14pt; text-align: center;', // CSS styles to apply to caption text 'data_color' : 'rgb(0,0,255)', //color used to draw grah 'height' : 500, //height of area to draw into in pixels 'line_width' : 1, // width of line in line graph 'x_padding' : 30, //x-distance left side of canvas tag to y-axis 'y_padding' : 30, //y-distance bottom of canvas tag to x-axis 'point_radius' : 3, //radius of points that are plot in point graph 'tick_length' : 10, // length of tick marks along axes 'ticks_y' : 5, // number of tick marks to use for the y axis 'tick_font_size' : 10, //size of font to use when labeling ticks 'title' : '', // title text appears at top 'title_style' : 'font-size:24pt; text-align: center;', // CSS styles to apply to title text 'type' : 'LineGraph', // currently, can be either a LineGraph, //PointGraph or BarGraph 'width' : 500 //width of area to draw into in pixels }; for (var property_key in property_defaults) { if (typeof properties[property_key] !== 'undefined') { this[property_key] = properties[property_key]; } else { this[property_key] = property_defaults[property_key]; } } title_tag = (this.title) ? '<div style="' + this.title_style + 'width:' + this.width + '" >' + this.title + '</div>' : ''; caption_tag = (this.caption) ? '<figcaption style="' + this.caption_style + 'width:' + this.width + '" >' + this.caption + '</figcaption>' : ''; container.innerHTML = '<figure>'+ title_tag + '<canvas id="' + chart_id + '-content" ></canvas>' + caption_tag + '</figure>'; canvas = document.getElementById(chart_id + '-content'); if (!canvas || typeof canvas.getContext === 'undefined') { return } var context = canvas.getContext("2d"); canvas.width = this.width; canvas.height = this.height; this.data = data; /** * Main function used to draw the graph type selected */ p.draw = function() { self['draw' + self.type](); } /** * Used to store in fields the min and max y values as well as the start * and end x keys, and the range = max_y - min_y */ p.initMinMaxRange = function() { self.min_value = null; self.max_value = null; self.start; self.end; var key; var val; for (key in data) { val = parseFloat(data[key]); if (self.min_value === null) { self.min_value = val; self.max_value = val; self.start = key; } if (val < self.min_value) { self.min_value = val; } if (val > self.max_value) { self.max_value = val; } } self.end = key; self.range = self.max_value - self.min_value; } /** * Used to draw a point at location x,y in the canvas */ p.plotPoint = function(x,y) { var c = context; c.beginPath(); c.arc(x, y, self.point_radius, 0, 2 * Math.PI, true); c.fill(); } /** * Used to draw a bar from the x-axis, to the point x,y */ p.plotBar = function(x,y) { var height = self.height - self.y_padding - self.tick_length; var y_bottom = self.tick_length + height * ((1 + self.min_value)/self.range); var c = context; c.beginPath(); c.rect(x - self.point_radius/2, height + self.tick_length, self.point_radius, y - self.tick_length - height + self.point_radius); c.fill(); } /** * Draws the x and y axes for the chart as well as ticks marks and values */ p.renderAxes = function() { var c = context; var height = self.height - self.y_padding; c.strokeStyle = self.axes_color; c.lineWidth = self.line_width; c.beginPath(); c.moveTo(self.x_padding - self.tick_length, self.height - self.y_padding); c.lineTo(self.width - self.x_padding, height); // x axis c.stroke(); c.beginPath(); c.moveTo(self.x_padding, self.tick_length); c.lineTo(self.x_padding, self.height - self.y_padding + self.tick_length); // y axis c.stroke(); var spacing_y = self.range/self.ticks_y; height -= self.tick_length; var min_y = parseFloat(self.min_value); var max_y = parseFloat(self.max_value); var num_format = new Intl.NumberFormat("en-US", {"maximumFractionDigits":2}); // Draw y ticks and values for (var val = min_y; val < max_y + spacing_y; val += spacing_y) { y = self.tick_length + height * (1 - (val - self.min_value)/self.range); c.font = self.tick_font_size + "px serif"; c.fillText(num_format.format(val), 0, y + self.tick_font_size/2, self.x_padding - self.tick_length); c.beginPath(); c.moveTo(self.x_padding - self.tick_length, y); c.lineTo(self.x_padding, y); c.stroke(); } // Draw x ticks and values var dx = (self.width - 2 * self.x_padding) / (Object.keys(data).length - 1); var x = self.x_padding; for (key in data) { c.font = self.tick_font_size + "px serif"; c.fillText(key, x - self.tick_font_size/2 * (key.length - 0.5), self.height - self.y_padding + self.tick_length + self.tick_font_size, self.tick_font_size * (key.length - 0.5)); c.beginPath(); c.moveTo(x, self.height - self.y_padding + self.tick_length); c.lineTo(x, self.height - self.y_padding); c.stroke(); x += dx; } } /** * Draws a chart consisting of just x-y plots of points in data. */ p.drawPointGraph = function() { self.initMinMaxRange(); self.renderAxes(); var dx = (self.width - 2*self.x_padding) / (Object.keys(data).length - 1); var c = context; c.lineWidth = self.line_width; c.strokeStyle = self.data_color; c.fillStyle = self.data_color; var height = self.height - self.y_padding - self.tick_length; var x = self.x_padding; for (key in data) { y = self.tick_length + height * (1 - (data[key] - self.min_value)/self.range); self.plotPoint(x, y); x += dx; } } /** * Draws a chart consisting of x-y plots of points in data, each adjacent * point pairs connected by a line segment */ p.drawLineGraph = function() { self.drawPointGraph(); var c = context; c.beginPath(); var x = self.x_padding; var dx = (self.width - 2*self.x_padding) / (Object.keys(data).length - 1); var height = self.height - self.y_padding - self.tick_length; c.moveTo(x, self.tick_length + height * (1 - (data[self.start] - self.min_value)/self.range)); for (key in data) { y = self.tick_length + height * (1 - (data[key] - self.min_value)/self.range); c.lineTo(x, y); x += dx; } c.stroke(); } /** * Draws a chart consisting of x-y plots of points in data, where each * data point is a bar from the x-axis to the point in question */ p.drawBarGraph = function() { self.initMinMaxRange(); self.renderAxes(); var dx = (self.width - 2*self.x_padding) / (Object.keys(data).length - 1); var c = context; c.lineWidth = self.line_width; c.strokeStyle = self.data_color; c.fillStyle = self.data_color; var height = self.height - self.y_padding - self.tick_length; var x = self.x_padding; for (key in data) { y = self.tick_length + height * (1 - (data[key] - self.min_value)/self.range); self.plotBar(x, y); x += dx; } } }