README
Example Chart Implementation Settings Chart Instructions
javascript charts

MFChartColumn

I thought I would have a go at seeing if chatGPT could help me write a simple column chart library to present values historically on a webpage. The result was perhaps a little more involved than I wanted, and took about 4 days in the end, mostly due to all the additional options I thought should be there, and some sizing fine tuning - but this was the result.

The point of this library was

  1. To plot date/value pairs on a relative scale (filling in any missing dates)
  2. To be lightweight and simple to implement and deploy
  3. To be responsive, with dates changing on the axis to fit appropriately
  4. Apply a decent vertical axis step (versions of 1, 2, 2.5 and 5)

Example Chart

Also see jsfiddle.net to run an editable demo.

Implementation

To use mf-chart-column, simply place a div on your html including the data and the controls as attributes for the div.

html
<div id="chart" class="mf-column-chart"
     data="2022-08-01=5,2022-08-05=52,2022-08-15=22,2022-10-21=49,2022-12-31=54,2023-02-12=102">
</div>

if you wanted to just pass in values from a start date, then use data and data-start attributes:

html
<div class="mf-column-chart"
         data-start="2022-08-01"
         data="5,6,10,12,40,,,10,20,10,15,16">
</div>

then define your chart height using css (or an inline div style)

css
#chart {
    width:100%;
    height:200px;
}

and include the library in your head

html
<script src="https://methodfish.com/Download/MFChartColumn/files/latest/js/mf-chart-column.js"></script>

Alternatively, if you need to trigger a chart generation after page load then you can use the mfColumnChart(divElem); javascript command

Settings

In addition to the data attribute, you can use the following attributes on your div:

data-startstart date (yyyy-mm-dd) for data of type n,n,n,...
data-prefixtext added to before a value seen on the vertical axis
data-unitstext added to after the value when presented in a column mouseover/hover popup
data-controlssemi-column separated list of chart painting instructions to customize the chart. See Chart Instructions below

e.g.

    
    
    <div class='mf-column-chart' 
         data='2022-12-31=10.21,2023-12-31=12.22' 
         data-controls="trace=T;xAxisTickMarks=T;columnWidthMin=200;yAxisScalePrefix=GBP;yAxisScale=AUTO;"></div>
    
    

Chart Instructions

The following instructions are supported by the data-controls attribute, each separated by a semi-colon, e.g. <div ... data-controls='chartAreaColorBg=black;xAxisLineColorCd=white;....'>

ControlNotes
trace(T/F) Turns on tracing seen in the browser console ; default=F
help(T/F) Dumps the valid controls to the browser console
chartAreaColorBg(color code) Set the background color of the chart canvas (e.g. red, #ff0000, etc) , e.g. red, #fff, green, etc
columnColorCd(color code) Set the color of the chart columns (e.g. red, #ff0000, etc) ; default=#aeaec3
columnValues(T/F) Enables column values shown at the top of the columns (or bottom if the value is negative) ; default=F
columnValuesChartMinWidth(integer) Set the minimum width of chart that supports chart values; charts thinner than this will not show chart values at the end of the plotted column ; default=0
columnValuesColorCd(color code) Set the color of column values found at the top/bottom of each column if columnValues=T
columnValuesFont(font-size and name) Set the font for column values if columnValues=T ; default=12px Arial
columnValueHoverFont(font-size and name) Set the font name and size of the text in a column value hover ; default=12px Arial
columnValueHoverFontColorCd(color code) Set the color the text in a column value hover ; default=black
columnValuesLabelYOffset(integer) Y position adjustment for column value display if columnValues=T ; default=10
columnWidthMax(integer) Overrides the maximum width of columns on the chart
columnWidthMin(integer) Overrides the minimum width of columns on the chart; warning: this settings can cause columns of overlap.
hoverColumnNTips(T/F) Enable mouse over column hover display boxes to show date and value; Also use data-prefix and data-units attributes on the chart-container to adjust the value being shown ; default=T
marginLeft(integer) margin left for the chart ; default=15
marginRight(integer) margin right for the chart ; default=5
marginBottom(integer) margin bottom for the chart ; default=4
marginTop(integer) margin top for the chart (note, the axis labels will want to nudge the top here, so the font size is used to account for this)
plotAreaBox(T/F) Add a box around the plot area (the area the grid lines can be found) ; default=F
plotAreaBoxColorCd(color code) Adjust the plot area box color ; default=white
plotAreaBoxLineWidth(integer) Adjust the plot area box line width ; default=1
plotAreaColorBg(color code) Adjust the color of the plot area background , e.g. red, #fff, green, etc'
plotPaddingLeft(integer) Adjust the left/start x-position of the plot columns ; default=20
plotPaddingRight(integer) Adjust the right/last x-position of the plot columns ; default=20
xAxisLine(T/F) Enable the display of the horizontal x-axis line at the y position of 0 ; default=T
xAxisLineColorCd(color code) Adjust the x-axis line color ; default=black
xAxisTickMarks(T/F) Enable the display of tick marks on the horizontal x-axis showing the column dates ; default=T
xAxisTickMarksColorCd(color code) Adjust the color of the tick marks on the horizontal x-axis showing the column dates ; default=black
xAxisValueColorCd(color code) Adjust the color of the date values on the horizontal x-axis ; default=black
xAxisValueFont(font-size and name) Set the font used on the date axis values ; default=12px Arial
yAxisFont(font-size and name) Set the font used on the vertical value axis values ; default=12px Arial
yAxisGridColorCd(color code) Adjust the color of the vertical values on the y-axis ; default=#eaeaef
yAxisGridLines(T/F) Enable the display of the horizontal grid lines for each y-axis value; gridlines sit behind the columns unless yAxisGridLinesOverlay=T ; default=T
yAxisGridLinesOverlay(T/F) Make gridlines sit on top of the columns ; default=F
yAxisLabelPaddingLeft(integer) Pad the left of the y-axis value labels on the left of the chart ; default=0
yAxisLabelPaddingRight(integer) Pad the right of the y-axis value labels on the left of the chart - moves these labels away from the y-axis line ; default=0
yAxisLine(T/F) Enable the display of the vertical y-axis line at the left of the chart ; default=T
yAxisScale(integer) Divide the values shown on the leftside y-axis by this, e.g. yAxisScale=1000000 and yAxisScaleTx=m will divide all numbers by 1,000,000 and add "m" to the label so that "1,500,000" would become "1.5m"; set to "AUTO" to have the library compute the most appropriate values to be shown (k or m) ; default=1
yAxisScaleTx(text) Add text to the right of each y-axis value, e.g. "k" or "m"
yAxisScalePrefix(text) Add text to the left of each y-axis value, e.g. "GBP"
yAxisTickCountMin(integer) Set the minimum number of ticks that the logic should use to find an appropriate y-axis tick step ; default=3
yAxisTickCountMax(integer) Set the maximum number of ticks that the logic should use to find an appropriate y-axis tick step ; default=6
yAxisTickValueColorCd(color code) Set the color of the vertical y-axis values on the left of the chart ; default=black
yAxisTickWidth(integer) Set the width of small line-ticks found to the left of the yAxisLine ; default=4

link Click to view a demo

square

About

License

Latest Release

Version 1.0110 weeks ago