Today, We want to share with you General Drawing Tutorial With Examples.In this post we will show you How to use highcharts to draw custom charts with example, hear for Drawing custom line charts using highcharts with example we will give you demo and example for implement.In this post, we will learn about general arrangement drawing for electrical panel with an example.
General Drawing Tutorial With Examples
There are the Following The simple About types of architectural drawings Full Information With Example and source code.
As I will cover this Post with live Working example to develop general arrangement drawing for bridge, so the valve general arrangement drawing is used for this example is following below.
General Drawing Example Tutorial For Beginners
index.html
Angular is a platform for building mobile & desktop web Based user friendly and light weight applications.Angular,It’s TypeScript-based open-source Angularjs web application framework.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highcharts - General Drawing - www.pakainfo.com</title>
<script src="https://www.pakainfo.com/jquery/js/jquery-1.12.4.js"></script>
<script src="https://www.pakainfo.com/jquery/js/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
var graphtype = {
backgroundColor: 'tomato',
events: {
load: function () {
// Draw the flow chart
var ren = this.renderer,
colors = Highcharts.getOptions().colors,
rightArrow = ['M', 0, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5],
leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5];
// Separator, client from service
ren.path(['M', 120, 40, 'L', 120, 330])
.attr({
'stroke-width': 2,
stroke: 'silver',
dashstyle: 'dash'
})
.add();
// Separator, CLI from service
ren.path(['M', 420, 40, 'L', 420, 330])
.attr({
'stroke-width': 2,
stroke: 'silver',
dashstyle: 'dash'
})
.add();
// Headers
ren.label('Web client', 20, 40)
.css({
fontWeight: 'bold'
})
.add();
ren.label('Web service / CLI', 220, 40)
.css({
fontWeight: 'bold'
})
.add();
ren.label('Command line client', 440, 40)
.css({
fontWeight: 'bold'
})
.add();
// SaaS client label
ren.label('SaaS client<br/>(browser or<br/>script)', 10, 82)
.attr({
fill: colors[0],
stroke: 'tomato',
'stroke-width': 2,
padding: 5,
r: 5
})
.css({
color: 'tomato'
})
.add()
.shadow(true);
// Arrow from SaaS client to Phantom JS
ren.path(rightArrow)
.attr({
'stroke-width': 2,
stroke: colors[3]
})
.translate(95, 95)
.add();
ren.label('POST options in JSON', 90, 75)
.css({
fontSize: '10px',
color: colors[3]
})
.add();
ren.label('PhantomJS', 210, 82)
.attr({
r: 5,
width: 100,
fill: colors[1]
})
.css({
color: 'tomato',
fontWeight: 'bold'
})
.add();
// Arrow from Phantom JS to Batik
ren.path(['M', 250, 110, 'L', 250, 185, 'L', 245, 180, 'M', 250, 185, 'L', 255, 180])
.attr({
'stroke-width': 2,
stroke: colors[3]
})
.add();
ren.label('SVG', 255, 120)
.css({
color: colors[3],
fontSize: '10px'
})
.add();
ren.label('Batik', 210, 200)
.attr({
r: 5,
width: 100,
fill: colors[1]
})
.css({
color: 'tomato',
fontWeight: 'bold'
})
.add();
// Arrow from Batik to SaaS client
ren.path(['M', 235, 185, 'L', 235, 155, 'C', 235, 130, 235, 130, 215, 130,
'L', 95, 130, 'L', 100, 125, 'M', 95, 130, 'L', 100, 135])
.attr({
'stroke-width': 2,
stroke: colors[3]
})
.add();
ren.label('Rasterized image', 100, 110)
.css({
color: colors[3],
fontSize: '10px'
})
.add();
// Browser label
ren.label('Browser<br/>running<br/>Highcharts', 10, 180)
.attr({
fill: colors[0],
stroke: 'tomato',
'stroke-width': 2,
padding: 5,
r: 5
})
.css({
color: 'tomato',
width: '100px'
})
.add()
.shadow(true);
// Arrow from Browser to Batik
ren.path(rightArrow)
.attr({
'stroke-width': 2,
stroke: colors[1]
})
.translate(95, 205)
.add();
ren.label('POST SVG', 110, 185)
.css({
color: colors[1],
fontSize: '10px'
})
.add();
// Arrow from Batik to Browser
ren.path(leftArrow)
.attr({
'stroke-width': 2,
stroke: colors[1]
})
.translate(95, 215)
.add();
ren.label('Rasterized image', 100, 215)
.css({
color: colors[1],
fontSize: '10px'
})
.add();
// Script label
ren.label('Script', 450, 82)
.attr({
fill: colors[2],
stroke: 'tomato',
'stroke-width': 2,
padding: 5,
r: 5
})
.css({
color: 'tomato',
width: '100px'
})
.add()
.shadow(true);
// Arrow from Script to PhantomJS
ren.path(leftArrow)
.attr({
'stroke-width': 2,
stroke: colors[2]
})
.translate(330, 90)
.add();
ren.label('Command', 340, 70)
.css({
color: colors[2],
fontSize: '10px'
})
.add();
// Arrow from PhantomJS to Script
ren.path(rightArrow)
.attr({
'stroke-width': 2,
stroke: colors[2]
})
.translate(330, 100)
.add();
ren.label('Rasterized image', 330, 100)
.css({
color: colors[2],
fontSize: '10px'
})
.add();
}
}
}
var charttitle = {
text: 'Highcharts export server overview',
style: {
color: 'black'
}
}
$('#chart-full-content').highcharts({
chart: graphtype,
title:charttitle
});
});
</script>
</head>
<body>
<div id="chart-full-content" style="width: 800px; height: 250px; margin: 0 auto"></div>
</body>
</html>
Web Programming Tutorials Example with Demo
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about general arrangement drawing example.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.