willianchu / drawbarchart Goto Github PK

Draws a simple bar chart or a stacked bar charts.

This project generate bar charts or staked bar charts on pages using HTML, CSS and JavaScript.

The signature of the function should be as follows:

drawBarChart(data, options, element);

The data parameter will be the data the chart should work from Start with just an Array of numbers e.g. [1, 2, 3, 4, 5]

The options parameter should be an object which has options for the chart. e.g. width and height of the bar chart

The element parameter should be a DOM element or jQuery element that the chart will get rendered into.

This project allows a user call the function from html and draw two types of bar charts graph.

• Simple Bar Chart const data = [[1390,1450,1910,1290,1810]];
• Stack Bar Chart const data = [[39,45,91,29,81],[29,35,77,15,58],[12,25,47,5,38]];

drawBarChart(data, options, element);

Where is:

• data - is a list of array/ arrays
• options - have settings keys of the graph (more details below)
• element - element of the dom

• backgroundColour - Colour of the canvas background.
• title - Title of the graph
• titleFontSize - Title font size
• titleColour - Title font colour
• bcHeight - Bar Chart total Height in Canvas
• bcWith - Bar Chart total width in Canvas
• bcAxes - description of each bar in array ( ["first","second","third","fourth","fifth"])
• barColour - The colour of the bars in a simple bar chart the first colour it will be set only ([ "brown", "blue", "pink", "orange", "gray", "red"])
• barSpacing - the space between bars in points
• labelColour - The font colour of the Axes description
• fontSize - Font size in points of the labels
• fontColour - Font colour of the labels
• dataPosition - position of the bar labels could be top, bottom or centre

1. Background Colour Control
2. Automatic Scale Lines
3. Automatic Identify Simple Bars and Stack Bars Graphs
4. Values positioning preferences
5. Automatic bars distribution according with the array's size

1. Until this realease, the function do not accept a redraw when it call twice drawBarChart();.
2. In a stack bar graph, the data must be in crescent order or bar colors will overide others.

It miss a description of individual data on stack bar graph.

Most of the resources were found:

https://www.w3schools.com

https://api.jquery.com/

https://github.com/