Create Animated Interactive SVG-based Charts – GGraphs

GGraphs is a robust JavaScript library for generating responsive, dynamic, animated, interactive, SVG-based graphs and charts. It supports various chart types, including line, bar, pie, donut, and gauge.

The library provides lots of customization options which enables you to customize the visual appearance of your charts. Colors, fonts, styles, and animations can be adjusted to match specific design requirements. The responsive design makes sure your charts maintain their integrity and readability on screens of varying sizes, from desktops to mobile devices.

Interactive features, like click events and tooltips, allow users to explore data in greater depth. Data labels offer at-a-glance value insights, while legends provide clear identification of different data series. Axis labels and grid lines enhance clarity and make it easier to interpret the chart’s data.

How to use it:

1. Download the package and include the GGraphs.js library on your webpage.

<script src="/path/to/ggraphs.js"></script>

2. Create a container element for your chart:

<div id="chart-container"></div>

3. Prepare your chart data:

// Example datas 
const barData = {
  mixed: [
    {
      name: "Product A",
      data: [
        {label: "Q1", value: -5},
        {label: "Q2", value: 15},
        {label: "Q3", value: 25},
        {label: "Q4", value: -10}
      ]
    },
    {
      name: "Product B",
      data: [
        {label: "Q1", value: 10},
        {label: "Q2", value: 8},
        {label: "Q3", value: 19.6},
        {label: "Q4", value: 22}
      ]
    }
  ],
  positive: [
    {
      name: "Product A",
      data: [
        {label: "Q1", value: 1200},
        {label: "Q2", value: 2600},
        {label: "Q3", value: 3300},
        {label: "Q4", value: 1900}
      ]
    },
    {
      name: "Product B",
      data: [
        {label: "Q1", value: 1000},
        {label: "Q2", value: 1200},
        {label: "Q3", value: 2600},
        {label: "Q4", value: 3500}
      ]
    }
  ],
  negative: [
    {
      name: "Product A",
      data: [
        {label: "Q1", value: -1200},
        {label: "Q2", value: -2600},
        {label: "Q3", value: -3300},
        {label: "Q4", value: -1900}
      ]
    },
    {
      name: "Product B",
      data: [
        {label: "Q1", value: -1000},
        {label: "Q2", value: -1200},
        {label: "Q3", value: -2600},
        {label: "Q4", value: -3500}
      ]
    }
  ],
  decimal: [
    {
      name: "Product A",
      data: [
        {label: "Q1", value: 0.5},
        {label: "Q2", value: 0.2},
        {label: "Q3", value: 0.8},
        {label: "Q4", value: 0.4}
      ]
    },
    {
      name: "Product B",
      data: [
        {label: "Q1", value: 0.3},
        {label: "Q2", value: 0.7},
        {label: "Q3", value: 0.6},
        {label: "Q4", value: 0.2}
      ]
    }
  ]
};
const pieData = [
  {
    name: "Market Share",
    data: [
      {label: "Product A", value: 30},
      {label: "Product B", value: 25},
      {label: "Product C", value: 20},
      {label: "Product D", value: 15},
      {label: "Product E", value: 15},
      {label: "Product F", value: 15},
      {label: "Others", value: 10}
    ]
  }
];
const gaugeData = [
  {
    name: "Progress",
    data: [{label: "Completion", value: 75}]
  }
];

4. Initialize GGraphs:

const myChart = new GGraphs('chart-container', {
  data: myData
  // options here
});

5. You can convert an HTML table into a chart. For example:

<table id="tableGraphData">
  <thead>
    <tr>
      <th>Day</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td data-value="10" data-tooltip="Day 1: 10">10</td>
    </tr>
    <tr>
      <th>2</th>
      <td data-value="15" data-tooltip="Day 2: 15">15</td>
    </tr>
    <tr>
      <th>3</th>
      <td data-value="20" data-tooltip="Day 3: 20">20</td>
    </tr>
    <tr>
      <th>4</th>
      <td data-value="25" data-tooltip="Day 4: 25">25</td>
    </tr>
    <tr>
      <th>5</th>
      <td data-value="30" data-tooltip="Day 5: 30">30</td>
    </tr>
  </tbody>
</table>

const myChart = new GGraphs('tableGraph', {
  table: 'tableGraphData',
  // options here
});

// Hide the original table
const table = document.getElementById('tableGraphData');
table.style.display = 'none';

6. All possible options to customize your charts.

{
  colors: ['#FF6B6B', '#4ECDC4',  '#45B7D1', '#FFA07A', '#98D8C8', '#F9ED69', '#F08A5D', '#B83B5E', '#6A2C70', '#00B8A9', '#F8F3D4', '#3F72AF'],
  backgroundColor: 'defaultBackgroundColor', // Uses the container's background color by default
  showGrid: true,
  gridColor: '#E0E0E0',
  axisColor: '#333333',
  curveType: 'linear', // 'linear' or 'curve' (for line charts)
  maxGaugeValue: 100, // For gauge charts
  centerText: null,
  showCenterText: true,
  gap: 2, // Spacing between chart elements
  borderWidth: 1,
  borderColor: '#000000',
  pointRadius: 4, // Radius of data points in line charts
  lineWidth: 2, // Width of lines in line charts
  fillArea: false, // Whether to fill the area under lines in line charts
  fillOpacity: 0.1, // Opacity of the filled area
  fontFamily: 'defaultFontFamily', // Uses the container's font family by default
  textColor: 'defaultTextColor', // Uses the container's text color by default
  fontSize: 'defaultFontSize', // Uses the container's font size by default
  showAxisLabels: true,
  showAxis: true,
  animationDuration: 1000, // In milliseconds
  donutThickness: 50, // For donut charts
  gaugeCurveWidth: 20, // For gauge charts
  showLegend: true,
  legendPosition: 'bottom', // 'top', 'bottom', 'left', 'right'
  showTooltip: true,
  tooltipFormatter: null, // Custom tooltip formatting function
  showDataLabels: true,
  animation: true,
  maxDataPoints: 20,  // Limits the number of data points displayed
  type: 'line', // 'line', 'bar', 'pie', 'donut', 'gauge'
  table: null, // ID of the table element to use as data source
  data: null, // Data array
  onClick: null // Click event handler
};

7. GGraphs provides several methods for dynamic chart manipulation:

• setData(data): Use this to update the chart with new data.
• addDataPoint(newData, seriesIndex): Add a single data point to a specified series.
• addDataPoints(newDataPoints): Add multiple data points to the chart.
• redrawGraph(): Redraw the graph completely.