This topic contains 11 replies, has 3 voices, and was last updated by Peter Stoev 10 years, 1 month ago.
-
I’ve a mix of different table, tab, chart. Now I edited “colorFunction” and starting from that I experience rendering problems. If I change the “rangeSelector” range in the chart, then some data are not displayed anymore.
The data are about 1000 sets.
Here my code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>Anzeige der TSI-Werte.
</title>
<link rel=”stylesheet” href=”jqwidgets/jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/jqwidgets/styles/jqx.black.css” type=”text/css” />
<script type=”text/javascript” src=”jqwidgets/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/scripts/demos.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.rangeselector.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/globalization/globalize.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/globalization/globalize.culture.de-DE.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript”>$(document).ready(function () {
// Create a jqxMenu
$(“#jqxMenu”).jqxMenu({ width: ‘120’, mode: ‘vertical’, theme: ‘black’});
$(“#jqxMenu”).css(‘visibility’, ‘visible’);var initGrid = function () {
var source =
{
datatype: “json”,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failder.
commit(true);
},datafields: [
{ name: ‘datum’, type: ‘date’ },
{ name: ‘tsi_wert’, type: ‘number’ }
],
url: ‘tsi_werte.php’
};var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxGrid”).jqxGrid(
{
width: ‘100%’,
height: ‘100%’,
theme: ‘black’,
source: dataAdapter,
showstatusbar: true,
renderstatusbar: function (statusbar) {
// appends buttons to the status bar.
var container = $(“<div style=’overflow: hidden; position: relative; margin: 3px;’></div>”);
var addButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Add</span></div>”);
var deleteButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Delete</span></div>”);
var reloadButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Reload</span></div>”);
var searchButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Find</span></div>”);
container.append(addButton);
container.append(deleteButton);
container.append(reloadButton);
container.append(searchButton);
statusbar.append(container);
addButton.jqxButton({ width: 60, height: 20, theme: ‘black’ });
deleteButton.jqxButton({ width: 65, height: 20, theme: ‘black’ });
reloadButton.jqxButton({ width: 65, height: 20, theme: ‘black’ });
searchButton.jqxButton({ width: 50, height: 20, theme: ‘black’ });
// add new row.
addButton.click(function (event) {
var datarow = ”;
$(“#jqxGrid”).jqxGrid(‘addrow’, null, datarow[0]);
});
// delete selected row.
deleteButton.click(function (event) {
var selectedrowindex = $(“#jqxGrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxGrid”).jqxGrid(‘getdatainformation’).rowscount;
var id = $(“#jqxGrid”).jqxGrid(‘getrowid’, selectedrowindex);
$(“#jqxGrid”).jqxGrid(‘deleterow’, id);
});
// reload grid data.
reloadButton.click(function (event) {
$(“#jqxGrid”).jqxGrid({ source: getAdapter() });
});
// search for a record.
searchButton.click(function (event) {
var offset = $(“#jqxgrid”).offset();
$(“#jqxwindow”).jqxWindow(‘open’);
$(“#jqxwindow”).jqxWindow(‘move’, offset.left + 30, offset.top + 30);
});
},
editable: true,
//localization: getLocalization(‘de’),
selectionmode: ‘multiplecellsadvanced’,
columns: [
{ text: ‘Datum’, datafield: ‘datum’, columntype: ‘datetimeinput’, cellsformat: ‘d’, width: 150,
},
{ text: ‘TSI-Wert’, datafield: ‘tsi_wert’, width: 100,
createeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ decimalDigits: 2, digits: 4 });
}
}
]
});
}
var initChart = function () {
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘datum’ },
{ name: ‘tsi_wert’ }
],
url: ‘tsi_werte.php’
};var dataAdapter = new $.jqx.dataAdapter(
source, { async: false, autoBind: true, loadError: function (xhr, status, error) {
alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); }
});var months = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘Mai’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Okt’, ‘Nov’, ‘Dez’];
var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return ‘<div style=”text-align:left”><b>Datum: ‘ + categoryValue.getDate() + ‘.’ + months[categoryValue.getMonth()] + ‘.’ + categoryValue.getFullYear() + ‘</b><br/>TSI-Wert: ‘ + dataItem.tsi_wert + ‘</div>’;
};// prepare jqxChart settings
var settings = {
title: “Übersicht TSI-Werte”,
borderLineWidth: 1,
showBorderLine: true,
enableAnimations: true,
enableCrosshairs: true,
showLegend: false,
animationDuration: 1500,
padding: { left: 5, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
xAxis:
{
dataField: ‘datum’,
type: ‘date’,
baseUnit: ‘day’,
minValue: new Date(2013, 0, 1),
maxValue: new Date(2013, 11, 31),
textRotationAngle: -45,
formatFunction: function (value) {
return value.getDate() + ‘.’ + months[value.getMonth()] + ‘.’ + value.getFullYear().toString().substring(2);
},
showGridLines: true,
rangeSelector: {
size: 120,
padding: { /*left: 0, right: 0,*/top: 30, bottom: 0 },
minValue: new Date(2004, 0, 1),
backgroundColor: ‘white’,
dataField: ‘tsi_wert’,
baseUnit: ‘month’,
showGridLines: false,
formatFunction: function (value) {
return months[value.getMonth()] + ‘\” + value.getFullYear().toString().substring(2);
}
},
},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘spline’,
toolTipFormatFunction: toolTipCustomFormatFn,
valueAxis:
{
unitInterval: 0.05,
minValue: 0.8,
maxValue: 1.2,
displayValueAxis: true,
description: ‘TSI-Wert’
},
series: [{
dataField: ‘tsi_wert’,
displayText: ‘TSI-Wert’,
//lineWidth: 1,
//lineWidthSelected: 1,
emptyPointsDisplay: ‘connect’,
colorFunction: function (value, itemIndex, serie, group) {
return (value < 1) ? ‘#FF0000’ : ‘#00FF00’;
}
}]
}
]
};
// setup the chart
$(‘#jqxChart’).jqxChart(settings);
}
// init widgets.
var initWidgets = function (tab) {
switch (tab) {
case 0:
initGrid();
break;
case 1:
initChart();
break;
}
}
$(‘#jqxTabs’).jqxTabs({ width: 800, height: 560, theme: ‘black’, initTabContent: initWidgets });
});
</script>
</head>
<body class=’default’ style=’background: #222222′>
<div id=’jqxMenu’ style=”visibility: hidden; float: left;”>
<?php
include(“navigation.html”);
?>
</div>
<div id=’jqxWidget’>
<div id=’jqxTabs’>-
<li style=”margin-left: 30px;”>
-
<div style=”height: 20px; margin-top: 5px;”>
<div style=”float: left;”>
</div>
<div style=”margin-left: 4px; vertical-align: middle; text-align: center; float: left;”>
Grafik</div>
</div>
<div style=”height: 20px; margin-top: 5px;”>
<div style=”float: left;”>
</div>
<div style=”margin-left: 4px; vertical-align: middle; text-align: center; float: left;”>
Tabelle</div>
</div><div style=”overflow: hidden;”>
<div id=”jqxGrid”>
</div>
</div>
<div style=”overflow: hidden;”>
<div id=’jqxChart’ style=”width: 100%; height: 100%”>
</div>
</div>
</div>
</div>
</body>
</html> -
<div style=”height: 20px; margin-top: 5px;”>
You must be logged in to reply to this topic.