jQWidgets Forums

Tagged: blank, chart, jqxChart, json, page

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 3 months ago.

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

Author

Chart remains blank, JSON data is ok Posts

December 10, 2014 at 8:03 pm Chart remains blank, JSON data is ok #64054

LeonB

Participant

Hello Everyone,

I’ve been struggling to get a chart working for me. I have a simple database which holds datetime stamps and a temperature value. i’ve followed the page http://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-chart-binding.htm to get it working, but without any result.

After looking on the forums, i came across this post which had the same issue. http://www.jqwidgets.com/community/topic/json-data-not-processed-chart-remains-blank/. However, after trying to implement his findings, i still get a blank page.

I echo’s the JSON value which are printed on the page. even validaten them using jsonlint.com and they state the json code is fine. Since i don’t get any errors i dont know where to start looking. Hope any of you can give me some pointers where to look.

Setup:
1 connect.php with DB info.
1 sample.php file with the following code:

<!DOCTYPE html>
<html lang="en">
<head>
<?php

	include('connect.php');
	#Connect to the database
	//connection String
	$connect = mysql_connect($hostname, $username, $password)
	or die('Could not connect: ' . mysql_error());
	//Select The database
	$bool = mysql_select_db($database, $connect);
	if ($bool === False){
	   print "can't find $database";
	}
	
	$query = "select Temp, DATE_FORMAT(datetime, '%Y-%m-%d') AS date from Tbl_Temp order by id desc LIMIT 10 , 100";
	$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());

	// get data and store in a json array
	while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
		$TempArray[] = array(
			'date' => $row['date'],
			'Temp' => $row['Temp'],
		  );
	}
	echo json_encode($TempArray);
	mysql_close($connect);
?>

    <link rel="stylesheet" href="../jquery/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../jquery/scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../jquery/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../jquery/jqwidgets/jqxchart.js"></script>
        <script type="text/javascript" src="../jquery/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript">
			$(document).ready(function () {
					 // prepare the data
								var theme = 'classic';
								var SensData = <?php echo json_encode($TempArray, JSON_PRETTY_PRINT) ?>;
							  
								var source =
								{
										datatype: "json",
										datafields: [
										  { name: 'date', type: 'date'},
										  { name: 'Temp'}
										],
										localdata: SensData
								};

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

							// prepare jqxChart settings
								var settings = {
									title: "Temperature",
									showLegend: true,
									padding: { left: 5, top: 5, right: 50, bottom: 5 },
									titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
									source: dataAdapter,
									categoryAxis:
									   {
											text: 'Category Axis',
											textRotationAngle: 0,
											dataField: 'date',
											type: 'date',
											
										  //  formatFunction: function (value) {
										  //      return $.jqx.dataFormat.formatdate(value, 'dd/MM/yyyy');
										  //  },
				 
											showTickMarks: true,
											tickMarksInterval: Math.round(dataAdapter.records.length / 6),
											tickMarksColor: '#888888',
											unitInterval: Math.round(dataAdapter.records.length / 6),
											showGridLines: true,
											gridLinesInterval: Math.round(dataAdapter.records.length / 6),
											gridLinesColor: '#888888',
											axisSize: 'auto'
										},
									colorScheme: 'scheme05',
									seriesGroups:
										[
												{
													type: 'line',
													valueAxis:
														{
															displayValueAxis: true,
															description: 'Temperature',
															axisSize: 'auto',
															tickMarksColor: '#888888',
															unitInterval: 20,
															minValue: 0,
															maxValue: 100
														 },
													series: [
													  { dataField: 'Temp', displayText: 'Temperature' }
													]
												}
										]
								};
								// setup the chart
								$('#jqxChart').jqxChart(settings);
						});
				</script>

</head>
<body class='default'>
      <div style="width:690px; height:400px" id="jqxChart"></div>
	  
</body>
</html>

The JSON text returned by the echo is looking like this:

[
{
“date”: “2014-12-09”,
“Temp”: “20”
},
{
“date”: “2014-12-09”,
“Temp”: “19.9”
},
{
“date”: “2014-12-09”,
“Temp”: “19.8”
}
]

December 11, 2014 at 7:22 am Chart remains blank, JSON data is ok #64082

Dimitar

Participant

Hello LeonB,

The data may be syntactically correct but it is not suitable to build a chart – it shows three values for a single data point (day). Here is a modified example (using jQWidgets version 3.6.0) with data for three days, which shows that the chart is correctly plotted:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var theme = 'classic';
            //            var SensData = <?php echo json_encode($TempArray, JSON_PRETTY_PRINT) ?>;

            var SensData = [{
                "date": "2014-12-08",
                "Temp": "20"
            }, {
                "date": "2014-12-09",
                "Temp": "19.9"
            }, {
                "date": "2014-12-10",
                "Temp": "19.8"
            }];

            var source = {
                datatype: "json",
                datafields: [{
                    name: 'date',
                    type: 'date',
                    format: 'YYYY-MM-dd'
                }, {
                    name: 'Temp',
                    type: 'number'
                }],
                localdata: SensData
            };

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

            // prepare jqxChart settings
            var settings = {
                title: "Temperature",
                showLegend: true,
                padding: {
                    left: 5,
                    top: 5,
                    right: 50,
                    bottom: 5
                },
                titlePadding: {
                    left: 90,
                    top: 0,
                    right: 0,
                    bottom: 10
                },
                source: dataAdapter,
                xAxis: {
                    text: 'Category Axis',
                    textRotationAngle: 0,
                    dataField: 'date',
                    type: 'date',
                    baseUnit: 'day',
                    //  formatFunction: function (value) {
                    //      return $.jqx.dataFormat.formatdate(value, 'dd/MM/yyyy');
                    //  },

                    showTickMarks: true,
                    tickMarksInterval: Math.round(dataAdapter.records.length / 6),
                    tickMarksColor: '#888888',
                    unitInterval: Math.round(dataAdapter.records.length / 6),
                    showGridLines: true,
                    gridLinesInterval: Math.round(dataAdapter.records.length / 6),
                    gridLinesColor: '#888888',
                    axisSize: 'auto'
                },
                colorScheme: 'scheme05',
                seriesGroups: [{
                    type: 'line',
                    valueAxis: {
                        displayValueAxis: true,
                        description: 'Temperature',
                        axisSize: 'auto',
                        tickMarksColor: '#888888',
                        unitInterval: 20,
                        minValue: 0,
                        maxValue: 100
                    },
                    series: [{
                        dataField: 'Temp',
                        displayText: 'Temperature'
                    }]
                }]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div style="width: 690px; height: 400px" id="jqxChart">
    </div>
</body>
</html>

Please also note the xAxis (the property that replaces categoryAxis) baseUnit setting.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.