Я использую библиотеку amCharts (это библиотека JavaScript для загрузки данных в диаграммах) для извлечения данных из базы данных mySQL и отображения ее с использованием биржевой диаграммы.
Здесь я нашел полный учебник:
http://www.amcharts.com/tutorials/your-first-stock-chart/
Они используют статические данные, которые они создали в коде, однако я хочу использовать свои собственные данные, извлекая его из базы данных в формате JSON.
Файл PHP для включения: json_encode.php
<?php include("data.php"); echo json_encode($rows); ?>
Результат этого файла выглядит следующим образом:
[{"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"}]
Полный код из учебника:
<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"); });
Поэтому вместо этой строки:
dataSet.dataProvider = chartData;
Я хочу использовать dataLoader для загрузки данных из PHP в формате JSON:
dataSet.dataloader = { "url": "json_encode.php" },
Возможно, объявление dataLoader неверно, потому что оно не работает.
Любая помощь будет оценена 🙂
Хотя немного поздно, на всякий случай кто-то сталкивается с этим вопросом …
Следуйте инструкциям AmCharts для DataLoader, все шаги описаны четко и даже пример для биржевых диаграмм. https://www.amcharts.com/tutorials/using-data-loader-plugin/