Press "Enter" to skip to content

Tiny Lightweight Javascript Graph Library | krap.js

krap.js is a lightweight, dependency-free JS library used to draw simple dynamic diagrams charts on an HTML page using SVG. Currently supports pie and bar column charts.

chartist js, javascript chart library, best javascript chart library, javascript chart library 2022, best chart library, javascript graph visualization

How to make use of it:

1. Import krap.js and krap.css into the HTML page.

<script src="krap.js"></script>
<link rel="stylesheet" href="krap.css">

2. Create a placeholder for the chart.

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

3. Select an array of objects that you want to display in the chart.

var json =[
    {oracle:[
      {profits:[
              {phones:1},
              {software:2}
      ]},
      {loss:[3]},
      {misc:[6]},
    ]},
    {amazon:[10]},
    {google:[60]},
    {microsoft:[20]}
];

4. Display the data as a pie chart inside the DIV container you created.

properties = {}
properties['width'] = 300;
properties['height']=300;
properties['data']= [10,30,60]
properties['colours']= ['#38D3EE', '#C9D2D4', '#FF5A82'];
chart.pie('pie',properties);

5. Display a pie chart inside the DIV container you created.

var  props = {
    'width': 300,
    'height': 300,
    'data': {'apple':5,'oracle':10,'google':15,'tesla':20,'A':15,'B':10,'C':5},
    'xCords': [],
    'yCords': [],
    'yCordsSorted': [],
    'divId': 'undefined',
    'datumsPerScreen': 4,
    'colours': {},
    'barColours': 'blue',
    'yTickLabels': {},
    'svgObj': 'undefined',
    'axisType': 'generateSimpleAxis'
};
chart.bar('bar',props);

Tiny Chart Library, krap.js Plugin/Github


See Demo And Download

Official Website(karthikkondapally): Click Here

This superior jQuery/javascript plugin is developed by karthikkondapally. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.