Home forums Using CanvasJS Migration from localhost to hosting server – JSON dont load

This topic contains 3 replies, has 2 voices, and was last updated by  Sunil Urs 3 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #5319

    Savak
    Participant

    Hi all… hi Sunil

    I’ve migrated my app to live hosting server…but json data dont show up!!
    Anyone experienced the same???

    I have a index.php like this:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>Autárquicas 2013</title>
    <link rel="stylesheet" href="assets/css/ui-lightness/jquery-ui-1.10.3.custom.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="assets/scripts/canvasjs.js"></script>
    <link rel="stylesheet" href="assets/css/style.css"/>
    <script src="assets/scripts/refreshDivs.js"></script>
    <!-- -->
    <script type="text/javascript">
    
    	function geral() {
    	$(document).ready(function () {
    
    		CanvasJS.addColorSet("eleicoes",
                    [//colorSet Array
                    //PPD/PSD-CDS/PP
                    "#E67817",
                    //PS
                    "#FBA6A5",
                    //BLOCO ESQUERDA
                    "#FE0002",
                    //CDU
                    "#005C9F",
                    //TINO DE RANS
                    "#90EE90",  
                    //CORAGEM DE MUDAR
                    "#60AC16",  
                    //BRANCOS
                    "#e1e1e1"                 
                    ]);
    	$.getJSON("includes/graph_geral-data.php", function (result) {
    	var chart = new CanvasJS.Chart("chartContainer", {
    	colorSet: "eleicoes",
    	axisX: {	
    	labelAngle: 0,
    	labelFontSize: 12,
    	labelFontColor: "black",
    	},
    	axisY: {	
    	title: "N.º Votos",
    	labelFontSize: 12,
    	labelFontColor: "black",
    	titleFontSize: 18,
    	titleFontWeight: "bold",
    	titleFontColor: "black",
    	},
    	data: [
    	{
    	type:"column",
    	toolTipContent: "Votos: {y} - {name}" ,   
    	dataPoints: result,
    	}
    	]
    	});
    	$("#concelho_CM tbody").html("");
    	//CRIA LISTAGEM
      	$.each(result, function(key, val){
      			if (val.label == 'Abstenção'){
      				var tblRow =
    						"<tr>"
    						+"<td width=150px style='text-align:left; text-indent:10px; background-color: #c6c6c6; color: #000'><font face='Arial' size='2'>"+val.label+"</td>"
    						+"<td width=100px style='text-align:center; text-indent:10px; background-color: #c6c6c6; color: #000'><font face='Arial' size='2'>"+val.y+"</td>"
    						+"<td width=60px style='text-align:center; text-indent:10px; background-color: #c6c6c6; color: #000; font-weight:bold;'><font face='Arial' size='2'>"+val.name+"</td>"
    						+"</tr>"
    					$(tblRow).appendTo("#concelho_CM tbody");
      			} else  {
    
      				var tblRow =
    						"<tr>"
    						+"<td width=150px style='text-indent:10px;'><font face='Arial' size='2'>"+val.label+"</td>"
    						+"<td width=100px style='text-indent:10px; text-align:center;'><font  face='Arial' size='2'>"+val.y+"</td>"
    						+"<td width=60px style='text-indent:10px; text-align:center; font-weight:bold;'><font face='Arial' size='2'>"+val.name+"</td>"
    						+"</tr>"
    					$(tblRow).appendTo("#concelho_CM tbody");
      			}
    			});
    	chart.render();
    	setTimeout(geral, 10000);
    	});
    	});
    	}
    	geral();
    </script>
    </head>
    <body>
    <div id="wrapper">
    	<!-- ##### GRÁFICO GERAL #####-->
    	<div id="container">
    			<div id="chartContainer" style="width: 800px; height:280px; margin-top:15px; float:left; "></div>
    			<div id="dados">
    				<table id="concelho_CM" border="0">
    					<thead style="background-color: #534902; color: #ffffff; font-size: 12px; ">
    						<th><font face="Arial" size="2">Partido</th>
    						<th><font face="Arial" size="2">Votos</th>
    						<th><font face="Arial" size="2">%</th>
    					</thead>
    					<tbody style="font-size: 12px;">
    					</tbody>
    				</table>
    		</div>
    	</div>
    	<!-- ##### END - GRÁFICO GERAL #####-->
    </div>
    </body>
    </html>

    And data retrieved by this file:

    <?php
    header("Content-Type: application/json; charset=utf-8"); 
    $con = mysqli_connect('localhost','user', 'pass','database');
    // Check connection
    if (mysqli_connect_errno($con))
    {
    echo "Failed to connect to DataBase: " . mysqli_connect_error();
    }else
    {
    $data_points = array();
    $result = mysqli_query($con, 
    "SELECT sum( cmv2013.PSD ) AS 'PPD/PSD-PPM', 
    	sum( cmv2013.PS ) AS 'PS', 
    	sum( cmv2013.BE ) AS 'BE', 
    	sum( cmv2013.CDS ) AS 'CDS/PP', 
    	sum( cmv2013.CDU ) AS 'CDU', 
    	sum( cmv2013.Nulos ) AS 'Nulos', 
    	sum( cmv2013.Brancos ) AS 'Brancos',
    	sum( cmv2013.Abstencao ) AS 'Abstenção' FROM cmv2013
    ");
    $total = mysqli_query($con, 
    	"SELECT sum(cmv2013.PSD + cmv2013.PS + cmv2013.BE + cmv2013.CDS + cmv2013.CDU + cmv2013.Nulos + cmv2013.Brancos) as TOTAL 
    	FROM cmv2013"
    	);
    $linhaTotal = mysqli_fetch_row($total);
    $teste = $linhaTotal[0];
    $totalAbst = mysqli_query($con, 
    	"SELECT sum(cmv2013.inscritos) as ABST FROM cmv2013 WHERE closed = 1"
    	);
    $linhaTotalAbst = mysqli_fetch_row($totalAbst);
    $testeAbst = $linhaTotalAbst[0];
    $row = mysqli_fetch_assoc($result);
    foreach( $row as $key => $value){
    	if ($key == "Abstenção"){
    		$point = array("label" => $key, "name" => (round((($value / $testeAbst) * 100), 2)  . '%'), "y" => $value);
    		array_push($data_points, $point);
    	} else {
    		$point = array("label" => $key, "name" => (round((($value / $teste) * 100), 2)  . '%'), "y" => $value);
    		array_push($data_points, $point);
    	}
    }
    echo json_encode($data_points, JSON_NUMERIC_CHECK);
    }
    mysqli_close($con);
    ?>

    Everything works perfect in localhost…. but not online!!! 🙁
    Anyone can point me to what can i do to solve this??

    #5321

    Sunil Urs
    Keymaster

    Savak,

    If its working fine on the localhost, then the issue is most probably with on the server side. Try the following steps.

    1. Using chrome developer tools find out if you are getting response from the server for the ajax request. If there is any issue on the server side, you’ll get appropriate errors in the response.
    2. If you are not receiving data, then try to access the URL directly to see if the URL that you are accessing is right.
    3. If the URL is right, then issue is probably in the PHP script. Try to debug the same.

    Hope this helps


    Sunil Urs

    #5345

    Savak
    Participant

    Sorry for my late reply…
    The problem was 🙁 … PHP 5.2 in my server!!

    And i needed to maintain 5.2… so i was able to fix this by changing the code a bit…

    All is functional now.. you can check it here

    http://www.autarquicas2013.cm-valongo.pt

    I’ve taken the refresh’s (the charts we’re updating every 10 seconds) as the event already finished..

    Thanks for your help.

    #5351

    Sunil Urs
    Keymaster

    Savak,

    You have a nice dashboard there! Am glad that you were able to resolve the issue.


    Sunil

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.