How to bring a page with graph inside a div in another page using ajax?

Asked

Viewed 372 times

0

I have a problem, I have a simple function in Ajax that brings a page within a div, made the test work, but when I do to bring a page that has graphic does not bring anything,

Does anyone know if there’s a way to do it?

my code goes below:

this is the index.php page

index php.

<?php
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script>
function GetXMLHttp() {
    if(navigator.appName == "Microsoft Internet Explorer") {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else {
        xmlHttp = new XMLHttpRequest();
    }
    return xmlHttp;
}

var xmlRequest = GetXMLHttp();


function abrirPag(valor){
    var url = valor;

    xmlRequest.open("GET",url,true);    
    xmlRequest.onreadystatechange = mudancaEstado;
    xmlRequest.send(null);

        if (xmlRequest.readyState == 1) {
            document.getElementById("conteudo_mostrar").innerHTML = "<img src='img/load.gif'>";
        }

    return url;
}

function mudancaEstado(){
    if (xmlRequest.readyState == 4){
        document.getElementById("conteudo_mostrar").innerHTML = xmlRequest.responseText;
    }
}
</script>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Carregando Página em DIV / AJAX</title>
<script language="javascript" src="ajax.js"></script>
<script language="javascript" src="instrucao.js"></script>
</head>
<body>
<form>
    <div id="menu"><a href="#" onclick="abrirPag('canvas.php');">Clientes</a></div>
        <input type="submit" value="teste"/>
        <br><br>
    <div id="conteudo_mostrar"></div>
</form>
</body>
</html>

and this is the code of the canvas.php page that has the chart:

canvas php.

<?php 

    $codigo = @$_REQUEST['codigo'];


?>

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <style type="text/css">
${demo.css}
        </style>
        <script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        title: {
            text: 'US and USSR nuclear stockpiles'
        },
        subtitle: {
            text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
                'thebulletin.metapress.com</a>'
        },
        xAxis: {
            allowDecimals: false,
            labels: {
                formatter: function () {
                    return this.value; // clean, unformatted number for year
                }
            }
        },
        yAxis: {
            title: {
                text: 'Nuclear weapon states'
            },
            labels: {
                formatter: function () {
                    return this.value / 1000 + 'k';
                }
            }
        },
        tooltip: {
            pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
        },
        plotOptions: {
            area: {
                pointStart: 1940,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name: 'USA',
            data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
                1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
                27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
                26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
                24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
                22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
                10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
        }, {
            name: 'USSR/Russia',
            data: [null, null, null, null, null, null, null, null, null, null,
                5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
                4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
                15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
                33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
                35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
                21000, 20000, 19000, 18000, 18000, 17000, 16000]
        }]
    });
});
        </script>
    </head>
    <body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    </body>
</html>

I did the test by opening the direct chart page works, but I needed to bring this chart page into the index.php page within a div of the index.php page.

Does anyone know a way to do that or where I’m going wrong?

php javascript jquery canvas

  • you receive any feedback from this request or give some error?

  • not of the error, just comes blank the result in div does not bring back the graph

  • 1

    you are searching with ajax... take this responseText and play on the console (console.log(xmlRequest.responseText);) and see if it is even returning

  • You’re going to search a full page with html, head and body via ajax and want to put inside a div?! That won’t give... how much can you use an iframe.

  • i thought the most iframe needed to even do this in ajax, half problem not that it does not back the page, behind what does not back is the graph that is done in the library canvas js already tried several other libraries of graphing more not right

  • 1

    I understand you want to upload a page with a chart. Let’s remember that the graph is generated dynamically in the browser, the highcharts changes the DOM for this, so if you load a page without processing again the script that generates the graph nothing will appear, unless it was an image. After loading the page you will need to generate the chart again, using $('#container').redraw(); or having to set the data again with $('#container')..series[0].setData(dados,true);that will redraw the chart.

Show 1 more comment
No answers

Browser other questions tagged php javascript jquery canvas

You are not signed in. Login or sign up in order to post.