-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Images on "About - Git"/"Small and Fast" are "404 Not Found" #1862
Comments
hey @jhcarl0814 , which images? the page is displaying fine for me |
@pedrorijo91 Each The page currently looks like this: According to wayback machine e.g. 2024-01-01 the page should look like this: |
oh, seems to be using some google service, which ofc has been killed in the meanwhile according with https://stackoverflow.com/questions/77757225/alternative-for-charts-googleapis-com-for-generating-qr-code-in-google-sheets not sure the best solution here |
Here is an example using Visualization: Column Chart | Charts | Google for Developers: <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div1" style="display: inline-block;"></div>
<script>
google.load('visualization', '1', {packages:['corechart'], callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'style', });
data.addRows([
['git', 0.649, 'color: #E09FA0', ],
['svn', 2.6, 'color: #E05F49', ],
]);
(new google.visualization.ColumnChart(document.querySelector('#chart_div1'))).draw(data, {
backgroundColor: "transparent",
height: 125,
width: 100,
chartArea: { top: 0, right: 0, bottom: 20, left: 0, },
enableInteractivity: false,
legend: { position: 'none', },
vAxis: {
textPosition: 'none',
gridlines: { color: 'transparent', },
viewWindowMode: 'explicit',
viewWindow: {
min: 0,
max: 3,
},
},
});
}, });
</script>
<div id="chart_div2" style="display: inline-block;"></div>
<script>
google.load('visualization', '1', {packages:['corechart'], callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'style', });
data.addRows([
['git', 1.53, 'color: #E09FA0', ],
['svn', 24.7, 'color: #E05F49', ],
]);
(new google.visualization.ColumnChart(document.querySelector('#chart_div2'))).draw(data, {
backgroundColor: "transparent",
height: 125,
width: 100,
chartArea: { top: 0, right: 0, bottom: 20, left: 0, },
enableInteractivity: false,
legend: { position: 'none', },
vAxis: {
textPosition: 'none',
gridlines: { color: 'transparent', },
viewWindowMode: 'explicit',
viewWindow: {
min: 0,
max: 25,
},
},
});
}, });
</script> It can't center the title, so you have to add the CSS-centered title outside the chart yourself. |
Another alternative would be to use Mermaid diagrams. Or using d3.js, which would allow us to pre-render the diagrams server-side (which would also work well once we switch to Hugo). Something like this should work: const d3 = require('d3');
const { createCanvas } = require('canvas');
const { saveSvgAsPng } = require('save-svg-as-png');
const width = 100;
const height = 125;
const canvas = createCanvas(width, height);
const svg = d3.select(canvas).append('svg')
.attr('width', width)
.attr('height', height);
// Data for the bar chart
const data = [
{ label: "git", value: 0.649, color: "#E09FA0" },
{ label: "svn", value: 2.6, color: "#E05F49" }
];
// Set up the scales
const x = d3.scaleBand()
.domain(data.map(d => d.label))
.range([0, width - margin.left - margin.right])
.padding(0.1);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.nice()
.range([height - margin.top - margin.bottom, 0]);
// Add the x-axis
svg.append("g")
.attr("transform", `translate(0,${height - margin.top - margin.bottom})`)
.call(d3.axisBottom(x));
// Add the bars
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("x", d => x(d.label))
.attr("y", d => y(d.value))
.attr("width", x.bandwidth())
.attr("height", d => height - margin.top - margin.bottom - y(d.value))
.attr("fill", d => d.color);
// Add the title
svg.append("text")
.attr("x", (width - margin.left - margin.right) / 2)
.attr("y", -margin.top / 2)
.attr("text-anchor", "middle")
.style("font-size", "12px")
.text("Commit A");
saveSvgAsPng(svg.node(), 'output.png'); Obviously this can be parameterized to avoid repetitive code. |
URL for broken page
Small and Fast
Problem
Images are "404 Not Found".
Operating system and browser
Windows 11 23H2 22631.3880 x64
Google Chrome 127.0.6533.100 (Official Build) (64-bit)
Steps to reproduce
Other details
The text was updated successfully, but these errors were encountered: