General Drawing Tutorial With Examples

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.

Free Live Chat for Any Issue

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 :

Also Read This πŸ‘‰   Simple Clock Tutorial With Examples For Beginners

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.