bulma-graphs

• Why Do I need It?
• Dependencies
• Normal Setup
• NPM Setup
• Settings
• Minimal Structure

Like it? Have a look at Bulma Framebox.

A dynamic fixed box to display news/hints/ads in a Bulma CSS fashion.

By default the box is at the bottom-right corner of the website. It will stop cycling if you hover/touch over the element, or disable it in the settings. Github Preview

Why Do I Need It?

To display your statistics.

Dependencies

Since the custom.sass/custom.css is built upon the Bulma CSS Framework, it is recommended to use this as your base. However if you want to write your own CSS, go ahead. The Javascript should keep working, if you keep the necessary ids/classes and HTML structure.

Going Vanilla JS, no JQuery needed! Lightweight and totally free of any JS frameworks.

Javascript version: ES6. (rewriting it for crossbrowser compatibility is simple.)

Normal Setup

The recommended structure is the following:

<div class="graphs-container" data-title="Horizontal Graph">
    <div class="data-container column is-full columns is-mobile is-size-7 has-text-white is-marginless">
        <div data-title="One" data-value="10"></div>
        <div data-title="Two" data-value="50"></div>
        <div data-title="Three" data-value="100"></div>
    </div>
</div>

IMPORTANT data-container classes: is-vertical-graph for vertical, columns for horizontal. data-value: this represents the pixels|percentage of the visualized bar. Just try it. I recommend staying within the 0-100 range, so it will work on horizontal and vertical graphs by default. Need it larger? Increase the heightMultiplicator|widthMultiplicator.

via npm

npm install bulma-graphs

Settings

Currently you can tweak the JS settings directly within the graphs.js file. These are the default values.

let graphs = { // initialize object with settings
    settings: {
        animation: true,            // true | false
        autoGenerate: true,         // true | false
        containerItemSelector: '.graphs-container .data-container div',
        containerSelector: '.graphs-container',
        errorMessages: true,        // true | false
        heightMultiplicator: 3,     // scales in pixel
        widthMultiplicator: 1,      // scales in % (percentage)
    },
};

Minimal Structure

This is the minimal structure needed to keep the script running how it was supposed to:

<div class="graphs-container" data-title="">
    <div class="data-container is-vertical-graph|columns">
        <div data-title="" data-value="10"></div>
        <div data-title="" data-value="50"></div>
        <div data-title="" data-value="100"></div>
    </div>
</div>

IMPORTANT data-container classes: is-vertical-graph for vertical, columns for horizontal.

data-title's: Are used to generate the titles. They are not required.

Make as many of these as you want on your page.

I think we are done here.