Customizable SVG Line Chart JavaScript Library – odi.linechart.js

Preview:

Description:

odi.linechart.js is a JavaScript library for drawing customizable, single- or multi-line charts using SVG.

How to use it:

1. Load the odi.linechart.js JavaScript library.

<script src="odi.linechart.js"></script>

2. Create a chart container on the page.

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

3. Initialize the odi.linechart.js and define your own data series as follows:

var example = ODI.linechart(document.getElementById('custom'),{
    // offset
    'left':20,
    'right':50,
    'top':60,
    'bottom':8,
    // define your data here
    'axis':{
      'x':{
        'line': {'stroke':'#888', 'stroke-width': 2},
        'grid': {'show':true,'stroke':'#888'},
        'labels':{
          2014: {'label':'2014','fill':'#888','length':0,'align':'top','dy':-60},
          2015: {'label':"'15",'fill':'#888','length':0,'align':'top','dy':-60},
          2016: {'label':"'16",'fill':'#888','length':0,'align':'top','dy':-60},
          2017: {'label':"'17",'fill':'#888','length':0,'align':'top','dy':-60},
          2018: {'label':"'18",'fill':'#888','length':0,'align':'top','dy':-60},
          2019: {'label':"'19",'fill':'#888','length':0,'align':'top','dy':-60},
          2020: {'label':"2020",'fill':'#888','length':0,'align':'top','dy':-60}
        }
      },
      'y':{
        'line': {'show':false},
        'grid': {'show':true,'stroke':'#888'},
        'min': 0,
        'max': 200,
        'labels':{
          0: {'label':'0','fill':'white','align':'right'},
          50: {'label':'50M','fill':'white','align':'right'},
          100: {'label':'100M','fill':'white','align':'right'},
          150: {'label':'150M','fill':'white','align':'right'}
        }
      }
    },
    // Draw a key
    'key':{ 'show':true },
    
});

4. Draw the line chart.

example.draw();

5. Set the height & width of the line chart.

#example { 
  height: 400px; 
  width: 100%; 
  animation-duration: 0.3s; 
}

6. Add additional data series to the line chart.

var maxtemp = [{x:1,y:6.4},{x:2,y:7},{x:3,y:9.1},{x:4,y:11.9},{x:5,y:14.8},{x:6,y:17.5},{x:7,y:19.6},{x:8,y:19},{x:9,y:16.9},{x:10,y:13.3},{x:11,y:9.1},{x:12,y:6.7}];
var mintemp = [{x:1,y:1.8},{x:2,y:1.4},{x:3,y:2.2},{x:4,y:3.9},{x:5,y:7},{x:6,y:9.9},{x:7,y:12.1},{x:8,y:12},{x:9,y:10.1},{x:10,y:7.6},{x:11,y:4.3},{x:12,y:2.2}];
example.addSeries(maxtemp,{
  'title': 'Max temperature',
  'points':{ 'size':4, 'color': '#FF6700' },
  'line':{ 'color': '#FF6700' },
  'tooltip':{ 'label': label }
});
example.addSeries(mintemp,{
  'title': 'Min temperature',
  'points':{ 'size':4, 'color': '#2254F4' },
  'line':{ 'color': '#2254F4' },
  'tooltip':{ 'label': label }
});