Simple Website Charts

Every once in a while, it’s nice to add a chart 📊 to your website.

Perhaps the easiest way to do this is to create an Excel spreadsheet. In Excel, create the chart (Insert Chart). Save as Webpage (not as single file Webpage). Go find the chart images (.png files). Choose the one you want to use on your webpage, resize if needed. Done! You can have any kind of chart you want this way – Bar, Pie, Trend, etc.

Or you can go to the other extreme – HTML5 Canvas or SVG. If you know what these are and are a pro at them, go ahead. Otherwise, I’ll suffice it to say they require trigonometry. Yes, when I was young, I used to be quite good at trig. That was an eon or two ago. I could do it, yes. But I’m not into that much work. Tutorial on Drawing a Pie Chart using Javascript and HTML5 Canvas

Another option is to install a Javascript Charting Library. Or possibly a micro Javascript Trend Charting Library such as Smoothie Charts or Sparkline.

I recently created a simple bar chart of Tesla Semi Orders on my website Fantastic Stories for You. I used the x_repeat function of my Expressive Websites javascript library. But you can create the bar manually without javascript.

Here’s the HTML code:
<div id=”teslasemi” style=”width: 400px; border: 1px solid Sienna;”>
<h3>Who’s buying Tesla Electric Semis?</h3>
Jan 2018
<span style=”color: #7ab855; margin-right: -1em; opacity: .99;”><sup><script> x_d_w(x_repeat(‘&#x2587’,125,5))</script></sup></span><sub><img src=”semi.gif” alt=”Electric Semis” height=”18″ /></sub> UPS 125

<span style=”color: #7ab855; margin-right: -1em; opacity: .99;”><sup><script>x_d_w(x_repeat(‘&#x2587’,100,5))</script></sup></span><sub><img src=”semi.gif” alt=”Electric Semis” height=”18″ /></sub> Pepsi 100


<span style=”color: #7ab855; margin-right: -1em; opacity: .99;”><sup><script>x_d_w(x_repeat(‘&#x2587’,8,5))</script></sup></span><sub><img src=”semi.gif” alt=”Electric Semis” height=”18″ /></sub> Meijer, JK Moving 4 each

<span style=”color: #7ab855; margin-right: -1em; opacity: .99;”><sup><script>x_d_w(x_repeat(‘&#x2587’,14,5))</script></sup></span><sub><img src=”semi.gif” alt=”Electric Semis” height=”18″ /></sub> Other 14+ Tesla, JB Hunt, Fercam, Ryder, Flexport, Gertika Logistics, Fertigo Freight, Best Transportation, Mecca & Son, NFI, Bison Transport, Posten Norge. XPO Logistics is test driving, but no reports yet of orders.

<p style=”font-size: smaller;”>Info from various articles, including <a href=”http://www.businessinsider.com/companies-that-ordered-tesla-semi-2017-12″>Business Insider</a></p>
</div>
x_d_w(x_repeat(‘&#x2587’,125,5)) – x_d_w is from my javascript library and is simply a short way of saying document.write. x_repeat is also from my javascript library and simply repeats the character n/m times. In this case 125/5. You can just manually place the character you want in your HTML code n/m times. UPS had 125 orders, but I don’t want my bar chart to be that wide, so I divide each order amount by 5 (and round).
&#x2587 is a wide square ▇. Works quite well in Firefox and Chrome. Edge leaves a hairline between each character. Not a big deal.
<img src=”semi.gif”>I wanted a green semi picture, so I went to Emojipedia and searched for Semi. It found Articulated Lorry. Then I was presented with several options. I could have put &#x1f69b; 🚛 in my HTML and had a semi show up (or at least an articulated lorry). However, if somebody was browsing using Apple, they’d get the Apple image. If they were using Edge, they’d get the Microsoft image, etc. That’s usually not a big deal. But I wanted a semi facing the other way. Google, Twitter, and Mozilla emoji’s look like they’re free to me. EmojiOne are free with attribution. The Twitter semi emoji (twemoji) was green which was the color I wanted, so I copied that image and reversed it.
Now I had green bars going into a green semi – sort of.

The bars were the not the same color green as the semi, so I found out the semi’s color using color picker in Photo Filtre. I applied that color to the bar – #7AB855.

Now the semi’s edges stood out. Adding margin-right:-1em and opacity:.99 made the bars overlap the semi. Without opacity, both the bars and the semi have an opacity of 1 (100% opacity / 0% transparency). And if the opacity of two consecutive elements are the same and they overlap, the last one is brought to the front. To get the first one to come to the front, give it a slightly lesser opacity. The opacity difference is not noticeable and will bring the first element to the front. And that took care of the edges of the semi showing up.

Now the bars and semi were not aligned vertically. Superscripting <sup> the bars and subscripting <sub> the semi did the trick. The Lorry is somewhat larger in Edge, but still achieves the same effect. Probably need to express the semi height in em rather than px. But it works and I’m lazy.

Meijer and JK Moving had only ordered 4 Tesla Semi each. I had placed each as a separate bar. But since 4/5 rounded is 1, that meant only 1 bar character. And the margin-right:-.1em shoved the line back to the left margin – ignoring my .
is another goodie from my javascript library. It indents the line. My javascript library turns into .
Since I was reaching the optimum maximum of 12 elements per graph, I just combined these two on one line.

And thus a chart was born. Not a lot of work. Mostly play.