How to export a Google Org Chart to Image?

0

I have a problem with the following chart which I generated with the google API of charts. On this occasion I would like to know how to export this Organigram to Image. My project is made in asp.net mvc but this time I only used the pure API with JS.

The only detail is that the image is large and can not be fully visualized in the view

Is there any way to export it ?. I hope you can support me with this problem. The JS source code to generate the diagram is as follows:

<!-- Scripts JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>



<script type="text/javascript">
    google.load("visualization", "1", { packages: ["orgchart"] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        $.ajax({

            type: "POST",
            url: "/Conocenos/Organigrama_Json",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (dt) {

                var dataArray = [];

                $.each(dt, function (i, item) {
                    dataArray.push([item.IDSERVPUB, item.NOMBREPERSONAL, item.NOMBRAMIENTO, item.NIVEL, item.FOTOPERSONAL]);
                });

                var data = new google.visualization.DataTable();

                data.addColumn('string', 'Entity');
                data.addColumn('string', 'ReportEntity');
                data.addColumn('string', 'ToolTip');


                for (var i = 0; i < dataArray.length; i++) {
                    //no cambiar nombre de variables
                    var Employee_ID = dataArray[i][0].toString();
                    var Employee_Name = dataArray[i][1];
                    var Title = dataArray[i][2];
                    var ReportTo = dataArray[i][3] != null ? dataArray[i][3].toString() : '';
                    //necesito convertir este arreglo de bytes en una imagen
                    var Imagen = dataArray[i][4];

                    function bin2string(array) {
                        var result = "";
                        for (var i = 0; i < array.length; ++i) {
                            result += (String.fromCharCode(array[i]));
                        }
                        return result;
                    }
                    var Imagen_Bin_String = bin2string(Imagen);
                    var Imagen_Base64 = btoa(Imagen_Bin_String);

                    //si el valor el null que no lo muestre en el diagrama
                    if (Employee_Name == null) {
                        Employee_Name = "";
                    }
                    data.addRows([[{
                        v: Employee_ID,
                        f: '<b>' + Title + '</b></br>' + Employee_Name + '<br/><b>' +
                            '<img src="data:image/jpg;base64,' + Imagen_Base64 + '">'
                    }, ReportTo, Title]]);
                }


                var chart = new google.visualization.OrgChart($("#chart_div")[0]);
                chart.draw(data, { allowHtml: true });

            },
            failure: function (dt) {
                console.log(dt);
            },
            error: function (dt) {
                console.log(dt);
            }
        });
    }
</script>
    
asked by Galaviz Arroyo 04.12.2018 в 18:36
source

0 answers