jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 22 total)

1 2 →

Author

Posts

February 9, 2022 at 2:56 pm in reply to: data adapter for dynamic data data adapter for dynamic data #121492

elbnacht

Participant

Peter, any idea?

February 6, 2022 at 3:10 pm in reply to: data adapter for dynamic data data adapter for dynamic data #121470

elbnacht

Participant

Hi Peter,
Thanks, it’s basically not really what I want. This works already with the databank-method very good. One point is, that I load a set of 50 data, sufficient for a nice chart, but I want to display only 10 within the grid. 50 shows always the vertical slider, what I don’t want.
I could use two different adapter getting the data out of the database. That’s not nice, because not synchronous.
And it would be more efficient to get only one dataset and filling two arrays with that, one grid and one chart dataset. With that I could use the localdata examples.
But I could not make this work until now.

October 14, 2016 at 10:25 am in reply to: jqxProgressBar freeze jqxProgressBar freeze #88196

elbnacht

Participant

Your Progress Bar Demo also freezes.

No input possible.
Please update it or give hint, how to solve it.

Best regards

Jens

October 29, 2015 at 5:32 pm in reply to: chart colorFunction is not working chart colorFunction is not working #77529

elbnacht

Participant

Any news on the issue?
It is still not fixed.

Jens

October 22, 2015 at 8:14 pm in reply to: Get chart data from grid record Get chart data from grid record #77237

elbnacht

Participant

Hello Vladimir,

sorry, but this also did not help completely. I have a funny behavior. If I run the code below, the chart content is not drawn. If I put a breakpoint at the line source: chartDataAdapter,, and I proceed running the code, then the chart is drawn. It seems, that I have just a timing problem between grid and chart.
The same behavior is, if I change localdata to localdata: dataAdapter.records,.

Have you any idea?

Jens


<!DOCTYPE html>
<html lang="de">
<head>
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.classic.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.metrodark.css" type="text/css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="jquery-validation/dist/jquery.validate.js"></script>
	<script type="text/javascript" src="jquery-validation/src/localization/messages_de.js"></script>
	<script type="text/javascript" src="jquery-validation/src/localization/methods_de.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.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/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcheckbox.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/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.pager.js"></script>	
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxnumberinput.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" src="jqwidgets/jqwidgets/jqxnotification.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxchart.rangeselector.js"></script>
	<style>
		.jqx-notification-container { z-index:99999; }

        .jqx-chart-axis-text, .jqx-chart-label-text, .jqx-chart-legend-text, .jqx-chart-axis-description, .jqx-chart-title-text, .jqx-chart-title-description
        {
            fill: #ffffff;
            color: #ffffff;
        }

		html, body {
			height: 100%;
		}
		#jqxSeite {
			display: block;
		}
		#jqxMenu {
			width: 120px;
			height:490px;
			float: left;
		}
		#jqxGrid {
			float: left;
			height:490px;
			margin-left: 2px;
		}
		#jqxChart {
			width:850px; 
			height:592px;
			float: left;
			margin-left: 1px;
		}
	</style>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = 'metrodark';

			// Create a jqxMenu
			$("#jqxMenu").jqxMenu({ width: '120', height: '589', mode: 'vertical', theme: theme});

            $("#jqxMessage").jqxNotification({
                width: 250, position: "top-right", opacity: 0.7,
                autoOpen: false, animationOpenDelay: 800, autoClose: true, autoCloseDelay: 20000});

			var getLocalization = function () {
				var localizationobj = {};
				localizationobj.percentSymbol = " %";
				localizationobj.currencySymbol = " €";
				localizationobj.currencySymbolPosition = "after";
				localizationobj.decimalSeparator = ",";
				localizationobj.thousandsSeparator = ".";
				patterns: {d: "dd.MM.yyyy"}
				return localizationobj;
			}

            // prepare the data
            var chartDataRecords = [];

			var	ZinsSatz = 0.3;
				
            var source =
            {
                datatype: "json",
                cache: false,
                datafields: [
					 { name: 'Datum', type: 'date'},
					 { name: 'Betrag', type: 'float' }
                ],
                id: 'Datum',
                url: 'entwicklung_connect_01.php',
                root: 'Rows',
				sortcolumn: 'Datum',
				sortdirection: 'desc',
                beforeprocessing: function (data) {
                    source.totalrecords = data[0].TotalRows;
                    //console.info(source.totalrecords);
                },
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    update_data = "update=true&Datum=" + rowid + "&Betrag=" + rowdata.Betrag;
                    $.ajax({
                        dataType: 'json',
                        url: 'entwicklung_connect_01.php',
                        cache: false,
                        data: update_data,
						success: function (data, status, xhr) {
							// insert command is executed.
							commit(true);
						},
						error: function(jqXHR, textStatus, errorThrown) {
							commit(false);
						}
                    });
                },
                addrow: function (rowid, rowdata, position, commit) {
                    // synchronize with the server - send add command
                    var add_data = "add=true";
                    $.ajax({
                        dataType: 'json',
                        url: 'entwicklung_connect_01.php',
                        cache: false,
                        data: add_data,
						success: function (data, status, xhr) {
							// insert command is executed.
							commit(true);
						},
						error: function(jqXHR, textStatus, errorThrown) {
							commit(false);
						}
                    });
                },
                deleterow: function (rowid, commit) {
                    // synchronize with the server - send delete command
                    var delete_data = "delete=true&Datum=" + rowid;
                    $.ajax({
                        dataType: 'json',
                        url: 'entwicklung_connect_01.php',
                        cache: false,
                        data: delete_data,
						success: function (data, status, xhr) {
							// insert command is executed.
							commit(true);
						},
						error: function(jqXHR, textStatus, errorThrown) {
							commit(false);
						}
                    });
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
				beforeLoadComplete: function (records) {
					// get data records.
					var record_data = [];
					var paginginformation = $('#jqxGrid').jqxGrid('getpaginginformation');
					var pagenum = paginginformation.pagenum;
					var pagesize = paginginformation.pagesize;
					var startWert = 50000; // Wert zu Beginn
					var WertMonat = 3000; // Wertanstieg pro Monat
					for (var i = pagenum * pagesize; i < records.length; i++) {
						var record = records[i];
						var aktDatum = new Date(record.Datum); 
						var startDatum = new Date(2014,0,25); 
						var anzWochen = Math.floor(( aktDatum.getTime() - startDatum.getTime() ) / 604800000); // Woche in ms
						var anzMonate = Math.floor(( aktDatum.getTime() - startDatum.getTime() ) / 2419200000); // Monat in ms
						var aktBW = startWert * Math.pow( 1 + ZinsSatz / 52, ZinsSatz * anzWochen );
						var aktMW = WertMonat * 12 / ZinsSatz * (Math.pow( 1 + ZinsSatz / 12, anzMonate) - 1);
						record.Ziel = aktBW + aktMW;
						record_data.push(record);
					}
					return record_data;
				}
			});
            
            // initialize jqxGrid
            $("#jqxGrid").jqxGrid( {
                width: 400,
                theme: theme,
                source: dataAdapter,
                //selectionmode: 'singlecell',
                editable: true,
                autoheight: true,
				localization: getLocalization(),
                pageable: true,
				pagermode: 'simple',
                pagerButtonsCount: 5,
				pagesize: 20,
				virtualmode: true,
				rendergridrows: function () {
                    return dataAdapter.records;
                },
				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;'><img style='position: relative; margin-top: 2px;'src='jqwidgets/images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>");
					var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;'src='jqwidgets/images/close.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></div>");
					var reloadButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;'src='jqwidgets/images/refresh.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Reload</span></div>");
					var targetValue = $("<div style='float: left; margin-left: 70px; '><input value='0.3' id='targetValue'/><span style='float: left; margin-left: 2px;'> %</span></div>");
					container.append(addButton);
					container.append(deleteButton);
					container.append(reloadButton);
					container.append(targetValue);
					statusbar.append(container);
					addButton.jqxButton({  width: 60, height: 20, theme: theme });
					deleteButton.jqxButton({  width: 65, height: 20, theme: theme });
					reloadButton.jqxButton({  width: 65, height: 20, theme: theme });
					targetValue.jqxInput({  width: 65, height: 26, theme: theme });
					// add new row.
					addButton.bind('click', function () {
						$('#jqxGrid').jqxGrid('addrow', null, {});
						$("#jqxGrid").jqxGrid( 'refreshdata' );
					});
					// delete selected row.
					deleteButton.bind('click', function () {
						var selectedRowIndex = $("#jqxGrid").jqxGrid('getselectedrowindex');
						var rowId = $("#jqxGrid").jqxGrid('getrowid', selectedRowIndex);
						console.info(rowId);
						$("#jqxGrid").jqxGrid('deleterow', rowId);
					});
					// reload grid data.
					reloadButton.bind('click', function () {
						$("#jqxGrid").jqxGrid({ source: dataAdapter });
					});
					targetValue.on('change', function (event) {
						var ZinsSatz = targetValue.val();
						var record_data = new Array();
						var paginginformation = $('#jqxGrid').jqxGrid('getpaginginformation');
						var pagenum = paginginformation.pagenum;
						var pagesize = paginginformation.pagesize;
						var startWert = 50000; // Vermögenswert zu Beginn
						var WertMonat = 3000; // Wertanstieg pro Monat
						for (var i = pagenum * pagesize; i < dataAdapter.records.length; i++) {
							var record = dataAdapter.records[i];
							var aktDatum = new Date(record.Datum); 
							var startDatum = new Date(2014,0,25); 
							var anzWochen = Math.floor(( aktDatum.getTime() - startDatum.getTime() ) / 604800000); // Woche in ms
							var anzMonate = Math.floor(( aktDatum.getTime() - startDatum.getTime() ) / 2419200000); // Monat in ms
							var aktBW = startWert * Math.pow( 1 + ZinsSatz / 52, ZinsSatz * anzWochen );
							var aktMW = WertMonat * 12 / ZinsSatz * (Math.pow( 1 + ZinsSatz / 12, anzMonate) - 1);
							record.Ziel = aktBW + aktMW;
							record_data.push(record);
						}
						$("#jqxGrid").jqxGrid( 'refreshdata' );
					});
				},
                columns: [
                      { text: 'Datum', editable: false, datafield: 'Datum', width: 140, cellsAlign: 'center', cellsFormat: 'dd.MM.yyyy' },
                      { text: 'Betrag', datafield: 'Betrag', width: 130, cellsAlign: 'center', cellsFormat: 'c2' },
                      { text: 'Ziel', datafield: 'Ziel', width: 130, cellsAlign: 'center', cellsFormat: 'c2' }
                  ]
            });

			
			var sourceChart = {
				localdata: function () {
					return dataAdapter.records;
                },
				datatype: "array",
				datafields: [
					{ name: 'Datum', type: 'date'},
					{ name: 'Betrag', type: 'float' },
					{ name: 'Ziel', type: 'float' }
				],
			};
			//console.info(sourceChart);

			var chartDataAdapter = new $.jqx.dataAdapter(sourceChart);
			
			var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'];
			
			var actDay = new Date();
			var minValDate = new Date();
			var maxValDate = new Date();
 			minValDate.setFullYear(actDay.getFullYear() - 1);
 			minValDate.setDate(1);
 			maxValDate.setMonth(actDay.getMonth() + 1);
 			maxValDate.setDate(1);
						            
            // prepare jqxChart settings
            var settings = {
				title: "Entwicklung",
                description: "(...)",
				backgroundColor: '#3E3E42',
                enableAnimations: true,
                animationDuration: 1500,
                enableCrosshairs: true,
                padding: { left: 5, top: 5, right: 30, bottom: 5 },
                titlePadding: { left: 30, top: 5, right: 0, bottom: 10 },
                source: chartDataAdapter,
                xAxis:
                {
                    dataField: 'Datum',
					type: 'date',
					dateFormat: 'dd.MM.yyyy',
					minValue: minValDate,
					maxValue: maxValDate,
					//tickMarks: { step: 12 },
					//unitInterval: 900,
					labels: { step: 1 },
					gridLines: {visible: true},
                    rangeSelector: {
                        //renderTo: $('#jqxChartSelector'),
						size: 80,
						padding: { left: 0, right: 0, top: 10, bottom: 0 },
                        backgroundColor: '#3E3E42',
                        dataField: 'Betrag',
						dateFormat: 'dd.MM.yyyy',
                        baseUnit: 'month',
						minValue: new Date(2014, 0, 1),
                        gridLines: { visible: true },
						snapToTicks: true,
						majorTicksInterval: { year: 1 },
						minorTicksInterval: { month: 1 },
                    }
                },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'line',
							valueAxis: {
								title: { text: 'Betrag' },
								labels: { 
									horizontalAlignment: 'right',
									formatSettings: { 
										sufix: ' €',
										decimalPlaces: 0, 
										decimalSeparator: ',', 
										thousandsSeparator: '.', 
									},
								}
							},
							toolTipFormatSettings: { 
								sufix: ' €',
								decimalPlaces: 0, 
								decimalSeparator: ',', 
								thousandsSeparator: '.', 
								dateFormat: 'dd.MM.yyyy',
								negativeWithBrackets: false 
							},
							series: [
								{ dataField: "Betrag", displayText: "Betrag", lineWidth: 2},
								{ dataField: "Ziel", displayText: "Ziel", lineWidth: 2}
							]
                        }
                    ]
            };
            $('#jqxChart').jqxChart(settings).
                on('rangeSelectionChanging', function (event) {
                    var args = event.args;
                    args.instance.description = args.minValue.getFullYear() + " - " + args.maxValue.getFullYear();
			});
             
			
        });
    </script>
</head>
<body class="default" style='background: #222222'>
<div class="jqxSeite">
	<div id="jqxMenu">
		<?php include("navigation.html"); ?>
	</div>
	<div id="jqxGrid">
	</div>
	<div id="jqxChart">
	</div>
</div>
	<div id="jqxMessage">
		<div id="jqxMessageContent">
		</div>	
	</div>
</body>
</html>

October 21, 2015 at 6:19 pm in reply to: Get chart data from grid record Get chart data from grid record #77201

elbnacht

Participant

Hello Vladimir,

I tried it with the following code:

var sourceChart = {
	localdata: dataAdapter.records,
	datatype: "array",
	datafields: [
	{ name: 'Datum', type: 'date'},
	{ name: 'Betrag', type: 'float' },
	{ name: 'Ziel', type: 'float' }
	],
};

This does not work. I checked the object in Firebug (Mozilla). The data are available.
It seems, that the array retrieved from the grid is not compatible to the chart. I do not know, what the required array structure should be.
Have you any idea?

Jens

October 19, 2015 at 5:42 pm in reply to: Get chart data from grid record Get chart data from grid record #77091

elbnacht

Participant

Just one additional comment to 1)

I get a funny behavior: It adds correctly the row, but shows in cell 1 the number of the row added. If I click the update button, then the row is displayed correctly. I added $("#jqxGrid").jqxGrid( 'refreshdata' ); with no effect.

October 19, 2015 at 5:29 pm in reply to: Get chart data from grid record Get chart data from grid record #77090

elbnacht

Participant

Hello Vladimir,

thanks for 1).

Regarding 2)
Thats actually not, what I want. I adapted the demo a little bit in order to get all values from json. This are stored at records.
The grid only shows the actual ones displayed, still all values at records.
Therefor I want to use all values in records for drawing the chart. I just don’t get the values from records to the source of jqxChart.
I think it is simple, just defining a local data source, something like an array from the records array. I just don’t get it.

Jens

October 11, 2015 at 5:02 pm in reply to: Grid does not render new data Grid does not render new data #76674

elbnacht

Participant

Hello Vladimir,

yes, I want to use the grid data and populate the chart. If I change grid data, than the chart should be updated to.
A similar function is shown in the demo

I just wonder whether there is a more elegant solution rather than accessing the same data with two source objects.

Jens

October 8, 2015 at 8:19 pm in reply to: Grid does not render new data Grid does not render new data #76587

elbnacht

Participant

Thank you, that works perfectly.

One question in addition:
I want to have grid and chart at one site (grid left, chart right).
It seems, that I can’t access the same source from grid and chart.
How can I solve this?

Jens

October 7, 2015 at 5:00 pm in reply to: Grid does not render new data Grid does not render new data #76541

elbnacht

Participant

Thanks for quick replay.
I added the commits as in the example – no change of behavior.
I forgot to mention, that the refresh of data works for add / delete row or changing cells.
It does not work while changing the value of targetValue (“targetValue.val();”). If I enter a new value, the server gives the changed values back, but the grid does not show the new values.
And it does not work anymore going to the next pages.

Any other idea?

Jens

July 19, 2015 at 4:12 pm in reply to: snapToTicks also at Chart rangeSelector snapToTicks also at Chart rangeSelector #73918

elbnacht

Participant

b.t.w. it would be good to have a documentation of the “rangeSelector” functions of the x-axis chart section, since it seems, that some functions are not in compared with the general rangeSelector functions.

July 14, 2015 at 5:17 pm in reply to: chart colorFunction is not working chart colorFunction is not working #73710

elbnacht

Participant

I found the problem. It is again a problem, I described last year (Rendering Problem).

The entry “minValue: new Date(today.setDate(today.getDay() – 365)),” limits the number of data shown in the chart.
The database delivers all data.
If I take the line out, than the rendering works fine.
If I leave the line in and take the colorFunction section out, than it works (without coloring).

Any idea?

July 13, 2015 at 6:22 pm in reply to: chart colorFunction is not working chart colorFunction is not working #73680

elbnacht

Participant

In that case tooltip would show me the lines.
If I take

colorFunction: function (dataValue, itemIndex, serie, group) {
		return (dataValue < 1) ? '#FF0000' : '#00FF00';
}

away, than everything is working.
The same failure exist some versions earlier …

July 10, 2015 at 5:33 pm in reply to: chart colorFunction is not working chart colorFunction is not working #73620

elbnacht

Participant

Sorry, forgot the code closings:


<!DOCTYPE html>
<html lang="de">
<head>
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.classic.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.metrodark.css" type="text/css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="jquery-validation/dist/jquery.validate.js"></script>
	<script type="text/javascript" src="jquery-validation/src/localization/messages_de.js"></script>
	<script type="text/javascript" src="jquery-validation/src/localization/methods_de.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.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/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcheckbox.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/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.pager.js"></script>	
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxnumberinput.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" src="jqwidgets/jqwidgets/jqxnotification.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxchart.rangeselector.js"></script>
	<style>
		.jqx-notification-container { z-index:99999; }

        .jqx-chart-axis-text, .jqx-chart-label-text, .jqx-chart-legend-text, .jqx-chart-axis-description, .jqx-chart-title-text, .jqx-chart-title-description
        {
            fill: #ffffff;
            color: #ffffff;
        }

		html, body {
			height: 100%;
		}
		#jqxSeite {
			display: block;
		}
		#jqxMenu {
			width: 120px;
			height:490px;
			float: left;
		}
		#jqxGrid {
			float: left;
			height:490px;
			margin-left: 2px;
		}
		#jqxChart {
			width:850px; 
			height:490px;
			float: left;
			margin-left: 1px;
		}
		#jqxChartSelector {
			width:850px; 
			height:102px;
			float: left;
			margin-left: 1px;
		}
	</style>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = 'metrodark';

			var getLocalization = function () {
				var localizationobj = {};
				localizationobj.percentSymbol = " %";
				localizationobj.currencySymbol = " €";
				localizationobj.currencySymbolPosition = "after";
				localizationobj.decimalSeparator = ",";
				localizationobj.thousandsSeparator = ".";
				patterns: {d: "d.M.yyyy"}
				return localizationobj;
			}

			var sourceChart =
               {
                   datatype: "json",
                   datafields: [
                        { name: 'Datum', type: 'date' },
                        { name: 'tsiWert', type: 'float' }
                    ],
                   url: 'tsi_werte.php'
               };

			var dataAdapterChart = new $.jqx.dataAdapter(
                	sourceChart, { 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 today = new Date();
			            
            // prepare jqxChart settings
            var settings = {
				title: "TSI-Werte",
                description: "(...)",
				backgroundColor: '#3E3E42',
                enableAnimations: true,
                animationDuration: 1500,
                enableCrosshairs: true,
                padding: { left: 5, top: 5, right: 30, bottom: 5 },
                titlePadding: { left: 30, top: 5, right: 0, bottom: 10 },
                source: dataAdapterChart,
                xAxis:
                {
                    dataField: 'Datum',
					type: 'date',
					dateFormat: 'dd.MM.yyyy',
					//minValue: new Date(2014, 1, 1),
					//maxValue: new Date(2015, 6, 1),
					minValue: new Date(today.setDate(today.getDay() - 365)),
                    //baseUnit: 'day',
					//textRotationAngle: -45,
					//unitInterval: 30,
					//gridLines: { step: 300 },
					tickMarks: { step: 10 },
					labels: { step: 1 },
					gridLines: {visible: true},
                    rangeSelector: {
                        renderTo: $('#jqxChartSelector'),
						size: 80,
						padding: { left: 80, right: 10, top: 10, bottom: 0 },
                        backgroundColor: '#3E3E42',
                        dataField: 'tsiWert',
						dateFormat: 'dd.MM.yyyy',
                        baseUnit: 'month',
                        showGridLines: false,
                    }
                },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'line',
							valueAxis: {
								title: { text: 'TSI-Werte' },
								labels: { 
									horizontalAlignment: 'right',
									formatSettings: { 
										decimalPlaces: 2, 
										decimalSeparator: ',', 
										thousandsSeparator: '.', 
									},
								}
							},
							toolTipFormatSettings: { 
								dateFormat: 'dd.MM.yyyy',
								decimalPlaces: 3, 
								decimalSeparator: ',', 
								thousandsSeparator: '.', 
								negativeWithBrackets: false 
							},
							series: [ { 
								dataField: "tsiWert", 
								displayText: "TSI-Werte", 
								lineWidth: 2,
								colorFunction: function (dataValue, itemIndex, serie, group) {
									return (dataValue < 1) ? '#FF0000' : '#00FF00';
								}
								
							} ]
                        }
                    ]
            };
            $('#jqxChart').jqxChart(settings).
                on('rangeSelectionChanging', function (event) {
                    var args = event.args;
                    args.instance.description = args.minValue.getFullYear() + " - " + args.maxValue.getFullYear();
                });
        });
    </script>
</head>
<body class="default" style='background: #222222'>
<div class="jqxSeite">
	<div>
		<div id="jqxChart">
		</div>
		<div id="jqxChartSelector">
		</div>
	</div>
</div>
	<div id="jqxMessage">
		<div id="jqxMessageContent">
		</div>	
	</div>
</body>
</html>

Author

Posts

Viewing 15 posts - 1 through 15 (of 22 total)

1 2 →