| MFChartColumn / 1.0 / demo / demo.html file last updated : 2023-08-11 |
|---|
<!doctype html>
<html>
<head>
<script src="../js/mf-chart-column.js"></script>
<style>
* {
font-family:"Segoe UI";
}
div {
margin-left:0;
padding:0;
}
.mf-column-chart {
display:block;
width:100%;
height:150px;
margin-bottom:30px;
}
canvas {
border:solid 1px pink;
}
#chart1, #chart2 {
width:calc(50vw - 20px)!important;
}
#chart1 {
margin-right:10px;
}
</style>
</head>
<body>
<div style="display:table-row">
<div style="display:table-cell">
<h1>chart 1</h1>
<div id="chart1" 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"
data-units="hits"
data-controls="trace=T;plotAreaBox=Y;marginTop=0;xAxisTickMarks=T;yAxisGridLines=T;;columnValues=T;yAxisTickWidth=0;columnValuesChartMinWidth=500">
</div>
</div>
<div style="display:table-cell">
<h1>chart 2</h1>
<div id="chart2" class="mf-column-chart"
data="2022-08-01=-1900,2022-08-16=1152,2022-08-17=200,2022-09-25=1522"
data-units="hits"
data-controls="trace=N;xAxisTickMarks=T;yAxisGridLinesOverlay=T;yAxisGridLines=T;xAxisTickMarksColorCd=red;yAxisFont=10px 'Times New Roman';columnColorCd=magenta;columnValues=F;yAxisScale=1000;yAxisScaleTx=k;yAxisLabelPaddingLeft=5;yAxisLabelPaddingRight=10">
</div>
</div>
</div>
<h1>chart 3</h1>
<div id="chart3" class="mf-column-chart"
data="2022-08-01=5,2022-09-05=6,2022-10-29=7,2022-10-30=7"
data-units="hits"
data-controls="xAxisTickMarks=T;columnWidthMin=10">
</div>
<h1>chart 4</h1>
<div id="chart4" class="mf-column-chart"
data="2022-08-01=5"
data-units="hits"
data-controls="xAxisTickMarks=T0">
</div>
<h1>chart 5</h1>
<div id="chart5" class="mf-column-chart"
data="2022-08-01=5;2022-08-02=15;2022-08-03=5;2022-08-04=15;2022-08-05=5;2022-08-06=-5;2022-08-07=5;2022-08-08=5"
data-units="per day"
data-prefix="GBP"
data-controls="trace=x;xAxisTickMarks=T;columnValues=T;columnWidthMax=75;yAxisScalePrefix=GBP">
</div>
chart 6
<div id="chart6" class="mf-column-chart"
data-controls="help=d"
data-start="2022-08-01"
data="5,6,10,12,40,,,10,20,10,15,16,-2,10,12,12.5,13,12.75,14,17,14,12,10,11,13,15,17,19,22,23,29,31,29,28,27,27.1,33,33,32,33,32,33,34,35,36,34,37,34,37,38,39,40,39,37,30,37,38,39,29,31,29,10,5,0,29,51,70,60,52,54,30,35,32,36,33,39,40,41,30,42,43">
</div>
</body>
</html>Also see
articles/Implementing-a-Monaco-Editorsquarearticles/iConnectionTestsquarearticles/javascript-camerasquarearticles/list-editsquarearticles/minifierssquarearticles/opayosquarearticles/table-drag-sortersquarearticles/typewatchsquareprojects/MFCalendarPopupsquareprojects/MFChartColumnsquareprojects/MFColorPickersquareprojects/MFColorPickerBasicsquareprojects/MFColumnGradientsquareprojects/MFFloatawayMsgsquareprojects/MFPanelssquareprojects/MFSelectorsquare
Comments
New Comment