2016-08-05 8 views
1

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

+0

Какие ошибки вы видите в консоли? Вы возвращаете данные? Какой формат? Json, который вы дали, отлично, но вам нужно попытаться получить эту структуру, а затем ваши данные. – nerdlyist

+0

Я предполагаю, что должен был указать, я не реализовал какой-либо код для включения третьего набора данных. В настоящее время у меня есть рабочий график. Теперь я хочу добавить линейный график поверх моей диаграммы с 3-м набором данных, который я еще должен включить. – Michael

ответ

0

Чтобы динамически обновлять таблицу после methods оказывается очень полезным:

  • 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

Привет @michael дайте мне знать, если какая-либо проблема. – Ayan

+0

Привет, это проблема. Мне нужно сделать это прямо из базы данных. в этом примере показано, как получить данные уже в формате JSON – Michael

 Смежные вопросы

  • Нет связанных вопросов^_^