Home

column-graphs

column-graphs (cg for short) is a JavaScript library based on some of the functionalities of Tietomilli's analyzing tool (the page is in Finnish only). The library currently contains two graph types: stacked bars and compare categories. All configuration variables can be changed but they also have default values so there's no explicit need to set any of them. With default configuration the graphs are suited especially well for survey data.

column-graphs includes:

• Legends - click to show/hide corresponding data on graph
• Text wrapping for legends and axis texts
• Customizable settings such as width/height, colors and automatic margins
• Sort ascending/descending
• Percentage texts over bars with automatic size, color and orientation
• Automatically resize graph when resizing browser (can be disabled)

Requirements

D3.js 4.0.0 or higher (tested up to 4.12.0).

Supported module formats

column-graphs supports AMD and CommonJS but it can also be used without any module loader.

Examples

JSFiddle of stacked bars with survey data (percentages)

JSFiddle of compare categories with survey data (percentages)

JSFiddle of stacked bars with product sales data (absolute values)

Examples also contain some configuration changes and explanations in JavaScript comments.

Styling

column-graphs doesn't require any css file since the D3 elements use inline css so they can easily be changed dynamically. However, it's useful to add the following to your css file so clickable D3 elements such as legends have correct mouse pointer on hover:

.clickable {
    cursor: pointer;
}

It's also possible to give custom classes to some elements and then style those classes with css. For example cg.addTitle('Stacked bars & Compare values of categories','cg-title') adds a title text above the graph with its class set to 'cg-title' so it can then be styled with:

.cg-title {
    margin-left: 50px;
}

Short usage guide

Drawing a graph with column-graphs requires four things minimum:

1. Json file containing data. Initialized with cg.initData('data.json')
2. Json file containing metadata. Initialized with cg.initMetadata('metadata.json')
3. A div with id 'cg-main' or a div with custom id that has been set with cg.setConf('mainDiv','custom-id') or with cg.initSvg('','','custom-id'), first two parameters being width and height (defaults to 600 px width and 500 px height) and third one is the custom id for the main div
4. Divs, svgs and selects initialized inside the main div with cg.initSvg

Examples of required data files

Example of data.json:

[
    {
        "Value": 3,
        "Age": 3,
        "Gender": 1
    },
    {
        "Value": 2,
        "Age": 7,
        "Gender": 1
    },
    {
        "Value": 3,
        "Age": 5,
        "Gender": 1
    }
]

Example of metadata.json:

{
    "Choices": {
        "1": "Strongly Agree",
        "2": "Agree",
        "3": "Neither agree nor disagree",
        "4": "Disagree",
        "5": "Strongly disagree",
        "8": "Can't say"
    },
    "Groups": {
        "Age": {
            "1": "15-19",
            "2": "20-24",
            "3": "25-29",
            "4": "30-34",
            "5": "35-39",
            "6": "40-44",
            "7": "45-49",
            "8": "50-54",
            "9": "55-59",
            "10": "60-64",
            "11": "65-69",
            "12": "70-75"
        },
        "Gender": {
            "1": "Male",
            "2": "Female"
        }
    }
}

Other important notes and tips

• Changing configuration variables calls cg.initSvg if it had already been called before which then empties the main div and recreates the svgs and selects, so for example added title also gets removed when using cg.setConf
• Percentage is used for the y axis by default but it can be changed to use absolute values with cg.setConf('valueAs',['absolute','']) and the second string in array takes any D3 format such as '$' to format as currency. Note that in D3 '$' is always used to format as currency and locale determines the symbol on axis texts
• Data and metadata need to be formatted as in the examples but you can use different keys if you then give the custom keys as parameters to cg.initData and cg.initMetadata
• By default the amount of values is calculated by checking how many entries have the same 'Value' and other key, for example 'Age'. This can be changed to use key 'Count' instead for the amount of values so for example:
  
  data.json with dataCount as false

  [
    {
        "Value": 1,
        "Age": 1,
        "Gender": 1
    },
    {
        "Value": 1,
        "Age": 1,
        "Gender": 1
    },
    {
        "Value": 1,
        "Age": 1,
        "Gender": 1
    },
    {
        "Value": 1,
        "Age": 1,
        "Gender": 2
    },
    {
        "Value": 1,
        "Age": 1,
        "Gender": 2
    },
  ]

  and data.json with dataCount as true

  [
    {
        "Value": 1,
        "Age": 1,
        "Gender": 1,
        "Count": 3
    },
    {
        "Value": 1,
        "Age": 1,
        "Gender": 2,
        "Count": 2
  ]

  are the exact same thing.

Descriptions of documentation pages

List of editable configuration variables can be found in config namespace.

List of functions usable with "cg.functionName()” can be found in cg namespace. Click the links to the private function to check the parameters and functionality description.

Resizing browser event is handled with optimizedResize class that has resizeGraph as callback by default and it automatically sets the width of the graph svg to be somewhere between left offset + minimum width, left offset + browser width and left offset + maximum width. Options are moved to below the graph after browser width is smaller than left offset + graph width + options width.

List of all global (within columnGraphs module) functions and variables can be found in columnGraphs module.