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 arearight
 – the edge of the chart from the right-side of the chart areatop
 – the edge of the chart from the top-side of the chart areabottom
 – the edge of the chart from the bottom-side of the chart areaaxis
 – properties about the axesaxis.x
 – properties for the x-axis (see below)axis.y
 – properties for the y-axis (see below)key
 – an object defining a keykey.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 axisline
 – an object defining the axis lineline.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 chartmax
 – hardcode a maximum for the chartgrid
 – an object defining the gridgrid.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/labelslabels.value
 – an object describing the label forÂvalue
labels.value.label
 – a string for the labellabels.value.fill
 – a hex/rgb colour for the label filllabels.value.length
 – the length of the ticklabels.value.align
 –Âtop
 orÂbottom
 (default) for the x-axis orÂleft
 (default) orÂright
 for the y-axis tick markslabels.value.dx
 – shift the label position horizontallylabels.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 pointspoints.show
 – a boolean to set the point visibility (default = true)points.color
 – the hex/rgb colour of the pointspoints.size
 – either a number of function for setting the size of the pointspoints.stroke-width
 – set the width of the strokeline
 – an object styling the lineline.show
 – a boolean to set the line visibility (default = true)line.color
 – the hex/rgb colour of the lineline.stroke-width
 – set the width of the strokeline.stroke-dasharray
 – set the stroke’s dash arraytooltip
 – an object styling the tooltiptooltip.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 Usages, please go to the official website.
Be First to Comment