Javascript Library for Making Simple SVG Graphs | oi.linechart.js

oi.linechart.js is a small, customizable, standalone JavaScript library for making simple SVG graphs/diagrams for Open Innovations projects.

svg chart library, online svg chart, svg charts, svg line graph generator, free svg charts, svg area chart, svg graph example, svg vertical bar chart

Features:

  • Supports single or multiple data series.
  • Custom tooltips and hashtags.
  • It allows you to update the data in a smooth motion.

How to make use of it:

1. Import the JavaScript library oi.linechart.min.js into the document.

<script src="oi.linechart.min.js"></script>

2. Create a container to hold the line graph.

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

3. Initialize the line chart on the container element and set the properties for the x and y axis.

OI.ready(function(){
  var myChart = OI.linechart(document.getElementById('chart-example'),{
      'axis':{
        'x':{
          'title': { 'label': 'x value' },
          'labels':{
            "-3": {'label':-3},
            "-2": {'label':-2},
            "-1": {'label':-1},
            "0": {'label':0},
            "1": {'label':1},
            "2": {'label':2},
            "3": {'label':3}
          }
        },
        'y':{
          'title':{ 'label':'y value' },
          'labels':{
            "0": {'label':0},
            "0.5": {'label':0.5},
            "1": {'label':1}
          }
        }
      }
  });
});

4. Define your data series.

var myData = [
    {x:1,y:6.4},
    {x:2,y:7},
    {x:3,y:9.1}
    // ...
];

5. Multiple data series are also supported.

var myData = [
    {x:1,y:6.4},
    {x:2,y:7},
    {x:3,y:9.1}
    // ...
];

var myData2 = [
    // ...
];

6. Add the data series to the chart.

myChart.addSeries(myData);

7. Draw the line chart.

myChart.draw();

8. Add tooltips to the chart.

myChart.addSeries(myData,{
  'title': 'My Chart',
  'points':{ 'size':4, 'color': '#FF6700' },
  'line':{ 'color': '#FF6700' },
  'tooltip':{ 'label': label }
});

9. All possible options for customizing the line graph.

var myChart = OI.linechart(document.getElementById('chart-example'),{
    'left':0,
    'top':0,
    'right':0,
    'bottom':0,
    'tick':5,
    'font-size': 16,
    'tooltip':{},
    'key':{
      'show':false,
      'border':{
        'stroke':'black',
        'stroke-width':1,
        'fill':'none'
      },
      'text':{
        'text-anchor':'start',
        'dominant-baseline':'hanging',
        'font-weight':'bold',
        'fill':'black',
        'stroke-width':0,
        'font-family':'sans-serif'
      }
    },
    'axis':{
      'x':{},
      'y':{}
    }
});

Chart properties

When creating a new line chart you can set chart properties:

  • left – the edge of the chart from the left-side of the chart area
  • right – the edge of the chart from the right-side of the chart area
  • top – the edge of the chart from the top-side of the chart area
  • bottom – the edge of the chart from the bottom-side of the chart area
  • axis – properties about the axes
  • axis.x – properties for the x-axis (see below)
  • axis.y – properties for the y-axis (see below)
  • key – an object defining a key
  • key.show – is a key visible (default = false)

You can also update the properties of the chart later using chart.setProperties(props).

Axis properties

  • label – a title for the axis
  • line – an object defining the axis line
  • line.show – a boolean value to set the visibility of the line (default = true)
  • line.stroke – the stroke (default = black)
  • line.stroke-width – the stroke width (default = 1)
  • min – hardcode a minimum for the chart
  • max – hardcode a maximum for the chart
  • grid – an object defining the grid
  • grid.show – a boolean value to set the visibility of the grid lines (default = false)
  • grid.stroke – the stroke (default = black)
  • grid.stroke-width – the stroke width (default = 1)
  • labels – an object of hard-coded tick marks/labels
  • labels.value – an object describing the label for value
  • labels.value.label – a string for the label
  • labels.value.fill – a hex/rgb colour for the label fill
  • labels.value.length – the length of the tick
  • labels.value.align – top or bottom (default) for the x-axis or left (default) or right for the y-axis tick marks
  • labels.value.dx – shift the label position horizontally
  • labels.value.dy – shift the label position vertically

Add a series

You can add a series using chart.addSeries(data,attr) where data is of the form [{x:1,y:0.1},{x:2,y:0.2},{x:3,y:0.3}] and attr is of the form:

  • points – an object styling the points
  • points.show – a boolean to set the point visibility (default = true)
  • points.color – the hex/rgb colour of the points
  • points.size – either a number of function for setting the size of the points
  • points.stroke-width – set the width of the stroke
  • line – an object styling the line
  • line.show – a boolean to set the line visibility (default = true)
  • line.color – the hex/rgb colour of the line
  • line.stroke-width – set the width of the stroke
  • line.stroke-dasharray – set the stroke’s dash array
  • tooltip – an object styling the tooltip
  • tooltip.label – either a fixed string or a function that generates the tooltip text using properties of the data.

Tiny Customizable SVG Line Chart Library, oi.linechart.js Plugin/Github


See Demo And Download

Official Website(open-innovations): Click Here

This superior jQuery/javascript plugin is developed by open-innovations. For extra Advanced usage, please go to the official website.

Share