Wie man die Daten mit dataLoader in amCharts?
Ich bin mit amCharts Bibliothek (es ist eine JavaScript-Bibliothek für das laden von Daten in Diagrammen) zum extrahieren der Daten aus der mySQL-Datenbank, und zeigen Sie es mit einem Standard-Diagramm.
Fand ich ein komplettes tutorial hier:
http://www.amcharts.com/tutorials/your-first-stock-chart/
Verwenden Sie statische Daten, die Sie erstellt haben, den code, jedoch möchte ich meine eigenen Daten durch extrahieren aus der Datenbank in JSON-format.
Den PHP-include-Datei:
json_encode.php
<?php
include("data.php");
echo json_encode($rows);
?>
Die Ausgabe dieser Datei sieht wie folgt aus:
[{"date":"2014-01-19 00:00:00","value":"15"},{"date":"2014-04-19 00:00:00","value":"8"},{"date":"2014-05-19 00:00:00","value":"54"},{"date":"2014-07-19 00:00:00","value":"5"},{"date":"2014-09-19 00:00:00","value":"24"},{"date":"2014-11-19 00:00:00","value":"18"},{"date":"2015-01-19 00:00:00","value":"36"},{"date":"2015-02-19 00:00:00","value":"10"},{"date":"2015-03-11 16:54:55","value":"7"},{"date":"2015-03-19 00:00:00","value":"45"},{"date":"2015-04-19 00:00:00","value":"17"},{"date":"2015-05-19 00:00:00","value":"4"},{"date":"2015-06-19 00:00:00","value":"27"}]
Den kompletten code aus dem tutorial:
<script type="text/javascript">
var chartData= [
{date: new Date(2011, 5, 1, 0, 0, 0, 0), val:10},
{date: new Date(2011, 5, 2, 0, 0, 0, 0), val:11},
{date: new Date(2011, 5, 3, 0, 0, 0, 0), val:12},
{date: new Date(2011, 5, 4, 0, 0, 0, 0), val:11},
{date: new Date(2011, 5, 5, 0, 0, 0, 0), val:10},
{date: new Date(2011, 5, 6, 0, 0, 0, 0), val:11},
{date: new Date(2011, 5, 7, 0, 0, 0, 0), val:13},
{date: new Date(2011, 5, 8, 0, 0, 0, 0), val:14},
{date: new Date(2011, 5, 9, 0, 0, 0, 0), val:17},
{date: new Date(2011, 5, 10, 0, 0, 0, 0), val:13}
];
AmCharts.ready(function() {
var chart = new AmCharts.AmStockChart();
chart.pathToImages = "amcharts/images/";
var dataSet = new AmCharts.DataSet();
dataSet.dataProvider = chartData;
dataSet.fieldMappings = [{fromField:"val", toField:"value"}];
dataSet.categoryField = "date";
chart.dataSets = [dataSet];
var stockPanel = new AmCharts.StockPanel();
chart.panels = [stockPanel];
var legend = new AmCharts.StockLegend();
stockPanel.stockLegend = legend;
var panelsSettings = new AmCharts.PanelsSettings();
panelsSettings.startDuration = 1;
chart.panelsSettings = panelsSettings;
var graph = new AmCharts.StockGraph();
graph.valueField = "value";
graph.type = "column";
graph.title = "MyGraph";
graph.fillAlphas = 1;
stockPanel.addStockGraph(graph);
var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
categoryAxesSettings.dashLength = 5;
chart.categoryAxesSettings = categoryAxesSettings;
var valueAxesSettings = new AmCharts.ValueAxesSettings();
valueAxesSettings .dashLength = 5;
chart.valueAxesSettings = valueAxesSettings;
var chartScrollbarSettings = new AmCharts.ChartScrollbarSettings();
chartScrollbarSettings.graph = graph;
chartScrollbarSettings.graphType = "line";
chart.chartScrollbarSettings = chartScrollbarSettings;
var chartCursorSettings = new AmCharts.ChartCursorSettings();
chartCursorSettings.valueBalloonsEnabled = true;
chart.chartCursorSettings = chartCursorSettings;
var periodSelector = new AmCharts.PeriodSelector();
periodSelector.periods = [{period:"DD", count:1, label:"1 day"},
{period:"DD", selected:true, count:5, label:"5 days"},
{period:"MM", count:1, label:"1 month"},
{period:"YYYY", count:1, label:"1 year"},
{period:"YTD", label:"YTD"},
{period:"MAX", label:"MAX"}];
chart.periodSelector = periodSelector;
chart.write("chartdiv");
});
Also statt dieser Zeile:
dataSet.dataProvider = chartData;
Möchte ich dataLoader das laden der Daten aus PHP im JSON-format:
dataSet.dataloader = {
"url": "json_encode.php"
},
Vielleicht die Erklärung der dataLoader ist nicht korrekt, weil es nicht funktioniert.
Jede Hilfe wird dankbar sein 🙂
eigentlich ist es ein plugin, entwickelt von @martynasma , Sie finden es hier : github.com/amcharts/dataloader
Fehler in der browser-Konsole? Auch haben Sie denken Sie daran, die dataLoader.min.js -Datei auf Ihrer Seite?
keine errros im browser und ich habe auch enthalten die dataLoader.min.js Datei
<script src="amcharts/plugins/dataloader/dataloader.min.js"> </script>
InformationsquelleAutor The Beast | 2015-08-19
Du musst angemeldet sein, um einen Kommentar abzugeben.
Obwohl es ein bisschen spät ist, nur für den Fall jemand kommt über diese Frage...
Folgen Sie dem tutorial gegeben von AmCharts für DataLoader, alle Schritte sind klar beschrieben und es gibt sogar ein Beispiel für Stock-charts.
https://www.amcharts.com/tutorials/using-data-loader-plugin/
InformationsquelleAutor nonomi