Update Chart and Ajax request after DropDown selection

[SchmakusParticipant]

Hi,

I want to update my chart after a dropdown selection.
I use remote data.
At the same time via Ajax, the variable “Date From” and “DateTo” (dropdown selection) are sent.

The first call of the chart, all data should be fetched from MySQL.
Only with a drop down selection to pass the variable.

Here is my current code:

function displayDurchlaufzeit() {
	var source =
	{
		 datatype: "json",
		 datafields: [
			 { name: 'Durchlaufzeit', },
			 { name: 'Ort'}
			 
		],
		url: 'script/charts.php?select=3'
	};

   var dataAdapter = new $.jqx.dataAdapter(source,
	{
		autoBind: true,
		async: false,
		downloadComplete: function () { },
		loadComplete: function () { },
		loadError: function () { }
	});
	 var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis)
	  {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Ort: </b>' + categoryValue +
				'<br /><br /><b>Durchlaufzeit: </b><ul><li>' + Math.floor(dataItem['Durchlaufzeit'])  + ' Tage </li>' +
				'<li>' + Math.round(((dataItem['Durchlaufzeit'] -  Math.floor(dataItem['Durchlaufzeit'])) * 24) / 1) + ' Stunden</li></ul></DIV>';
      };

 // prepare jqxChart settings
	var settings = {
		showBorderLine: false,
		enableAnimations: true,
		title: "Durchschnittliche Durchlaufzeit pro Ort (" + dataAdapter.records[0].Ort + ")",
		description: "Zeit von Eingang Team A bis Eingang Team B",
		showLegend: false,
		padding: { left: 5, top: 5, right: 5, bottom: 5 },
		titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
		source: dataAdapter,
		
		categoryAxis:
			{
				text: 'Ort',
				textRotationAngle: 45,
				dataField: 'Ort',
				showTickMarks: false,
				tickMarksInterval: 1,
				tickMarksColor: '#888888',
				unitInterval: 1,
				showGridLines: true,
				gridLinesInterval: 1,
				gridLinesColor: '#888888',
				axisSize: 'auto'
			},
		colorScheme: 'scheme03',
		seriesGroups:
			[
				{
					type: 'column',
					toolTipFormatFunction: toolTipCustomFormatFn,
					columnsGapPercent: 30,
                    seriesGapPercent: 0,
					valueAxis:
					{
						visible: true,
						displayValueAxis: true,
						description: 'Zeit in [Tage]',
						//descriptionClass: 'css-class-name',
						axisSize: 'auto',
						tickMarksColor: '#888888',
						unitInterval: 2,
						minValue: 0,
						maxValue: 'auto'
					},
					
					series: [
							{ dataField: 'Durchlaufzeit',
							  displayText: 'Zeit',
							  labels:
                                    {
                                        visible: true,
										verticalAlignment: 'top',
										offset: { x: 0, y: 0 }
                                    }
							}
					  ]
				}
			]
	};
	$('#Durchlaufzeit').jqxChart(settings);
	//******* Datumswahl für gefilterte Chart-Ansicht
	$("#DateSelect").jqxDateTimeInput({ width: 250, height: 25,  selectionMode: 'range' , culture: 'de-DE'});
		$("#DateSelect").on('change', function (event) {
			var selection = $("#DateSelect").jqxDateTimeInput('getRange');
			if (selection.from != null) {
			
				var DateFrom = selection.from.toString('yyyy-MM-dd');
				var DateTo = selection.to.toString('yyyy-MM-dd');
			}
		chart.update();
		});
		
};

[Peter StoevKeymaster]

Hi Schmakus,

I think that you will have to implement the dataAdapter’s formatData callback function if you want to add custom Data variables to your Ajax calls. In the current code your DateFrom and DateTo variables are not sent but if you implement formatData you can send them to your Server code.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[SchmakusParticipant]

Hi,
can you give me an example of this? Thanks!

	$('#Durchlaufzeit').jqxChart(settings);
	//******* Get Charts Instance
	var chart = $('#Durchlaufzeit').jqxChart('getInstance');
	//******* Datumswahl für gefilterte Chart-Ansicht
	$("#DateSelect").jqxDateTimeInput({ width: 250, height: 25,  selectionMode: 'range' , culture: 'de-DE'});
		$("#DateSelect").on('change', function (event) {
			var selection = $("#DateSelect").jqxDateTimeInput('getRange');
			if (selection.from != null) {
			
				var DateFrom = selection.from.toString('yyyy-MM-dd');
				var DateTo = selection.to.toString('yyyy-MM-dd');
			}
			var dataSource =
				{
				 datatype: "json",
				 datafields: [
					 { name: 'Durchlaufzeit', },
					 { name: 'Ort'}
					 
				],
				data: {'DateFrom' : DateFrom, 'DateTo' : DateTo},
				url: 'script/charts.php?select=3'
				};
			chart.source = dataSource;	
			chart.update();
		});

[Peter StoevKeymaster]

Hi Schmakus,

You can learn how to use dataAdapter on this page: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm

I also suggest you to read how to bind jqxChart to a data source.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[SchmakusParticipant]

Ok, it works! I’m a total beginner……

Here is my Code (End of the chart script):

	$('#Durchlaufzeit').jqxChart(settings);
	//******* Get Charts Instance
	var chart = $('#Durchlaufzeit').jqxChart('getInstance');
	//******* Datumswahl für gefilterte Chart-Ansicht
	$("#DateSelect").jqxDateTimeInput({ width: 250, height: 25,  selectionMode: 'range' , culture: 'de-DE'});
		$("#DateSelect").on('change', function (event) {
			var selection = $("#DateSelect").jqxDateTimeInput('getRange');
			if (selection.from != null) {
			
				var DateFrom = selection.from.toString('yyyy-MM-dd');
				var DateTo = selection.to.toString('yyyy-MM-dd');
			}
		
		var dataAdapter = new $.jqx.dataAdapter(source,
		{
			formatData: function (data) {
						data.DateFrom = DateFrom;
						data.DateTo = DateTo;
						return data;
			},
			autoBind: true,
			async: false,
			downloadComplete: function () { },
			loadComplete: function () { },
			loadError: function () { }
		});
    
		chart.dataAdapter = dataAdapter;	
		chart.update();
		});

[Author]

Posts