jQWidgets Forums

This topic contains 8 replies, has 2 voices, and was last updated by Vladimir 9 years, 6 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Get chart data from grid record Posts

October 18, 2015 at 4:49 pm Get chart data from grid record #77039

Participant

Following my code:


<!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 chartData = [];

			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, 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, {});
					});
					// 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: dataAdapter,
				datatype: "array",
				datafields: [
					{ name: 'Datum', type: 'date'},
					{ name: 'Betrag', type: 'float' },
					{ name: 'Ziel', type: 'float' }
				],
			};
			//console.info(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: sourceChart,
                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>

have I two questions:

1) I get adding a row always the error “TypeError: commit is not a function”. Any idea?

2) I want to populate the chart data source with the local data of the grid’s records array. I defined a global variable “var chartData = []”. Then I tried just to copy chartData = records. This did not work. I have tried several other solutions, but nothing worked. Have you any proposal?

Thanks Jens

October 19, 2015 at 6:10 am Get chart data from grid record #77058

Vladimir

Participant

Hello Jens,

1) This is easy. The commit function is the 4th parameter, not the third. The correct function declaration should be:
addrow: function (rowid, rowdata, position, commit) {
2) Depending on when you want to update the chart data, you could try something like this:

function updateChart() {
    var gridData = $("#jqxGrid").jqxGrid('getRows'); 
    // you may need to modify the data that the grid returns, I haven't tried it.
    chartData = gridData;
    $('#jqxChart').jqxChart('update');
}
$("#jqxGrid").on('cellvaluechanged', updateChart);

This will bind to value change event of grid cells, though this only fires when the cell is edited from the grid, it will not fire if you edit it programatically. But then again if you do that, you can call the updateChart function manually.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

October 19, 2015 at 5:29 pm 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 19, 2015 at 5:42 pm 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 20, 2015 at 7:02 am Get chart data from grid record #77107

Vladimir

Participant

Hello Jens,

1) Apart from the correct input variables, you are not sending any field data to the server, that’s probably why you get an ID response because you get an empty row (unless you have fixed it after posting), whereas in the update function you do send information. You can check the PHP CRUD documentation.
2) You can access the dataAdapter records with dataAdapter.records

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

October 21, 2015 at 6:19 pm 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 22, 2015 at 7:34 am Get chart data from grid record #77217

Vladimir

Participant

Hello Jens,

You should also create a charDataAdapter and use it as the source.

Here is the modified version of your chart initialization code:

var chartDataAdapter = new $.jqx.dataAdapter(sourceChart);

            //console.info(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}
                                ]
                            }
                        ]
            };

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

October 22, 2015 at 8:14 pm 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 29, 2015 at 9:06 am Get chart data from grid record #77491

Vladimir

Participant

Hello Jens,

I am sorry for the late reply.

If you haven’t figured it out already. You can place the entire chart logic inside the onLoadComplete() method of the grid’s dataAdapter, and this should solve your synchronization issue. You may still need to keep the rangefinder event handler outside the function, as to prevent duplicate handler initialzations.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.