SmartGraph is a free and easy-to-use JavaScript library to create beautiful vector diagrams with many customizations. This plugin allows developers to create dynamic, responsive, draggable vector graphics and infinitely scalable graphics using JS.
Features
Jquery.smartGraph supports:
- Highly customizable design
- Responsive layout
- Drawing points and functions
- Custom rendering and modifying of objects
- Moving and scaling (zooming)
- Predefined keyboard and mouse control
Must Read: Javascript Library for Making Simple SVG Graphs | oi.linechart.js
How to make use of it:
1. Include the following code in the <head> tag of your HTML:
<!-- include jQuery --> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- include jquery.smartGraph css/js--> <link rel="stylesheet" href="/dist/css/jquery.smartGraph.min.css"> <script type="text/javascript" src="/dist/js/jquery.smartGraph.min.js"></script>
2. Usage
$('#myElem').smartGraph([options])<div class="smart-graph" id="myElem">
<canvas width="1600" height="900"></canvas>
</div>3. You can use the following code with the default options.
$(function() {
$('#myElem').smartGraph({
color: '#343a40',
axises: {
thickness: null, /* inherits from lines.thickness */
color: null, /* inherits from lines.color */
ticks: {
step: 1,
size: 8,
thickness: null, /* inherits from axises.thickness */
color: null, /* inherits from lines.color */
titles: {
font: '10px Calibri',
padding: 10,
color: null, /* inherits from texts.color */
render: function (value, axisCreatorManager) {
return axisCreatorManager.getOptimallyRoundedTick(value);
}
}
},
labels: {
font: '20px Calibri',
color: null /* inherits from texts.color */
},
x: {
color: null, /* inherits from axises.color */
label: {
caption: 'x',
color: null, /* inherits from axises.labels.color */
padding: 20
},
ticks: {
step: null, /* inherits from axises.ticks.step */
color: null, /* inherits from axises.color */
titles: {
color: null, /* inherits from axises.ticks..titles.color */
render: null /* inherits from axises.ticks.titles.render */
}
}
},
y: {
color: null, /* inherits from axises.color */
label: {
caption: 'y',
color: null, /* inherits from axises.labels.color */
padding: 20
},
ticks: {
step: null, /* inherits from axises.ticks.step */
color: null, /* inherits from axises.color */
titles: {
color: null, /* inherits from axises.ticks.titles.color */
render: null /* inherits from axises.ticks.titles.render */
}
}
}
},
data: {
points: [],
functions: []
},
point: {
size: 10,
thickness: 2,
color: null, /* inherits from color */
hintlines: {
show: false,
color: null, /* inherits from lines.color */
thickness: null, /* inherits from lines.thickness */
dash: [2, 2]
},
label: {
font: '13px Calibri',
color: null, /* inherits from texts.color */
padding: 7,
render: function (x, y) {
return '(' + x.roundDigits(2) + ', ' + y.roundDigits(2) + ')';
}
}
},
'function': {
step: null, /* inherits from axises.x.ticks.step */
modifier: function () {
return null;
},
connectlines: {
show: true,
color: null, /* inherits from lines.color */
thickness: null, /* inherits from lines.thickness */
dash: []
},
points: {
color: null, /* inherits from point.color */
size: null, /* inherits from point.size */
thickness: null, /* inherits from point.thickness */
hintlines: {
show: null, /* inherits from point.hintlines.show */
color: null, /* inherits from point.hintlines.color */
thickness: null, /* inherits from point.hintlines.thickness */
dash: null /* inherits from point.hintlines.dash */
},
labels: {
font: null, /* inherits from point.label.font */
color: null, /* inherits from point.label.color */
padding: null, /* inherits from point.label.padding */
render: function () {
return '';
}
}
}
},
lines: {
color: null, /* inherits from color */
thickness: 1
},
texts: {
color: null /* inherits from color */
},
move: {
x: 0,
y: 0
},
responsive: {
enable: true,
ratio: 16 / 9
}
});
});
Options callbacks arguments
smartGraph library works with the following managers which are provided in callbacks as arguments. You can access their methods (getters and boolean queries) to find out useful information.
Attention: Using other managers’ methods than listed below (etc. private setters), or modifying its private underline properties can cause unexpected behavior.
settingsManager
- Type:
Object - Methods:
getElement(),getScaledDistance(),getWidth(),getHeight(),getCenter(),getCanvas(),getScale()andgetDefaultScale()
pointManager
- Type:
Object - Methods:
getDistanceFrom(anotherPointManager),equals(anotherPointManager),getX(),getY()andisReal()
axisCreatorManager
- Type:
Object - Methods:
getSettingsManager(),getAxis(),isVisible(),isNegative(),getLength(),getCountNecessaryTicks(),getOptimallyRoundedTick(value)andgetAxisOptions()
See Demo And Download
Official Website(oplaner4): Click Here
This superior jQuery/javascript plugin is developed by oplaner4. For extra Advanced usage, please go to the official website.
