Я нашел этот код в Интернете, чтобы сделать в основном все, что я искал, за исключением того, что они не используют данные из базы данных 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 набор данных, как мне это сделать?
Чтобы динамически обновить график, следуя методы получается очень полезно
- 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>
Других решений пока нет …