simplecharts

SVG charts without dependencies
git clone https://git.ce9e.org/simplecharts.git

commit
acb3a2a9397f6e2373458d4913be1faa21aaae4c
parent
5002071519ea6c841447cbf7c1fd997747d15891
Author
Tobias Bengfort <bengfort@mpib-berlin.mpg.de>
Date
2026-04-13 11:58
add math example

Diffstat

A tests/math.json 22 ++++++++++++++++++++++
A tests/math_ColumnRenderer.svg 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
A tests/math_LineRenderer.svg 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
A tests/math_StackedAreaRenderer.svg 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
A tests/math_StackedColumnRenderer.svg 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

5 files changed, 298 insertions, 0 deletions


diff --git a/tests/math.json b/tests/math.json

@@ -0,0 +1,22 @@
   -1     1 {
   -1     2     "rows": [{
   -1     3         "label": "0",
   -1     4         "values": [0, 0]
   -1     5     }, {
   -1     6         "label": "1",
   -1     7         "values": [2, 1]
   -1     8     }, {
   -1     9         "label": "2",
   -1    10         "values": [4, 4]
   -1    11     }, {
   -1    12         "label": "3",
   -1    13         "values": [6, 9]
   -1    14     }, {
   -1    15         "label": "1",
   -1    16         "values": [8, 16]
   -1    17     }, {
   -1    18         "label": "5",
   -1    19         "values": [10, 25]
   -1    20     }],
   -1    21     "legend": ["linear", "square"]
   -1    22 }

diff --git a/tests/math_ColumnRenderer.svg b/tests/math_ColumnRenderer.svg

@@ -0,0 +1,68 @@
   -1     1 <svg font-family="sans-serif" font-size="16" viewBox="-55 -25 700 530" xmlns="http://www.w3.org/2000/svg">
   -1     2 	<style>
   -1     3 		@media (prefers-color-scheme: dark) {
   -1     4 			[fill="#333"] {fill: white}
   -1     5 			[stroke="#333"] {stroke: white}
   -1     6 		}
   -1     7 	</style>
   -1     8 	<g role="table">
   -1     9 		<line stroke="#333" x1="0" x2="0" y1="0" y2="480" />
   -1    10 		<line stroke="#333" x1="0" x2="640" y1="480" y2="480" />
   -1    11 		<g aria-hidden="true">
   -1    12 			<text dominant-baseline="middle" fill="#333" text-anchor="end" x="-4" y="480">0</text>
   -1    13 			<text dominant-baseline="middle" fill="#333" text-anchor="end" x="-4" y="240">14</text>
   -1    14 			<text dominant-baseline="middle" fill="#333" text-anchor="end" x="-4" y="0">28</text>
   -1    15 		</g>
   -1    16 		<g role="row">
   -1    17 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="53.3333" y="490">0</text>
   -1    18 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="160" y="490">1</text>
   -1    19 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="266.6667" y="490">2</text>
   -1    20 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="373.3333" y="490">3</text>
   -1    21 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="480" y="490">1</text>
   -1    22 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="586.6667" y="490">5</text>
   -1    23 		</g>
   -1    24 		<g aria-hidden="true">
   -1    25 			<rect fill="none" height="20" stroke="#333" width="166" x="474" y="-20" />
   -1    26 			<rect fill="#e41a1c" height="10" width="10" x="478" y="-15" />
   -1    27 			<text dominant-baseline="middle" fill="#333" x="492" y="-10">linear</text>
   -1    28 			<rect fill="#377eb8" height="10" width="10" x="562" y="-15" />
   -1    29 			<text dominant-baseline="middle" fill="#333" x="576" y="-10">square</text>
   -1    30 		</g>
   -1    31 		<g fill="#e41a1c" role="row" stroke="white">
   -1    32 			<rect height="0" role="cell" width="26.6667" x="26.6667" y="479" />
   -1    33 			<rect height="34.2857" role="cell" width="26.6667" x="133.3333" y="444.7143">
   -1    34 				<title>2</title>
   -1    35 			</rect>
   -1    36 			<rect height="68.5714" role="cell" width="26.6667" x="240" y="410.4286">
   -1    37 				<title>4</title>
   -1    38 			</rect>
   -1    39 			<rect height="102.8571" role="cell" width="26.6667" x="346.6667" y="376.1429">
   -1    40 				<title>6</title>
   -1    41 			</rect>
   -1    42 			<rect height="137.1429" role="cell" width="26.6667" x="453.3333" y="341.8571">
   -1    43 				<title>8</title>
   -1    44 			</rect>
   -1    45 			<rect height="171.4286" role="cell" width="26.6667" x="560" y="307.5714">
   -1    46 				<title>10</title>
   -1    47 			</rect>
   -1    48 		</g>
   -1    49 		<g fill="#377eb8" role="row" stroke="white">
   -1    50 			<rect height="0" role="cell" width="26.6667" x="53.3333" y="479" />
   -1    51 			<rect height="17.1429" role="cell" width="26.6667" x="160" y="461.8571">
   -1    52 				<title>1</title>
   -1    53 			</rect>
   -1    54 			<rect height="68.5714" role="cell" width="26.6667" x="266.6667" y="410.4286">
   -1    55 				<title>4</title>
   -1    56 			</rect>
   -1    57 			<rect height="154.2857" role="cell" width="26.6667" x="373.3333" y="324.7143">
   -1    58 				<title>9</title>
   -1    59 			</rect>
   -1    60 			<rect height="274.2857" role="cell" width="26.6667" x="480" y="204.7143">
   -1    61 				<title>16</title>
   -1    62 			</rect>
   -1    63 			<rect height="428.5714" role="cell" width="26.6667" x="586.6667" y="50.4286">
   -1    64 				<title>25</title>
   -1    65 			</rect>
   -1    66 		</g>
   -1    67 	</g>
   -1    68 </svg>

diff --git a/tests/math_LineRenderer.svg b/tests/math_LineRenderer.svg

@@ -0,0 +1,70 @@
   -1     1 <svg font-family="sans-serif" font-size="16" viewBox="-55 -25 700 530" xmlns="http://www.w3.org/2000/svg">
   -1     2 	<style>
   -1     3 		@media (prefers-color-scheme: dark) {
   -1     4 			[fill="#333"] {fill: white}
   -1     5 			[stroke="#333"] {stroke: white}
   -1     6 		}
   -1     7 	</style>
   -1     8 	<g role="table">
   -1     9 		<line stroke="#333" x1="0" x2="0" y1="0" y2="480" />
   -1    10 		<line stroke="#333" x1="0" x2="640" y1="480" y2="480" />
   -1    11 		<g aria-hidden="true">
   -1    12 			<text dominant-baseline="middle" fill="#333" text-anchor="end" x="-4" y="480">0</text>
   -1    13 			<text dominant-baseline="middle" fill="#333" text-anchor="end" x="-4" y="240">14</text>
   -1    14 			<text dominant-baseline="middle" fill="#333" text-anchor="end" x="-4" y="0">28</text>
   -1    15 		</g>
   -1    16 		<g role="row">
   -1    17 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="53.3333" y="490">0</text>
   -1    18 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="160" y="490">1</text>
   -1    19 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="266.6667" y="490">2</text>
   -1    20 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="373.3333" y="490">3</text>
   -1    21 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="480" y="490">1</text>
   -1    22 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="586.6667" y="490">5</text>
   -1    23 		</g>
   -1    24 		<g aria-hidden="true">
   -1    25 			<rect fill="none" height="20" stroke="#333" width="166" x="474" y="-20" />
   -1    26 			<rect fill="#e41a1c" height="10" width="10" x="478" y="-15" />
   -1    27 			<text dominant-baseline="middle" fill="#333" x="492" y="-10">linear</text>
   -1    28 			<rect fill="#377eb8" height="10" width="10" x="562" y="-15" />
   -1    29 			<text dominant-baseline="middle" fill="#333" x="576" y="-10">square</text>
   -1    30 		</g>
   -1    31 		<polyline fill="none" points="53.3333,480 160,445.7143 266.6667,411.4286 373.3333,377.1429 480,342.8571 586.6667,308.5714" stroke="#e41a1c" />
   -1    32 		<polyline fill="none" points="53.3333,480 160,462.8571 266.6667,411.4286 373.3333,325.7143 480,205.7143 586.6667,51.4286" stroke="#377eb8" />
   -1    33 		<g fill="#e41a1c" role="row" stroke="white">
   -1    34 			<circle cx="53.3333" cy="480" r="3" role="cell" />
   -1    35 			<circle cx="160" cy="445.7143" r="3" role="cell">
   -1    36 				<title>2</title>
   -1    37 			</circle>
   -1    38 			<circle cx="266.6667" cy="411.4286" r="3" role="cell">
   -1    39 				<title>4</title>
   -1    40 			</circle>
   -1    41 			<circle cx="373.3333" cy="377.1429" r="3" role="cell">
   -1    42 				<title>6</title>
   -1    43 			</circle>
   -1    44 			<circle cx="480" cy="342.8571" r="3" role="cell">
   -1    45 				<title>8</title>
   -1    46 			</circle>
   -1    47 			<circle cx="586.6667" cy="308.5714" r="3" role="cell">
   -1    48 				<title>10</title>
   -1    49 			</circle>
   -1    50 		</g>
   -1    51 		<g fill="#377eb8" role="row" stroke="white">
   -1    52 			<circle cx="53.3333" cy="480" r="3" role="cell" />
   -1    53 			<circle cx="160" cy="462.8571" r="3" role="cell">
   -1    54 				<title>1</title>
   -1    55 			</circle>
   -1    56 			<circle cx="266.6667" cy="411.4286" r="3" role="cell">
   -1    57 				<title>4</title>
   -1    58 			</circle>
   -1    59 			<circle cx="373.3333" cy="325.7143" r="3" role="cell">
   -1    60 				<title>9</title>
   -1    61 			</circle>
   -1    62 			<circle cx="480" cy="205.7143" r="3" role="cell">
   -1    63 				<title>16</title>
   -1    64 			</circle>
   -1    65 			<circle cx="586.6667" cy="51.4286" r="3" role="cell">
   -1    66 				<title>25</title>
   -1    67 			</circle>
   -1    68 		</g>
   -1    69 	</g>
   -1    70 </svg>

diff --git a/tests/math_StackedAreaRenderer.svg b/tests/math_StackedAreaRenderer.svg

@@ -0,0 +1,70 @@
   -1     1 <svg font-family="sans-serif" font-size="16" viewBox="-55 -25 700 530" xmlns="http://www.w3.org/2000/svg">
   -1     2 	<style>
   -1     3 		@media (prefers-color-scheme: dark) {
   -1     4 			[fill="#333"] {fill: white}
   -1     5 			[stroke="#333"] {stroke: white}
   -1     6 		}
   -1     7 	</style>
   -1     8 	<g role="table">
   -1     9 		<line stroke="#333" x1="0" x2="0" y1="0" y2="480" />
   -1    10 		<line stroke="#333" x1="0" x2="640" y1="480" y2="480" />
   -1    11 		<g aria-hidden="true">
   -1    12 			<text dominant-baseline="middle" fill="#333" text-anchor="end" x="-4" y="480">0</text>
   -1    13 			<text dominant-baseline="middle" fill="#333" text-anchor="end" x="-4" y="240">20</text>
   -1    14 			<text dominant-baseline="middle" fill="#333" text-anchor="end" x="-4" y="0">40</text>
   -1    15 		</g>
   -1    16 		<g role="row">
   -1    17 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="53.3333" y="490">0</text>
   -1    18 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="160" y="490">1</text>
   -1    19 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="266.6667" y="490">2</text>
   -1    20 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="373.3333" y="490">3</text>
   -1    21 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="480" y="490">1</text>
   -1    22 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="586.6667" y="490">5</text>
   -1    23 		</g>
   -1    24 		<g aria-hidden="true">
   -1    25 			<rect fill="none" height="20" stroke="#333" width="166" x="474" y="-20" />
   -1    26 			<rect fill="#e41a1c" height="10" width="10" x="478" y="-15" />
   -1    27 			<text dominant-baseline="middle" fill="#333" x="492" y="-10">linear</text>
   -1    28 			<rect fill="#377eb8" height="10" width="10" x="562" y="-15" />
   -1    29 			<text dominant-baseline="middle" fill="#333" x="576" y="-10">square</text>
   -1    30 		</g>
   -1    31 		<polygon fill="#e41a1c" points="53.3333,479 160,455 266.6667,431 373.3333,407 480,383 586.6667,359 586.6667,479 480,479 373.3333,479 266.6667,479 160,479 53.3333,479" stroke="white" />
   -1    32 		<polygon fill="#377eb8" points="53.3333,479 160,443 266.6667,383 373.3333,299 480,191 586.6667,59 586.6667,359 480,383 373.3333,407 266.6667,431 160,455 53.3333,479" stroke="white" />
   -1    33 		<g fill="#e41a1c" role="row" stroke="white">
   -1    34 			<circle cx="53.3333" cy="479" r="3" role="cell" />
   -1    35 			<circle cx="160" cy="455" r="3" role="cell">
   -1    36 				<title>2</title>
   -1    37 			</circle>
   -1    38 			<circle cx="266.6667" cy="431" r="3" role="cell">
   -1    39 				<title>4</title>
   -1    40 			</circle>
   -1    41 			<circle cx="373.3333" cy="407" r="3" role="cell">
   -1    42 				<title>6</title>
   -1    43 			</circle>
   -1    44 			<circle cx="480" cy="383" r="3" role="cell">
   -1    45 				<title>8</title>
   -1    46 			</circle>
   -1    47 			<circle cx="586.6667" cy="359" r="3" role="cell">
   -1    48 				<title>10</title>
   -1    49 			</circle>
   -1    50 		</g>
   -1    51 		<g fill="#377eb8" role="row" stroke="white">
   -1    52 			<circle cx="53.3333" cy="479" r="3" role="cell" />
   -1    53 			<circle cx="160" cy="443" r="3" role="cell">
   -1    54 				<title>1</title>
   -1    55 			</circle>
   -1    56 			<circle cx="266.6667" cy="383" r="3" role="cell">
   -1    57 				<title>4</title>
   -1    58 			</circle>
   -1    59 			<circle cx="373.3333" cy="299" r="3" role="cell">
   -1    60 				<title>9</title>
   -1    61 			</circle>
   -1    62 			<circle cx="480" cy="191" r="3" role="cell">
   -1    63 				<title>16</title>
   -1    64 			</circle>
   -1    65 			<circle cx="586.6667" cy="59" r="3" role="cell">
   -1    66 				<title>25</title>
   -1    67 			</circle>
   -1    68 		</g>
   -1    69 	</g>
   -1    70 </svg>

diff --git a/tests/math_StackedColumnRenderer.svg b/tests/math_StackedColumnRenderer.svg

@@ -0,0 +1,68 @@
   -1     1 <svg font-family="sans-serif" font-size="16" viewBox="-55 -25 700 530" xmlns="http://www.w3.org/2000/svg">
   -1     2 	<style>
   -1     3 		@media (prefers-color-scheme: dark) {
   -1     4 			[fill="#333"] {fill: white}
   -1     5 			[stroke="#333"] {stroke: white}
   -1     6 		}
   -1     7 	</style>
   -1     8 	<g role="table">
   -1     9 		<line stroke="#333" x1="0" x2="0" y1="0" y2="480" />
   -1    10 		<line stroke="#333" x1="0" x2="640" y1="480" y2="480" />
   -1    11 		<g aria-hidden="true">
   -1    12 			<text dominant-baseline="middle" fill="#333" text-anchor="end" x="-4" y="480">0</text>
   -1    13 			<text dominant-baseline="middle" fill="#333" text-anchor="end" x="-4" y="240">20</text>
   -1    14 			<text dominant-baseline="middle" fill="#333" text-anchor="end" x="-4" y="0">40</text>
   -1    15 		</g>
   -1    16 		<g role="row">
   -1    17 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="53.3333" y="490">0</text>
   -1    18 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="160" y="490">1</text>
   -1    19 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="266.6667" y="490">2</text>
   -1    20 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="373.3333" y="490">3</text>
   -1    21 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="480" y="490">1</text>
   -1    22 			<text dominant-baseline="middle" fill="#333" role="columnheader" text-anchor="middle" x="586.6667" y="490">5</text>
   -1    23 		</g>
   -1    24 		<g aria-hidden="true">
   -1    25 			<rect fill="none" height="20" stroke="#333" width="166" x="474" y="-20" />
   -1    26 			<rect fill="#e41a1c" height="10" width="10" x="478" y="-15" />
   -1    27 			<text dominant-baseline="middle" fill="#333" x="492" y="-10">linear</text>
   -1    28 			<rect fill="#377eb8" height="10" width="10" x="562" y="-15" />
   -1    29 			<text dominant-baseline="middle" fill="#333" x="576" y="-10">square</text>
   -1    30 		</g>
   -1    31 		<g fill="#e41a1c" role="row" stroke="white">
   -1    32 			<rect height="0" role="cell" width="35.5556" x="35.5556" y="479" />
   -1    33 			<rect height="24" role="cell" width="35.5556" x="142.2222" y="455">
   -1    34 				<title>2</title>
   -1    35 			</rect>
   -1    36 			<rect height="48" role="cell" width="35.5556" x="248.8889" y="431">
   -1    37 				<title>4</title>
   -1    38 			</rect>
   -1    39 			<rect height="72" role="cell" width="35.5556" x="355.5556" y="407">
   -1    40 				<title>6</title>
   -1    41 			</rect>
   -1    42 			<rect height="96" role="cell" width="35.5556" x="462.2222" y="383">
   -1    43 				<title>8</title>
   -1    44 			</rect>
   -1    45 			<rect height="120" role="cell" width="35.5556" x="568.8889" y="359">
   -1    46 				<title>10</title>
   -1    47 			</rect>
   -1    48 		</g>
   -1    49 		<g fill="#377eb8" role="row" stroke="white">
   -1    50 			<rect height="0" role="cell" width="35.5556" x="35.5556" y="479" />
   -1    51 			<rect height="12" role="cell" width="35.5556" x="142.2222" y="443">
   -1    52 				<title>1</title>
   -1    53 			</rect>
   -1    54 			<rect height="48" role="cell" width="35.5556" x="248.8889" y="383">
   -1    55 				<title>4</title>
   -1    56 			</rect>
   -1    57 			<rect height="108" role="cell" width="35.5556" x="355.5556" y="299">
   -1    58 				<title>9</title>
   -1    59 			</rect>
   -1    60 			<rect height="192" role="cell" width="35.5556" x="462.2222" y="191">
   -1    61 				<title>16</title>
   -1    62 			</rect>
   -1    63 			<rect height="300" role="cell" width="35.5556" x="568.8889" y="59">
   -1    64 				<title>25</title>
   -1    65 			</rect>
   -1    66 		</g>
   -1    67 	</g>
   -1    68 </svg>