Как создать несколько фьюжн-диаграмм на одной странице?
У меня есть следующий код, который производит это:
Если вы посмотрите на мой код, я на самом деле пытаюсь изменить 2 диаграммы и разместить их в отдельных строках таблицы, чтобы они были друг над другом. Вот почему в нижней части графика расположены линии таблицы. Когда я удаляю весь код для моего первого графика, мой второй график появляется на веб-странице, но если он там есть, он не отображается. Есть что-то, чего мне не хватает?
Я думал, что, возможно, я должен был включить строку: dbhandle->close после каждого графика, но это не имеет особого смысла, так как это просто соединение с моей базой данных MySQL.
<?php
include("includes/fusioncharts.php");
// variables declared before
$dbhandle = new mysqli($hostdb, $userdb, $passdb, $namedb);
// Render an error message, to avoid abrupt failure, if the database connection parameters are incorrect
if ($dbhandle->connect_error) {
exit("There was an error with your connection: ".$dbhandle->connect_error);
}
?>
<html>
<head>
<title>FusionCharts XT - Column 2D Chart - Data from a database</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="fusioncharts/js/fusioncharts.js"></script>
</head>
<body>
<?php
$strQuery = "SELECT Department, SUM(Quantity) AS Quantity FROM Scrap GROUP BY Department ORDER BY Department";
// Execute the query, or else return the error message.
$result = $dbhandle->query($strQuery) or exit("Error code ({$dbhandle->errno}): {$dbhandle->error}");
// If the query returns a valid response, prepare the JSON string
if ($result) {
// The `$arrData` array holds the chart attributes and data
$arrData = array(
"chart" => array(
"caption" => "Scrap by Department",
"paletteColors" => "#0075c2",
"bgColor" => "#ffffff",
"borderAlpha"=> "20",
"canvasBorderAlpha"=> "0",
"usePlotGradientColor"=> "0",
"plotBorderAlpha"=> "10",
"showXAxisLine"=> "1",
"xAxisLineColor" => "#999999",
"showValues"=> "0",
"divlineColor" => "#999999",
"divLineIsDashed" => "1",
"showAlternateHGridColor" => "0")
);
$arrData["data"] = array();
// Push the data into the array
while($row = mysqli_fetch_array($result)) {
array_push($arrData["data"], array(
"label" => $row["Department"],
"value" => $row["Quantity"],
//"link" => "deptDrillDown.php?Department=".$row["Department"]
)
);
}
$jsonEncodedData = json_encode($arrData);
$columnChart = new FusionCharts("column2D", "myFirstChart" , 600, 300, "chart-1", "json", $jsonEncodedData);
// Render the chart
$columnChart->render();
}
$strQuery2 = "SELECT ScrapDate, SUM(Quantity) AS Quantity FROM Scrap WHERE Department = 'NW' GROUP BY ScrapDate ORDER BY ScrapDate";
// Execute the query, or else return the error message.
$result2 = $dbhandle->query($strQuery2) or exit("Error code ({$dbhandle->errno}): {$dbhandle->error}");
// If the query returns a valid response, prepare the JSON string
if ($result2) {
// The `$arrData` array holds the chart attributes and data
$arrData2 = array(
"chart" => array(
"caption" => "By Week",
"paletteColors" => "#0075c2",
"bgColor" => "#ffffff",
"borderAlpha"=> "20",
"canvasBorderAlpha"=> "0",
"usePlotGradientColor"=> "0",
"plotBorderAlpha"=> "10",
"showXAxisLine"=> "1",
"xAxisLineColor" => "#999999",
"showValues"=> "0",
"divlineColor" => "#999999",
"divLineIsDashed" => "1",
"showAlternateHGridColor" => "0")
);
$arrData2["data"] = array();
// Push the data into the array
while($row = mysqli_fetch_array($result2)) {
array_push($arrData2["data"], array(
"label" => $row["ScrapDate"],
"value" => $row["Quantity"],
//"link" => "deptDrillDown.php?Department=".$row["Department"]
)
);
}
$jsonEncodedData2 = json_encode($arrData2);
$columnChart2 = new FusionCharts("column2D", "myFirstChart" , 600, 300, "chart-2", "json", $jsonEncodedData2);
// Render the chart
$columnChart2->render();
// Close the database connection
$dbhandle->close();
}
?><table border='1'>
<tr>
<td>
<div id="chart-1"><!-- Fusion Charts will render here--></div>
</td>
</tr>
<tr>
<td>
<div id="chart-2"><!-- Fusion Charts will also be rendered here--></div>
</td>
</tr>
</table>
</body>
</html>
РЕШИТЬ:
Я посмотрел конструктор для объекта FusionCharts, и второй параметр является уникальным идентификатором диаграммы. Так как я копировал и вставлял раньше, я не думал менять его. Я установил его на график 2, и теперь оба графика отображаются правильно.
Вот что было раньше:
$columnChart2 = new FusionCharts("column2D", "myFirstChart" , 600, 300, "chart-2", "json", $jsonEncodedData2);
Это обновленный код:
$columnChart2 = new FusionCharts("column2D", "mySecondChart" , 600, 300, "chart-2", "json", $jsonEncodedData2);
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …