Mapwale Charts Maker

Beautiful Charts PROJECT
is now Mapwale Charts

Beautiful Charts began in 2019 as a project to create a simple JS functions that return quality svg graphs. It was merged into mapwale.com in 2023 and currently a part of Vision AI as a service offering. The charts scripts continious to be free forever for everyone with additional Vision service to autofill any data from anywhere.

Select Graph Type

Mapwale Charts

Simple Free JS functions that return quality svg graphs.

IMPLEMENT HTML

FILE: charts.component.html

<form [formGroup]="graphDataForm" class="graph-data-form">
        <ng-container [ngSwitch]="selectedGraphType">

<div class="graph-preview-container">
        <svg #graphSvg width="500" height="350" class="graph-preview">
          
        </svg>
      </div>

<ng-container *ngSwitchCase="'line'">
            <div class="data-input-section">

<mat-form-field class="full-width">
                <mat-label>X-Axis Labels (comma-separated)</mat-label>
                <input matInput formControlName="xLabels" 
                       placeholder="e.g., Jan, Feb, Mar">
              </mat-form-field>

<mat-form-field class="full-width">
                <mat-label>Y-Axis Values (comma-separated)</mat-label>
                <input matInput formControlName="yValues" 
                       placeholder="e.g., 10, 15, 13">
              </mat-form-field>

</div>
          </ng-container>

<ng-container *ngSwitchCase="'bar'">
            <div class="data-input-section">
              <mat-form-field class="full-width">
                <mat-label>Categories (comma-separated)</mat-label>
                <input matInput formControlName="categories" 
                       placeholder="e.g., A, B, C">
              </mat-form-field>
              <mat-form-field class="full-width">
                <mat-label>Values (comma-separated)</mat-label>
                <input matInput formControlName="values" 
                       placeholder="e.g., 20, 35, 15">
              </mat-form-field>
            </div>
          </ng-container>

<ng-container *ngSwitchCase="'donut'">
            <div class="data-input-section">
              <mat-form-field class="full-width">
                <mat-label>Slice Labels (comma-separated)</mat-label>
                <input matInput formControlName="donutLabels" 
                       placeholder="e.g., Sales, Marketing, Support">
              </mat-form-field>
              <mat-form-field class="full-width">
                <mat-label>Slice Values (comma-separated)</mat-label>
                <input matInput formControlName="donutValues" 
                       placeholder="e.g., 30, 50, 20">
              </mat-form-field>
            </div>
          </ng-container>

<ng-container *ngSwitchCase="'pie'">
            <div class="data-input-section">
              <mat-form-field class="full-width">
                <mat-label>Slice Labels (comma-separated)</mat-label>
                <input matInput formControlName="pieLabels" 
                       placeholder="e.g., Sales, Marketing, Support">
              </mat-form-field>
              <mat-form-field class="full-width">
                <mat-label>Slice Values (comma-separated)</mat-label>
                <input matInput formControlName="pieValues" 
                       placeholder="e.g., 30, 50, 20">
              </mat-form-field>
            </div>
          </ng-container>

<ng-container *ngSwitchCase="'scatter'">
            <div class="data-input-section">
              <mat-form-field class="full-width">
                <mat-label>X Coordinates (comma-separated)</mat-label>
                <input matInput formControlName="xCoords" 
                       placeholder="e.g., 1, 2, 3, 4">
              </mat-form-field>
              <mat-form-field class="full-width">
                <mat-label>Y Coordinates (comma-separated)</mat-label>
                <input matInput formControlName="yCoords" 
                       placeholder="e.g., 10, 15, 7, 12">
              </mat-form-field>
            </div>
          </ng-container>
        </ng-container>
      </form>

IMPLEMENT TS

FILE: charts.component.ts

IMPLEMENT CSS

FILE: charts.component.css

COMMON PROCESSOR

FILE: common.beautiful.ts

import { createLineGraph } from './line-graph.mapwale';
  import { createBarGraph } from './bar-graph.mapwale';
  import { createPieChart } from './pie-chart.mapwale';
  import { createDonutChart } from './donut-chart.mapwale';
  import { createScatterPlot } from './scatter-plot.mapwale';
  
  export interface ChartOptions <>{
    width?: number;
    height?: number;
    margin?: number;
  }
  
  export function generateChartSVG(
    type: 'line' | 'bar' | 'scatter' | 'donut' | 'pie', 
    data: any[], 
    labels: string[], 
    options: ChartOptions = {}
  ): string {
    const defaultOptions: ChartOptions = {
      width: 500,
      height: 350,
      margin: 50
    };
  
    const mergedOptions = { ...defaultOptions, ...options };
  
    switch(type) {
      case 'line':
        return createLineGraph(data, labels, mergedOptions);
      case 'bar':
        return createBarGraph(data, labels, mergedOptions);
      case 'donut':
        return createDonutChart(data, labels, mergedOptions);
      case 'pie':
        return createPieChart(data, labels, mergedOptions);
      case 'scatter':
        return createScatterPlot(data, labels, mergedOptions);
      default:
        throw new Error('Unsupported chart type');
    }
  }
  
  // Utility function to validate and parse input
  export function parseInputString(input: string): number[] {
    return input.split(',')
      .map(value => value.trim())
      .map(value => parseFloat(value))
      .filter(value => !isNaN(value));

Dependency for Line Graph

FILE: line-graph.mapwale.ts
Create beautiful Line Graph charts

import { ChartOptions } from './common.beautiful';
  
  export function createLineGraph(
    data: number[], 
    labels: string[], 
    options: ChartOptions|any
  ): string {
    const { width, height, margin } = options;
  
    const maxY = Math.max(...data);
    const xScale = (width - margin * 2) / (data.length - 1);
    const yScale = (height - margin * 2) / maxY;
  
    // Create SVG string
    let svg = &#96;<svg xmlns="http://www.w3.org/2000/svg" width="&#36;{width}" height="&#36;{height}">&#96;;
    
    // X-axis
    svg += &#96;<line x1="&#36;{margin}" y1="&#36;{height - margin}" x2="&#36;{width - margin}" y2="&#36;{height - margin}" stroke="black"/>&#96;;
    
    // Y-axis
    svg += &#96;<line x1="&#36;{margin}" y1="&#36;{margin}" x2="&#36;{margin}" y2="&#36;{height - margin}" stroke="black"/>&#96;;
  
    // X-axis labels
    labels.forEach((label, index) => {
      const x = margin + index * xScale;
      svg += &#96;<text x="&#36;{x}" y="&#36;{height - margin + 20}" text-anchor="middle">&#36;{label}</text>&#96;;
    });
  
    // Y-axis labels
    const yTickCount = 5;
    for (let i = 0; i <= yTickCount; i++) {
      const y = height - margin - (i * (height - margin * 2) / yTickCount);
      const value = Math.round(i * maxY / yTickCount);
      svg += &#96;<text x="&#36;{margin - 10}" y="&#36;{y}" text-anchor="end" alignment-baseline="middle">&#36;{value}</text>&#96;;
    }
  
    // Line points
    const points = data.map((value, index) => 
      &#96;&#36;{margin + index * xScale},&#36;{height - margin - value * yScale}&#96;
    ).join(' ');
    
    svg += &#96;<polyline points="&#36;{points}" fill="none" stroke="blue" stroke-width="2"/>&#96;;
  
    svg += '</svg>';
    return svg;

Dependency for Bar Graph

FILE: bar-graph.mapwale.ts
Create beautiful Bar Graph charts

import { ChartOptions } from './common.beautiful';
  
  export function createBarGraph(
    data: number[], 
    labels: string[], 
    options: ChartOptions|any
  ): string {
    const { width, height, margin } = options;
  
    const barWidth = (width - margin * 2) / data.length;
    const maxValue = Math.max(...data);
    const yScale = (height - margin * 2) / maxValue;
  
    // Create SVG string
    let svg = &#96;<svg xmlns="http://www.w3.org/2000/svg" width="&#36;{width}" height="&#36;{height}">&#96;;
    
    // X-axis
    svg += &#96;<line x1="&#36;{margin}" y1="&#36;{height - margin}" x2="&#36;{width - margin}" y2="&#36;{height - margin}" stroke="black"/>&#96;;
    
    // Y-axis
    svg += &#96;<line x1="&#36;{margin}" y1="&#36;{margin}" x2="&#36;{margin}" y2="&#36;{height - margin}" stroke="black"/>&#96;;
  
    // X-axis labels
    labels.forEach((label, index) => {
      const x = margin + index * barWidth + barWidth / 2;
      svg += &#96;<text x="&#36;{x}" y="&#36;{height - margin + 20}" text-anchor="middle">&#36;{label}</text>&#96;;
    });
  
    // Y-axis labels
    const yTickCount = 5;
    for (let i = 0; i <= yTickCount; i++) {
      const y = height - margin - (i * (height - margin * 2) / yTickCount);
      const value = Math.round(i * maxValue / yTickCount);
      svg += &#96;<text x="&#36;{margin - 10}" y="&#36;{y}" text-anchor="end" alignment-baseline="middle">&#36;{value}</text>&#96;;
    }
  
    // Bars
    data.forEach((value, index) => {
      const x = margin + index * barWidth;
      const barHeight = value * yScale;
      svg += &#96;<rect 
        x="&#36;{x}" 
        y="&#36;{height - margin - barHeight}" 
        width="&#36;{barWidth - 5}" 
        height="&#36;{barHeight}" 
        fill="green"
      />&#96;;
    });
  
    svg += '</svg>';
    return svg;

Dependency for Scatter Plot

FILE: scatter-plot.mapwale.ts
Create beautiful Scatter Plot charts

import { ChartOptions } from './common.beautiful';
  
  export function createScatterPlot(
    data: number[], 
    labels: string[], 
    options: ChartOptions|any
  ): string {
    const { width, height, margin } = options;
  
    const maxX = Math.max(...labels.map(x => parseFloat(x)));
    const maxY = Math.max(...data);
  
    const xScale = (width - margin * 2) / maxX;
    const yScale = (height - margin * 2) / maxY;
  
    // Create SVG string
    let svg = &#96;<svg xmlns="http://www.w3.org/2000/svg" width="&#36;{width}" height="&#36;{height}">&#96;;
    
    // X-axis
    svg += &#96;<line x1="&#36;{margin}" y1="&#36;{height - margin}" x2="&#36;{width - margin}" y2="&#36;{height - margin}" stroke="black"/>&#96;;
    
    // Y-axis
    svg += &#96;<line x1="&#36;{margin}" y1="&#36;{margin}" x2="&#36;{margin}" y2="&#36;{height - margin}" stroke="black"/>&#96;;
  
    // X-axis labels
    labels.forEach((label, index) => {
      const x = margin + parseFloat(label) * xScale;
      svg += &#96;<text x="&#36;{x}" y="&#36;{height - margin + 20}" text-anchor="middle">&#36;{label}</text>&#96;;
    });
  
    // Y-axis labels
    const yTickCount = 5;
    for (let i = 0; i <= yTickCount; i++) {
      const y = height - margin - (i * (height - margin * 2) / yTickCount);
      const value = Math.round(i * maxY / yTickCount);
      svg += &#96;<text x="&#36;{margin - 10}" y="&#36;{y}" text-anchor="end" alignment-baseline="middle">&#36;{value}</text>&#96;;
    }
  
    // Scatter points
    data.forEach((y, index) => {
      const x = parseFloat(labels[index]);
      svg += &#96;<circle 
        cx="&#36;{margin + x * xScale}" 
        cy="&#36;{height - margin - y * yScale}" 
        r="5" 
        fill="red"
      />&#96;;
    });
  
    svg += '</svg>';
    return svg;

Dependency for Pie Chart

FILE: pie-chart.mapwale.ts
Create beautiful Pie charts

import { ChartOptions } from './common.beautiful';
  
  export function createPieChart(
    data: number[], 
    labels: string[], 
    options: ChartOptions|any
  ): string {
    const { width, height } = options;
  
    const centerX = width / 2;
    const centerY = height / 2;
    const radius = Math.min(width, height) / 3;
  
    const total = data.reduce((sum, val) => sum + val, 0);
    let startAngle = 0;
  
    const colors = [
      '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', 
      '#9966FF', '#FF9F40', '#FF6384'
    ];
  
    // Create SVG string
    let svg = &#96;<svg xmlns="http://www.w3.org/2000/svg" width="&#36;{width}" height="&#36;{height}">&#96;;
  
    data.forEach((value, index) => {
      const percentage = value / total;
      const angle = percentage * 2 * Math.PI;
      const endAngle = startAngle + angle;
  
      const x1 = centerX + radius * Math.cos(startAngle);
      const y1 = centerY + radius * Math.sin(startAngle);
      const x2 = centerX + radius * Math.cos(endAngle);
      const y2 = centerY + radius * Math.sin(endAngle);
  
      const largeArcFlag = angle > Math.PI ? 1 : 0;
  
      const pathData = [
        &#96;M &#36;{centerX} &#36;{centerY}&#96;,
        &#96;L &#36;{x1} &#36;{y1}&#96;,
        &#96;A &#36;{radius} &#36;{radius} 0 &#36;{largeArcFlag} 1 &#36;{x2} &#36;{y2}&#96;,
        'Z'
      ].join(' ');
  
      svg += &#96;<path d="&#36;{pathData}" fill="&#36;{colors[index % colors.length]}"/>&#96;;
  
      // Add labels
      const midAngle = startAngle + angle / 2;
      const labelX = centerX + (radius + 30) * Math.cos(midAngle);
      const labelY = centerY + (radius + 30) * Math.sin(midAngle);
  
      svg += &#96;<text x="&#36;{labelX}" y="&#36;{labelY}" text-anchor="middle" alignment-baseline="middle">
        &#36;{labels[index]} (&#36;{value})
      </text>&#96;;
  
      startAngle = endAngle;
    });
  
    svg += '</svg>';
    return svg;

Dependency for Donut Chart

FILE: donut.mapwale.ts
Create beautiful Donut charts

import { ChartOptions } from './common.beautiful';
  
  export function createDonutChart(
    data: number[], 
    labels: string[], 
    options: ChartOptions|any
  ): string {
    const { width, height } = options;
  
    const centerX = width / 2;
    const centerY = height / 2;
    const outerRadius = Math.min(width, height) / 3;
    const innerRadius = outerRadius * 0.6; // Size of the hole in the middle
  
    const total = data.reduce((sum, val) => sum + val, 0);
    let startAngle = 0;
  
    const colors = [
      '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', 
      '#9966FF', '#FF9F40', '#FF6384'
    ];
  
    // Create SVG string
    let svg = &#96;<svg xmlns="http://www.w3.org/2000/svg" width="&#36;{width}" height="&#36;{height}">&#96;;
  
    data.forEach((value, index) => {
      const percentage = value / total;
      const angle = percentage * 2 * Math.PI;
      const endAngle = startAngle + angle;
  
      // Outer arc coordinates
      const x1Outer = centerX + outerRadius * Math.cos(startAngle);
      const y1Outer = centerY + outerRadius * Math.sin(startAngle);
      const x2Outer = centerX + outerRadius * Math.cos(endAngle);
      const y2Outer = centerY + outerRadius * Math.sin(endAngle);
  
      // Inner arc coordinates
      const x1Inner = centerX + innerRadius * Math.cos(startAngle);
      const y1Inner = centerY + innerRadius * Math.sin(startAngle);
      const x2Inner = centerX + innerRadius * Math.cos(endAngle);
      const y2Inner = centerY + innerRadius * Math.sin(endAngle);
  
      const largeArcFlag = angle > Math.PI ? 1 : 0;
  
      const pathData = [
        &#96;M &#36;{x1Outer} &#36;{y1Outer}&#96;,
        &#96;A &#36;{outerRadius} &#36;{outerRadius} 0 &#36;{largeArcFlag} 1 &#36;{x2Outer} &#36;{y2Outer}&#96;,
        &#96;L &#36;{x2Inner} &#36;{y2Inner}&#96;,
        &#96;A &#36;{innerRadius} &#36;{innerRadius} 0 &#36;{largeArcFlag} 0 &#36;{x1Inner} &#36;{y1Inner}&#96;,
        'Z'
      ].join(' ');
  
      svg += &#96;<path d="&#36;{pathData}" fill="&#36;{colors[index % colors.length]}"/>&#96;;
  
      // Add labels
      const midAngle = startAngle + angle / 2;
      const labelRadius = outerRadius + 30;
      const labelX = centerX + labelRadius * Math.cos(midAngle);
      const labelY = centerY + labelRadius * Math.sin(midAngle);
  
      svg += &#96;<text x="&#36;{labelX}" y="&#36;{labelY}" text-anchor="middle" alignment-baseline="middle">
        &#36;{labels[index]} (&#36;{value})
      </text>&#96;;
  
      startAngle = endAngle;
    });
  
    svg += '</svg>';
    return svg;

Beautiful Charts PROJECTis now Mapwale Charts