Sign in to follow this  
Followers 0
Kryos

How to get data for scrollColumn2d Chart

By Kryos, in Javascript Problems

Recommended Posts

Kryos   

Kryos
Posted (edited)

Hi guys,

 

how can I get data from a MySQL DB to use them in a scrollColumn2d. The problem is the different structure of JSON that hasn't only an array but two different ones : category(label) and data(value) instead of the usual data(label, value).

 

This is my API to get JSON from MySQL DB

<?php

$servername = "localhost";
$username = "dbtumori";
$password = "";
$dbname = "my_dbtumori";


$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}


$sql = "SELECT COUNT(Diagnosi_Principale) AS conteggio, Descrizione
		FROM DIAGNOSI JOIN CODICI_DIAGNOSI ON Diagnosi_Principale=CODICI_DIAGNOSI.Codice_Diagnosi
		GROUP BY Diagnosi_Principale
        HAVING conteggio       
		ORDER BY conteggio, CODICI_DIAGNOSI.Codice_Diagnosi, Descrizione;";

$result = $conn->query($sql);  
$jsonArray = array();


if ($result->num_rows > 0)
{
  
  while($row = $result->fetch_assoc()) 
  {
  	$jsonArrayItem = array();
    $jsonArrayItem['label'] = $row['Descrizione'];
    $jsonArrayItem['value'] = $row['conteggio'];
    
    array_push($jsonArray, $jsonArrayItem);
  }
}
else 
{
    echo "0 results";
}

$conn->close();

header('Content-type: application/json');
echo json_encode($jsonArray);

?>

And This is the HTLM-JavaScript code

<!DOCTYPE html>
<html>
<head>
  <title>Grafico Occorrenza Tumori Pomigliano</title>
</head>
<body>
<div id="GraficoTumori"></div>
  <script src="js/jquery-2.2.4.js"></script>
  <script src="js/fusioncharts.js"></script>
  <script src="js/fusioncharts.charts.js"></script>
  <script src="js/themes/fusioncharts.theme.zune.js"></script>

  
  <script>
  
  $(function(){
  $.ajax({
    url: 'api/getOccorrenzeTumoriDett.php',
    type: 'GET',
    success : function(data) {
      chartData = data;
      var chartProperties = {
        "caption": "Occorrenza Tumori",
        "xAxisName": "Tipologia Tumore",
        "yAxisName": "Numero",
        "rotatevalues": "1",
             
      };
      apiChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'GraficoTumori',
        width: '100%',
        height: '550',
        dataFormat: 'json',
        dataSource: {
          "chart": chartProperties,
          "data": chartData
        }
      });
      apiChart.render();
    }
  });
});

</script>
  </body>
</html>

Thanks in advance

Edited by Kryos

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing Javascript Problems