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:

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;....'>