Dynamic data from server

[pato.llagunoParticipant]

hi, i am trying to get some data loaded into a chart, i do get the first chart, but i want to be able to change the chart on a click button but i cant find the way to send to the server the new parameter. here is my coding. my button calls the function cargarDatos at the bottom of it.

var sourceChart;
var url;
var dataAdapterChart;
var id;

$(document).ready(function () {
	var source =
				{
					datatype: "json",
					datafields: [
						 { name: 'Id'},
						 { name: 'DateTime'},
						 { name: 'Planta'},
						 { name: 'Prueba'}
					],
					url: 'includes/getCorridas.php'
				};

				var dataAdapter = new $.jqx.dataAdapter(source,
				 {
					 autoBind: true,
					 async: false,
					 downloadComplete: function () { },
					 loadComplete: function () { },
					 loadError: function () { }
				 });

	$("#dataTable").jqxDataTable(
	{
		source: dataAdapter,
		height: 280,
		columns: [
			{ text: 'id', dataField: 'Id', width: 20 },
			{ text: 'Fecha', dataField: 'DateTime', width: 180 },
			{ text: 'Planta', dataField: 'Planta', width: 180 },
			{ text: 'Prueba', dataField: 'Prueba', width: 180}
		]
	});
	id=72;
	url = 'includes/dataEscalonVel.php';
	sourceChart =
			{
				datatype: "json",
				type: "GET",
				data: {id:id},
				datafields: [
					 { name: 'Reloj', type: 'default'},
					 { name: 'entrada'},
					 { name: 'salida'}
				],
				url: url
			};

			dataAdapterChart = new $.jqx.dataAdapter(sourceChart,
			 {
				 autoBind: true,
				 async: false,
				 downloadComplete: function () { },
				 loadComplete: function () { },
				 loadError: function () { }
			 });

			// prepare jqxChart settings
			   var settings = {
				   title: "Prueba Escalon",
				   description: '',
				   enableAnimations: false,
				   showLegend: true,
				   padding: { left: 5, top: 5, right: 5, bottom: 5 },
				   titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
				   source: dataAdapterChart,
				   categoryAxis:
					   {
						   text: 'Category Axis',
						   textRotationAngle: 0,
						   dataField: 'Reloj',
						   showTickMarks: true,
						   showGridLines: true,
						   axisSize: 'auto'
					   },
				   colorScheme: 'scheme05',
				   seriesGroups:
					   [
						   {
							   type: 'line',
							   valueAxis:
							   {
								   displayValueAxis: true,
								   description: 'salida',
								   //descriptionClass: 'css-class-name',
								   axisSize: 'auto',
								   tickMarksColor: '#888888',
								   unitInterval: 20,
								   minValue: 0,
								   maxValue: 100
							   },
							   series: [
									   { dataField: 'salida', displayText: 'salida' },
									   {dataField: 'entrada', displayText: 'entrada' }
								 ]
						   }
					   ]
			   };
			   
		
			   
			   

		// setup the chart
		$('#chartContainer').jqxChart(settings);
});

function cargarDatos(){
			var selection = $("#dataTable").jqxDataTable('getSelection');	
			console.log(url);		
			sourceChart = {
				datatype: "json",
				type: "GET",
				data: {id:selection[0]['Id']},
				datafields: [
					 { name: 'Reloj', type: 'default'},
					 { name: 'entrada'},
					 { name: 'salida'}
				],
				url: url
			};
			dataAdapterChart.dataBind();
			$('#chartContainer').jqxChart('update');
		}

[HristoParticipant]

Hello pato.llaguno,

Thanks for using our product. The code seems correct.
Would you say that the console throws any errors.
If you would like look at the first example to ‘refresh data’ could be useful.
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-data-source.htm

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts