Coder Social home page Coder Social logo

474softwaredesign's Introduction

stackBarChart

This javascript function creates a stacked bar chart from a .csv file

Instructions

Create a root folder and place an empty HTML file named 'index.html'. Inside root the root folder, create new folder 'js' and place stackBarChart.js inside the 'js' folder.

In the head of index.html, refer to stackBarChart.js as <script type="text/javascript" src="./js/stackBarChart.js"></script>

and the d3 library as <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

Inside the body of index.html, create script tags and create an instance of stackBarChart with the following call

var foo = new stackBarChart();

stackBarChart.FileGlobal(filepath)

Function to specify the name and location of the .csv file to populate the chart.

filepath: Full filepath of .csv file as a string. Filepath is relative to the index.html file. For example, a .csv file in the 'js' folder would be foo.FileGlobal("./js/bar.csv");

The .csv file must satisfy the following conditions:

  • Every row of data is equal to a whole bar in the chart, each individual value in a column corresponds to the length of the "sub-bar."

  • All values are numerical, with the exception of the first row. The first row should consist of text that describes the meaning of the columns. Otherwise, non-numerical columns should be removed.

  • No missing values

Files may be modified or created from different file formats so long as they conform to standard .csv formatting https://en.wikipedia.org/wiki/Comma-separated_values#Example

stackBarChart.displayGraph()

Displays a stacked bar chart of the .csv data on an empty HTML page. Nothing will be displayed in the event of an improperly formatted or improperly referred .csv file.

foo.fileGlobal(bar) must have been previously called.

Function must be called after values changed from the default to appear on the screen.

stackBarChart.Width(num)

Specifies the width of the chart. 500 by default.

num: New width for the chart, in pixels. If num is not passed, returns the current Width.

stackBarChart.Height(num)

Specifies the height of the chart. 500 by default.

num: New height for the chart, in pixels. If num is not passed, returns the current Height.

stackBarChart.Padding(num)

Specifies the amount of padding between bars. 0.1 by default.

num: New amount of padding between bars, in pixels. If num is not passed, returns the current padding.

474softwaredesign's People

Contributors

ladpal avatar omar2112 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.