JSON data vs. series definition

[mimParticipant]

Hello,
I am facing the challenge to generate a multiline chart via jqxchart based upon the following set of data (example):

[
{“Sensor”:”gas”,”Date”:”2017-08-01″,”Counter”:”12″},{“Sensor”:”current”,”Date”:”2017-08-05″,”Counter”:”12″},
{“Sensor”:”current”,”Date”:”2017-08-05″,”Counter”:”30″},{“Sensor”:”gas”,”Date”:”2017-08-01″,”Counter”:”12″},
{“Sensor”:”water”,”Date”:”2017-08-05″,”Counter”:”12″},{“Sensor”:”water”,”Date”:”2017-08-05″,”Counter”:”30″}
]

Each line shall show up the Counter value for the Sensor in question above the Date value.

The data itself is extracted from a single database with dedicated tables for each sensor.
The referenced data3.php looks like:

<?php
        #Include the connect.php file
        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";
        }

        $databases = array("gas","water","ccurent");        

        $query = "SELECT * FROM  <code>test</code> ORDER BY Date";
        $result = mysql_query($query) or die("SQL Error 1: " . mysql_error());

        // get data and store in a json array
   
      foreach ($databases as $db ) {
         $query = "SELECT * FROM  <code>test</code> ORDER BY Date";
         $result = mysql_query($query) or die("SQL Error 1: " . mysql_error());            
        while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
                $a[] = array(
                        'Sensor' => $db,
                        'Date' => $row['Date'],
                        'Counter' => $row['Counter'],
                  );
        }
      }

        echo json_encode($a);
?>

Now, I am desperately trying to fit the data into the settings section:

                       
// prepare jqxChart settings
                        var settings = {
                            title: "Sensor Counts by Date",
                            padding: { left: 5, top: 5, right: 50, bottom: 5 },
                            titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                            source: dataAdapter,
                            xAxis:
                                {
                                    dataField: 'Date',
                                    minValue: new Date(2017, 7, 1),
                                    maxValue: new Date(2017, 11, 31),
                                    type: 'date',
                                    baseUnit: 'day',
                                    labels:
                                    {
                                     formatFunction: function (value) {
                                      return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.g$
                                     }
                                    },
                               
                            colorScheme: 'scheme01',
                            seriesGroups:
                                [
                                        {
                                            type: 'line',
                                            valueAxis:
                                                {
                                                    displayValueAxis: true,
                                                    description: 'Counter',
                                                    axisSize: 'auto',
                                                    tickMarksColor: '#888888',
                                                    unitInterval: 20,
                                                    minValue: 0,
                                                    maxValue: 100
                                                },
                                            series: [
                                                  { dataField: 'Counter', showLegend: false }
                                            ]
                                        }
                                ]
});

Any ideas to get it running? Maybe changing the JSON data for input?
Thx for you help in advance

Kr,
Michael

[Peter StoevKeymaster]

Hi Michael,

This code will generate probably just a single line chart. I think that something like this: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_line_series_array.htm?light, could help more.

Best Regards,
Peter Stoev

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

[mimParticipant]

Hello Peter,
well, thinking about that approach left me with the question:

How to setup up such data structure outlined in your example when I would retrieve data according to the code example below?

As your can see I left one datafield with questions marks as it it according to my data example ‘flexible’, but equivalent to the
names KEITH, GEORGE,…

 <script type="text/javascript">
                $(document).ready(function () {
                        var source =
                        {
                                datatype: "json",
                                datafields: [
                                { name: 'Date', type: 'date'},
                                { name: '??????'}
                                ],
                                url: 'data4.php'
                        };

and data4.php provides data that way:

[
{”gas”:”12″,”Date”:”2017-08-01″},{“gas”:”12″,”Date”:”2017-08-05″},
{”current”:”30″,”Date”:”2017-08-05″},{”gas”:14,”Date”:”2017-08-01″},
{”water”:”12″,”Date”:”2017-08-05″},{”water”:”30″,”Date”:”2017-08-05″}
]

Kr,
Michael

[mimParticipant]

resolved by just adding any potential name at datafiels setting…

[Author]

Posts