Моя цель — создать простую последовательную диаграмму javaScript в реальном времени, которая получает данные с использованием точки данных автоматизации манго.
У меня нет никаких проблем с самой точкой данных, но попытка связать диаграмму с точкой данных — настоящая боль. Я пытался использовать два различных типа руководств (\pointHierarchyExamples\realtimeSerialChart.shtm) и (\tutorials\dataPointChart.shtm).
Предыдущий пример казался намного более практичным, потому что он давал четкий пример того, как связать точку данных с графиком, но, к сожалению, даже сама страница примера не работала, поэтому я не мог ее использовать. Последний пример, с другой стороны, работал, но в нем было много вещей, которые мне не нужны (в основном виджеты, связанные с представлением времени и данных), и казалось, что их трудно удалить и изменить. Сначала я хочу иметь возможность создавать только диаграмму без каких-либо других виджетов на странице. Кроме того, я не мог найти никакой документации
Ниже вы найдете проблемы, с которыми я столкнулся, и код, который мне удалось создать, изменив второй пример. Я также добавил свои мысли и вопросы в качестве комментариев.
Первая проблема заключается в том, что при создании диаграммы MangoAPI создает диаграмму, поэтому у меня нет полной свободы в разработке диаграммы (например, я не могу изменить тему).
Вторая проблема заключается в том, что я не могу отобразить диаграмму при загрузке страницы, а только после вызова функции.
Третья проблема заключается в том, что я не смог найти практически никакой документации или примеров, в которых есть соответствующие классы/функции манго.
TL:DR Я хотел бы найти хорошую документацию об этих библиотеках Mango. Любая другая помощь также приветствуется
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Add the Mango Favicon -->
<link rel="icon" href="/images/favicon.ico">
<!-- Base Library -->
<script type="text/javascript" src="/resources/loaderConfig.js"></script>
<script type="text/javascript" src="/resources/require.js"></script>
<script type="text/javascript" src="/resources/main.js"></script>
<script type="text/javascript">
var points = {}; //Map of xids to points where points['xid'] = point;
//Import needed libraries
require(['jquery', 'mango/api', 'mango/TimePresetPicker', 'mango/SerialChart',
'mango/PointValueDataProvider', 'mango/ProviderOptionsManager', 'jquery.notify'],
//Creating the main function
function($, MangoAPI, TimePresetPicker, SerialChart, PointValueDataProvider,
ProviderOptionsManager, point) {
//Setting up the chart
var chart = new SerialChart({
divId: 'Graafi',
amChart: {
theme: "light", //Doesn't do anything
chartScrollbar: {
enabled: true,
graph: 'DP_211607',
offset: 30,
oppositeAxis: false,
scrollbarHeight: 90
},
legend: {
align: 'center',
},
categoryAxis: {
minPeriod: 'ss'
}
}
});
//Creating the display on the page
chart.createDisplay();
// create a point value data provider
var dataProvider = new PointValueDataProvider(null, {
// convert point values to their specified unit
apiOptions: { converted: true }
});
// setup the time picker with its inputs
//The time picker requires all three elements even if I didn't want to. In addition, I couldn't find anything to help me customize it
var timePicker = new TimePresetPicker({
presetPicker: $('#presetPicker') //Uses a drop down menu, but I'd rather like fever options that each had their own buttons.
//fromPicker: $('#fromPicker'), these can be deleted like I did, but their element will still be on the screen for some reason. And it looks dumb.
//toPicker: $('#toPicker')
});
//The provider manager seems to be really rigid, because it requires timePicker or it won't work. In addition I couldn't find any documentation about how to use it
var providerManager = new ProviderOptionsManager({
errorFunction: MangoAPI.logError,
timePicker: timePicker
});
// link the chart to the data provider
dataProvider.addListener(chart);
// link the provider to the provider manager
providerManager.addProvider(dataProvider);
$('#presetPicker').on('change', function() {
// update the data provider
dataProvider.addDataPoint(point);// These two lines are the ones that make the graph show on the screen. I would like to be able to do these when the page is loaded, but for some reason they only work when the value of an element is changed
providerManager.refreshProviders();
});
function loadPoints() {
MangoAPI.defaultApi.queryPoints('limit(50)').then(function(results){ // I couldn't find any documentation about how to use this query function so I just copied the 'limit(50)' keyword and filtered out the one I wanted based on its XID
for (var i=0; i<results.items.length; i++) {
var point = results.items[i];
if (point.xid === 'DP_211607') {
points[point.xid] = point;
dataProvider.addDataPoint(point); //these two lines of code should update the chart and view it, but for some reason it gives this error "TypeError: this.amChart.validateData is not a function"
providerManager.refreshProviders();
break;
};
}
}).fail(MangoAPI.logError);
}
loadPoints();
});
</script>
</head>
<body>
<div id="data">
<header></header>
<div id="Graafi"></div>
<div class="input">
<select id="presetPicker" class="form-control"></select>
</div>
<footer></footer>
</div>
</body>
