CODEWITHSUNDEEP
javascriptphpmysql
John Wix
John Wix

Reputation: 7

FusionCharts Not Working

I'm new to the whole development arena. Could you please help me out in identifying the error in the following. I'm using FusionCharts for a school project and finding it difficult to populate the chart. I have created the files based on the tutorials provided but have included the element of MYSQL to retrieve data. The files are as follows,

HTML...

    <!DOCTYPE html>
    <html>
    <head>
     <title>Fusion Charts Column 2D Sample</title>
</head>
<body>
  <div id="chart-container">FusionCharts will render here</div>
  <script src="js/jquery-2.1.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 src="js/app1.js"></script>
</body>
</html>

PHP...

<?php
//address of the server where db is installed
$servername = "localhost";

//username to connect to the db
//the default value is root
$username = "xyz";

//password to connect to the db
//this is the value you would have specified during installation of WAMP stack
$password = "123";

//name of the db under which the table is created
$dbName = "test";

//establishing the connection to the db.
$conn = new mysqli($servername, $username, $password, $dbName);

//checking if there were any error during the last connection attempt
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

//the SQL query to be executed
$query = ("SELECT month, actuallikes, projected, profit FROM avp");

//storing the result of the executed query
$result = $conn->query($query);

//initialize the array to store the processed data
$jsonArray = array();

//check if there is any data returned by the SQL Query
if ($result->num_rows > 0) {
  //Converting the results into an associative array
  while($row = $result->fetch_assoc()) {
    $jsonArrayItem = array();
    $jsonArrayItem['lable'] = $row['month'];
    $jsonArrayItem['value'] = $row['actuallikes'];
    $jsonArrayItem['value1'] = $row['projected'];
    $jsonArrayItem['value2'] = $row['profit'];  
    //append the above created object into the main array.
    array_push($jsonArray, $jsonArrayItem);
  }
}

//Closing the connection to DB
$conn->close();

//set the response content type as JSON
header('Content-type: application/json');
//output the return value of json encode using the echo function. 
echo json_encode($jsonArray);
?>

JavaScript...

var lables = [], values = [], value1s = [], value2s = [];
function getusers() {

    $.ajax({
            type: 'GET',
            async: false,
            url: "http://localhost/avp/chart_data.php",
            data: {},
            dataType: "json",
            success: function(result){
                if(result){
                    for(var i = 0 ; i < result.length; i++){
                        lables.push(result[i].lable);
                        values.push(result[i].value);
                        value1s.push(result[i].value1);
                        value2s.push(result[i].value2);
                    }
                }
            },
            error: function(errmsg) {
                alert("Ajax??????????!"+ errmsg);
            }
        });
    return lables, values, value1s, value2s;
    }

    getusers();

 salesAnlysisChart = new FusionCharts({
    type: 'mscombi2d',
    renderAt: 'chart-container',
    width: '600',
    height: '300',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Harry's SuperMart",
        "subCaption": "Sales analysis of last year",
        "xAxisname": "Month",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "showBorder": "0",
        "showValues": "0",
        "paletteColors": "#0075c2,#1aaf5d,#f2c500",
        "bgColor": "#ffffff",
        "showCanvasBorder": "0",
        "canvasBgColor": "#ffffff",
        "captionFontSize": "14",
        "subcaptionFontSize": "14",
        "subcaptionFontBold": "0",
        "divlineColor": "#999999",
        "divLineIsDashed": "1",
        "divLineDashLen": "1",
        "divLineGapLen": "1",
        "showAlternateHGridColor": "0",
        "usePlotGradientColor": "0",
        "toolTipColor": "#ffffff",
        "toolTipBorderThickness": "0",
        "toolTipBgColor": "#000000",
        "toolTipBgAlpha": "80",
        "toolTipBorderRadius": "2",
        "toolTipPadding": "5",
        "legendBgColor": "#ffffff",
        "legendBorderAlpha": '0',
        "legendShadow": '0',
        "legendItemFontSize": '10',
        "legendItemFontColor": '#666666'
      },
      "categories": [{
        "category": lables
      }],
      "dataset": [{
        "seriesName": "Actual Revenue",
        "showValues": "1",
        "data": values
      }, {
        "seriesName": "Projected Revenue",
        "renderAs": "line",
        "data": value1s
      }, {
        "seriesName": "Profit",
        "renderAs": "area",
        "data": value2s
      }]
    }
  });
    salesAnlysisChart.render(); }
});
});

Hope someone could help me in spotting the error. Apologies if i have done anything stupid.

Cheers!

Upvotes: 0

Views: 1956

Answers (1)

Prerana
Prerana

Reputation: 44

The JSON structure you are creating to render the chart is not correct e.g. as "categories" should have an array of objects as a value, but you are passing an array of values to it, same goes for data key inside the dataset. You need to modify your code or you can also use my code.

Upvotes: 1

Related Questions