Как создать комбинированную диаграмму (гистограмму и линию) с диаграммами слияния, используя данные из базы данных MySQL?

Я нашел этот код в Интернете, чтобы сделать в основном все, что я искал, за исключением того, что они не используют данные из базы данных MySQL, где я нахожусь. Вот их код:

{
"chart": {
"caption": "Inventory by Product Categories",
"bgcolor": "FFFFFF",
"plotgradientcolor": "",
"showalternatehgridcolor": "0",
"showplotborder": "0",
"divlinecolor": "CCCCCC",
"showvalues": "0",
"showcanvasborder": "0",
"pyaxisname": "Cost of Inventory",
"syaxisname": "Units in Inventory",
"numberprefix": "$",
"labeldisplay": "STAGGER",
"slantlabels": "1",
"canvasborderalpha": "0",
"legendshadow": "0",
"legendborderalpha": "0",
"showborder": "0"},
"categories": [
{
"category": [
{
"label": "Seafood",
"labelPadding": 0
},
{
"label": "Beverages",
"labelPadding": 12
},
{
"label": "Condiments",
"labelPadding": 0
},
{
"label": "Dairy Products",
"labelPadding": 12
},
{
"label": "Confections",
"labelPadding": 0
},
{
"label": "Meat/Poultry",
"labelPadding": 12
},
{
"label": "Grains/Cereals",
"labelPadding": 0
},
{
"label": "Produce",
"labelPadding": 12
}
]
}
],
"dataset": [
{
"seriesname": "Cost of Inventory",
"color": "008ee4",
"data": [
{
"value": "13510"},
{
"value": "12480"},
{
"value": "12024"},
{
"value": "11271"},
{
"value": "10392"},
{
"value": "5729"},
{
"value": "5594"},
{
"value": "3549"}
]
},
{
"seriesname": "Quantity",
"parentyaxis": "S",
"renderas": "Line",
"color": "f8bd19",
"data": [
{
"value": "701"},
{
"value": "559"},
{
"value": "507"},
{
"value": "393"},
{
"value": "386"},
{
"value": "165"},
{
"value": "258"},
{
"value": "100"}
]
}
]
}

Это имеет смысл, но он изменяет этот код JSON, чтобы принимать данные из базы данных, вместо того, чтобы жестко кодировать это, что трудно для меня.

Вот соответствующая часть моего кода:

<?php
$strQuery2 = "SELECT ScrapDate, SUM(Quantity) AS Quantity FROM Scrap WHERE Department = 'WE' 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" => "WE Last Week Scrap Quantity",
"paletteColors" => "#0075c2",
"bgColor" => "#ffffff",
"borderAlpha"=> "20",
"canvasBorderAlpha"=> "0",
"usePlotGradientColor"=> "0",
"plotBorderAlpha"=> "10",
"showXAxisLine"=> "1",
"xAxisLineColor" => "#999999",
"showValues"=> "0",
"divlineColor" => "#999999",
"divLineIsDashed" => "1",
"showAlternateHGridColor" => "0",
"xAxisName"=> "Day",
"yAxisName"=> "Quantity")
);

$arrData2["data"] = array();

// Push the data into the array

while($row2 = mysqli_fetch_array($result2)) {
array_push($arrData2["data"], array(
"label" => $row2["ScrapDate"],
"value" => $row2["Quantity"],
//                "link" => "deptDrillDown.php?Department=".$row["Department"]
)
);
}

$jsonEncodedData2 = json_encode($arrData2);

$columnChart2 = new FusionCharts("column2D", "chart2" , 600, 300, "chart-2", "json", $jsonEncodedData2);

// Render the chart
$columnChart->render();
$columnChart2->render();

// Close the database connection
$dbhandle->close();

}
?>

На данный момент я могу получить данные из базы данных MySQL и очень легко поместить их в график. Теперь я хочу добавить еще 1 набор данных, как мне это сделать?

1

Решение

Чтобы динамически обновить график, следуя методы получается очень полезно

  • getJSONData: Извлекает данные диаграммы в формате JSON.
  • setJSONData: Устанавливает данные диаграммы в формате данных JSON

Пример реализации показан в следующем фрагменте. Диаграмма изначально отображается по умолчанию column2d диаграмма. Однажды Add Area При нажатии кнопки набор данных области визуально обновляется. Аналогично при нажатии на Add Line Кнопка, чтобы добавить набор данных линии. Reset Кнопка восстанавливает исходный столбец только визуально.

var visitChart,
areaBtn = document.getElementById('area'),
lineBtn = document.getElementById('line'),
resetBtn = document.getElementById('reset');
FusionCharts.ready(function() {
visitChart = new FusionCharts({
type: 'mscombi2d',
renderAt: 'chart-container',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Actual Revenues, Targeted Revenues & Profits",
"subcaption": "Last year",
"xaxisname": "Month",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"theme": "fint"},
"categories": [{
"category": [{
"label": "Jan"}, {
"label": "Feb"}, {
"label": "Mar"}, {
"label": "Apr"}, {
"label": "May"}, {
"label": "Jun"}, {
"label": "Jul"}, {
"label": "Aug"}, {
"label": "Sep"}, {
"label": "Oct"}, {
"label": "Nov"}, {
"label": "Dec"}]
}],
"dataset": [{
"seriesname": "Actual Revenue",
"data": [{
"value": "16000"}, {
"value": "20000"}, {
"value": "18000"}, {
"value": "19000"}, {
"value": "15000"}, {
"value": "21000"}, {
"value": "16000"}, {
"value": "20000"}, {
"value": "17000"}, {
"value": "25000"}, {
"value": "19000"}, {
"value": "23000"}]
}]
}
}).render();
});
areaBtn.addEventListener('click', function() {
var dataset,
json = visitChart.getJSONData();
if (!(dataset = json.dataset)) {
dataset = json.dataset = [];
}
dataset.push({
"seriesname": "Profit",
"renderas": "area",
"showvalues": "0",
"data": [{
"value": "4000"}, {
"value": "5000"}, {
"value": "3000"}, {
"value": "4000"}, {
"value": "1000"}, {
"value": "7000"}, {
"value": "1000"}, {
"value": "4000"}, {
"value": "1000"}, {
"value": "8000"}, {
"value": "2000"}, {
"value": "7000"}]
});
visitChart.setJSONData(json);
areaBtn.disabled = true;
});
lineBtn.addEventListener('click', function() {
var dataset,
json = visitChart.getJSONData();
if (!(dataset = json.dataset)) {
dataset = json.dataset = [];
}
dataset.push({
"seriesname": "Projected Revenue",
"renderas": "line",
"showvalues": "0",
"data": [{
"value": "15000"}, {
"value": "16000"}, {
"value": "17000"}, {
"value": "18000"}, {
"value": "19000"}, {
"value": "19000"}, {
"value": "19000"}, {
"value": "19000"}, {
"value": "20000"}, {
"value": "21000"}, {
"value": "22000"}, {
"value": "23000"}]
});
visitChart.setJSONData(json);
lineBtn.disabled = true;
});
resetBtn.addEventListener('click', function() {
var dataset,
len,
json = visitChart.getJSONData();
if (!(dataset = json.dataset)) {
dataset = json.dataset = [];
}
if ((len = dataset.length) > 1) {
dataset.splice(1, len - 1);
}
visitChart.setJSONData(json);
areaBtn.disabled = false;
lineBtn.disabled = false;
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<button id='area'>Add Area</button>
<button id='line'>Add Line</button>
<button id='reset'>Reset</button>
<span id="chart-container">FusionCharts XT will load here!</span>
0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]