jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Author

Posts

August 6, 2017 at 11:32 am in reply to: multiple line chart json data multiple line chart json data #95337

Participant

My problem is that json is dynamic

[{“annee”:2013,”Nom”:”G”,”prix”:0},{“annee”:2013,,”Nom”:”E”,”prix”:0},{“annee”:2014,”Nom”:”G”,”prix”:0},{“annee”:2014,”Nom”:”E”,”prix”:0},{“annee”:2015,”Nom”:”G”,”prix”:0.088},{“annee”:2015,”Nom”:”E”,”prix_kwh”:0.16},{“annee”:2016,”Nom”:”G”,”prix”:0.1},{“annee”:2016,”Nom”:”E”,”prix”:0.18},{“annee”:2017,”Nom”:”G”,”prix”:0.09},{“annee”:2017,”Nom”:”E”,”prix”:0.22}]

[{“annee”:2013,”Nom”:”G”,”prix”:0},{“annee”:2013,,”Nom”:”T”,”prix”:0},{“annee”:2014,”Nom”:”G”,”prix”:0},{“annee”:2014,”Nom”:”T”,”prix”:0},{“annee”:2015,”Nom”:”G”,”prix”:0.088},{“annee”:2015,”Nom”:”T”,”prix_kwh”:0.16},{“annee”:2016,”Nom”:”G”,”prix”:0.1},{“annee”:2016,”Nom”:”T”,”prix”:0.18},{“annee”:2017,”Nom”:”G”,”prix”:0.09},{“annee”:2017,”Nom”:”T”,”prix”:0.22}]

Name is dynamic.

I would

Prix
I
I ^^^^^^^^
I^^^^ ^^^^^^^^^^^^^^^^^ Nom “E” or something else because Nom is dynamic
I
I^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Nom “T” or “G” or something else because Nom is dynamic
I
I
_______________________________YEAR

If can help you : YEAR is always fixed to YEAR, YEAR-1, YEAR-2, YEAR-3, YEAR-4 (I display always value on last 5 YEARS)

July 24, 2017 at 9:54 pm in reply to: multiple line chart json data multiple line chart json data #95096

Blomotom

Participant

Hi Heristo,
Thank you for your (long) help.
You show me the good way to cascading information. In fact Showcase demo section seems to match to my dream !
But i have not enough knowledge to transform your example for my project. Im sorry…
Do you have an example with only 1 choice and 1 chart like :

Select : “Nom”
and a chart update with price by year ?
From my json data.

Thank by advance.

July 21, 2017 at 7:06 pm in reply to: multiple line chart json data multiple line chart json data #95053

Blomotom

Participant

Hello Hristo, thanks again
Forget “user”, it’s not important. My problem is just that ‘E’ is in hard code and that could have more “letter” if i insert one in table;

In this code : case ‘E’: is in “hard code”. Is possible to have something like : “Row”:
example : if i change E to V in table, chart is updating.

var dataAdapter = new $.jqx.dataAdapter(source, {
beforeLoadComplete: function (records) {
for (var i = 0; i < records.length; i += 1) {
var item = records[i];
switch (item.Nom) {
case ‘E’:
item.prixE = item.prix;
break;
case ‘G’:
item.prixG = item.prix;
break;

default:
break;
}
}

return records;
}
});

Thanks in advance

July 21, 2017 at 6:55 pm in reply to: iframe alternative responsive design iframe alternative responsive design #95051

Blomotom

Participant

Hello,
I sorry but i m disappointed.
How do you do this ?

For me, when……

CODE1 :

<head>
	<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
	<script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>	
	<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>	
	<script type="text/javascript">
		$(document).ready(function () {
			// chart script
			// setup the chart
			$('#jqxChart').jqxChart(settings);
		});
	</script>
</head>

and…..
CODE2:

<body class='default'>
      <div id="jqxChart" style="width:100%; align:center; height:100%;"></div>
</body>

……are on them page it’s work.
But when i have an other html page who have two charts i can t have two same head (CODE1) !! I propably a noob sorry.

For me following code are ok but how can i call the ‘head’ (script) for the differents chart ????

<body class='default'>
<div id="jqxChart" style="width:100%; align:center; height:100%;"></div>
<div id="jqxChart1" style="width:100%; align:center; height:100%;"></div>
<div id="jqxChart2" style="width:100%; align:center; height:100%;"></div>
<div id="jqxChart3" style="width:100%; align:center; height:100%;"></div>
<div id="jqxChart4" style="width:100%; align:center; height:100%;"></div>
</body>

July 14, 2017 at 1:46 pm in reply to: iframe alternative responsive design iframe alternative responsive design #94924

Blomotom

Participant

I have do this (but dont work) :
MY PAGE.HTML

<head>
	<!-- jqxwidget ================================================== -->
	<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
	<script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
	<script type="text/javascript" src="jqwidgets/jqxchart.js"></script>	
	<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>	
	<!-- Chart1================================================== -->
	<script type="text/javascript" src="js/chart1.js"></script>	
</head>

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

July 14, 2017 at 12:50 pm in reply to: multiple line chart json data multiple line chart json data #94923

Blomotom

Participant

Hello, you have help me about my problem. Now it work. Thanks.

In fact, in my data i could have more than 2 Name (Nom). I can have G, E, T, U etc.. and this depend who user see the chart.
Can i have a chart who have E, G but if other user see chart, E, G, T etc…

(Nom) is a table who contain letter E, G, T etc… and letter can change if i edit table.

In this code : case 'E': is in “hard code”. Is possible to have something like : “Row”:
example : if i change E to V in table, chart is updating.

 var dataAdapter = new $.jqx.dataAdapter(source, {
        beforeLoadComplete: function (records) {
            for (var i = 0; i < records.length; i += 1) {
                var item = records[i];
                switch (item.Nom) {
                    case 'E':
                        item.prixE = item.prix;
                        break;
                    case 'G':
                        item.prixG = item.prix;
                        break;

                    default:
                        break;
                }
            }

            return records;
        }
    });

Thanks in advance

July 13, 2017 at 10:52 pm in reply to: Msql > PDO Msql > PDO #94913

Blomotom

Participant

Thank you Stanislav, i would share working code for other users :

connect.php

<?php
$hostname = "";
$database = "";
$username = "";
$password = "";
?>

data.php

#Connect to the database
	$connect = new PDO("mysql:host=$hostname;dbname=$database", $username, $password);
	$connect->exec("SET CHARACTER SET utf8");
	$connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
#Query
        $query="Select CC_bar.* from CC_bar";
        $sth = $connect->prepare($query);
	$sth->execute();
	$results=$sth->fetchAll(PDO::FETCH_ASSOC);
#Loop
	foreach ($results as $Z8row) {
        $orders[] = array(
			'CC_bar1' => $Z8row['CC_bar1'],
			'CC_bar3' => $Z8row['CC_bar3'],
			'CC_bar4' => $Z8row['CC_bar4'],
			'CC_bar5' => $Z8row['CC_bar5'],
		  );
	}
#echo json data
	echo json_encode($orders);

July 12, 2017 at 12:29 am in reply to: multiple line chart json data multiple line chart json data #94857

Blomotom

Participant

Problem solved! Thank you very much for all. For my second question it was a stupid error
Thank you again!

July 11, 2017 at 6:35 pm in reply to: multiple line chart json data multiple line chart json data #94851

Blomotom

Participant

My data.php result :

[{“annee”:2013,”Nom”:”G”,”prix”:0},{“annee”:2013,”Nom”:”E”,”prix”:0},{“annee”:2014,”Nom”:”G”,”prix”:0},{“annee”:2014,”Nom”:”E”,”prix”:0},{“annee”:2015,”Nom”:”G”,”prix”:0.0700004820488},{“annee”:2015,”Nom”:”E”,”prix”:0.16},{“annee”:2016,”Nom”:”G”,”prix”:0.0700029724339},{“annee”:2016,”Nom”:”E”,”prix”:0.16},{“annee”:2017,”Nom”:”G”,”prix”:0.0700029724339},{“annee”:2017,”Nom”:”E”,”prix”:0.16}]

July 11, 2017 at 6:07 pm in reply to: multiple line chart json data multiple line chart json data #94848

Blomotom

Participant

Hello,
Thank you very much for your help.
I have a problem when i call json data from url, value dont appear on chart.
I explain :
I use your code who are : https://www.jseditor.io/?key=jqxchart-with-two-lines-series
I have only change this :

//localdata: data
url: 'data2.php',

My probleme is that chart don’t work from URL, localdata are ok. For information localdata and urldata are the same. See my last version of the code but dont work.


$(document).ready(function () {
    // prepare chart data as an array
    var data = [
   {"annee":2013,"Nom":"G","prix":0},
   {"annee":2013,"Nom":"E","prix":0},
   {"annee":2014,"Nom":"G","prix":0},
   {"annee":2014,"Nom":"E","prix":0},
   {"annee":2015,"Nom":"G","prix":0.0700004820488},
   {"annee":2015,"Nom":"E","prix":0.16},
   {"annee":2016,"Nom":"G","prix":0.0700029724339},
   {"annee":2016,"Nom":"E","prix":0.16},
   {"annee":2017,"Nom":"G","prix":0.0700029724339},
   {"annee":2017,"Nom":"E","prix":0.16}]
    ;
    var source = {
        datatype: "json",
        datafields: [
            { name: 'annee', type: 'date' },
            { name: 'prix' },
            { name: 'Nom' },
            { name: 'prixG' },
            { name: 'prixE' }
        ],
        //localdata: data 
        url: 'data.php'
    };
    var dataAdapter = new $.jqx.dataAdapter(source, {
        beforeLoadComplete: function (records) {
            for (var i = 0; i < records.length; i += 1) {
                var item = records[i];
                switch (item.Nom) {
                    case 'E':
                        item.prixE = item.prix;
                        break;
                    case 'G':
                        item.prixG = item.prix;
                        break;

                    default:
                        break;
                }
            }

            return records;
        }
    });

    // prepare jqxChart settings
    var settings = {
        title: "Orders by Date",
        //enableAnimations: true,
        showLegend: true,
        source: dataAdapter,
        colorScheme: 'scheme05',
        xAxis: {
            dataField: 'annee',
            valuesOnTicks: false,
        },
        valueAxis: {
            logarithmicScale: true,
            logarithmicScaleBase: 2,
            maxValue: 5
        },
        seriesGroups:
        [
            {
                type: 'line',                        
                series:
                [
                    {
                        emptyPointsDisplay: 'connect',
                        dataField: 'prixG',
                        symbolType: 'square',
                        labels:
                        {
                            visible: true,
                            backgroundColor: '#FEFEFE',
                            backgroundOpacity: 0.2,
                            borderColor: '#7FC4EF',
                            borderOpacity: 0.7,
                            padding: { left: 5, right: 5, top: 0, bottom: 0 }
                        }
                    }
                ]
            }, 
            {
                type: 'line',
                series:
                [
                    {
                        emptyPointsDisplay: 'connect',
                        dataField: 'prixE',
                        symbolType: 'square',
                        labels:
                        {
                            visible: true,
                            backgroundColor: '#FEFEFE',
                            backgroundOpacity: 0.2,
                            borderColor: '#7FC4EF',
                            borderOpacity: 0.7,
                            padding: { left: 5, right: 5, top: 0, bottom: 0 }
                        }
                    }
                ]
            }
        ]
    };

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

});

July 10, 2017 at 7:53 pm in reply to: multiple line chart json data multiple line chart json data #94819

Blomotom

Participant

I think i must have :

YEAR / Prix 1 / Prix 2

My Json data is :

YEAR / E / prix
YEAR / G / prix

But how can i do it ?

July 10, 2017 at 6:42 pm in reply to: multiple line chart json data multiple line chart json data #94816

Blomotom

Participant

I use this code

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this example is demonstrated how to populate the jqxChart with data from MySQL Database</title> 
    <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/jqxchart.js"></script>	
	<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>	
	<script type="text/javascript">
		$(document).ready(function () {
			// prepare the data
			var theme = 'classic';
	  
			var source =
			{
				datatype: "json",
				datafields: [
				{ name: 'annee'},
				{ name: 'prix'},
				],
				url: 'chartdata.php'
			};		
			
			var dataAdapter = new $.jqx.dataAdapter(source,
			{
				autoBind: true,
				async: false,
				downloadComplete: function () { },
				loadComplete: function () { },
				loadError: function () { }
			});
			
		    // prepare jqxChart settings
			var settings = {
			    title: "Orders by Date",
			    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: 'annee',
				    showTickMarks: true
				},
			    colorScheme: 'scheme05',
			    seriesGroups:
				[
					{
					    type: 'line',
					    valueAxis:
						{
						    displayValueAxis: true,
						    description: 'Quantity',
						    axisSize: 'auto',
						    tickMarksColor: '#888888',
						    unitInterval: 0,1
						    minValue: 0
						    maxValue: 5
						},
					    series: [
                            { dataField: 'prix', displayText: 'prix' }
					    ]
					}
				]
			};
			// setup the chart
			$('#jqxChart').jqxChart(settings);
		});
	</script>
</head>
<body class='default'>
      <div style="width:690px; height:400px" id="jqxChart"></div>
</body>
</html>

I think i have not good json format ? (sorry for english, i m french)

[URL=https://www.hostingpics.net/viewer.php?id=515578chart.jpg][IMG]https://img4.hostingpics.net/thumbs/mini_515578chart.jpg[/IMG][/URL]

http://hpics.li/0b001a3

July 5, 2017 at 12:09 pm in reply to: Unable to sort please help Unable to sort please help #94709

Blomotom

Participant

solved, please delete this post

February 23, 2016 at 1:11 pm in reply to: Gauge data from json (PHP) Gauge data from json (PHP) #81720

Blomotom

Participant

Ok sorry, i learn by exemple. I m not a programmer.
Work well with this code :

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>EEEEEEEEE</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../jquery-1.10.2.min.js"></script>
	 <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/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgauge.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/jqxbuttons.js"></script>
	<style type="text/css">
   </style>
	<script type="text/javascript">

    
          $(document).ready(function () {
              var smcvalue;
              var source =
              {
                 datatype: "json",
                 datafields: [
                    { name: 'Value'}
                ],
                url: 'data.php'
              };    
              
               var dataAdapter = new $.jqx.dataAdapter(source,{
                loadComplete: function (records) {
                        $('#gaugeContainer').jqxGauge('value', records[0].Value);
                }
               });
                 
               $('#gaugeContainer').jqxGauge({
                          ranges: [{ startValue: 0, endValue: 50000000, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 5, startWidth: 1 },
                                   { startValue: 50000000, endValue: 100000000, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 10, startWidth: 5 },
                                   { startValue: 100000000, endValue: 200000000, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 16, startWidth: 13 }],
                          ticksMinor: { interval: 50000000, size: '5%' },
                          ticksMajor: { interval: 10000000, size: '9%' },
                  labels: { interval: 10000000 },
                          value: 0,
                  max: 200000000,
                  width: 400,
                  height: 400,
                  caption: { value: 'Chiffre d affaire', position: 'bottom', offset: [0,0], visible: true },
                  colorScheme: 'scheme05',
                          animationDuration: 1200
                      });
                 
                dataAdapter.dataBind();
                $('#gaugeContainer').on('valueChanging', function (e) {
                       $('#gaugeValue').text(Math.round(e.args.value) + ' Euros');
                });
          });
    </script>
</head>
<body style="background:white;">
    <div id="demoWidget" style="position: relative;">
	    <div style="float: left;" id="gaugeContainer"></div>
<div id="gaugeValue" style="position: absolute; top: 156px; left: 62px; font-family: Sans-Serif; color: #333; text-align: center; font-size: 11px; width: 70px;">8930 au</div>    </div>
</body>
</html>

Can i abuse ? Could you explain how to have Value bottom the caption ?

                caption: { value: 'Chiffre d affaire', position: 'bottom', offset: [0,0], visible: true },
                  colorScheme: 'scheme05',
                          animationDuration: 1200
                      });
                 
                dataAdapter.dataBind();
                $('#gaugeContainer').on('valueChanging', function (e) {
                       $('#gaugeValue').text(Math.round(e.args.value) + ' Euros');  // HOW TO ALIGN BOTTON ???
                });
          });

See : http://da42.co.nf/vafsp/E00001TEST/index.php
Thanks

February 23, 2016 at 11:03 am in reply to: Gauge data from json (PHP) Gauge data from json (PHP) #81713

Blomotom

Participant

HEllo,
I m sorry, but same problem :

Code with fix 2 :

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>EEEEEEEEE</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
	<style type="text/css">
   </style>
	<script type="text/javascript">

    
          $(document).ready(function () {
              var smcvalue;
              var source =
              {
                 datatype: "json",
                 datafields: [
                    { name: 'Value'}
                ],
                url: 'data.php'
              };    
              
               var dataAdapter = new $.jqx.dataAdapter(source,{
                loadComplete: function (records) {
                        $('#gaugeContainer').jqxGauge('value', records[0].Value);
                }
               });
                 
               $('#gaugeContainer').jqxGauge({
                          ranges: [{ startValue: 0, endValue: 50000000, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 5, startWidth: 1 },
                                   { startValue: 50000000, endValue: 100000000, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 10, startWidth: 5 },
                                   { startValue: 100000000, endValue: 200000000, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 16, startWidth: 13 }],
                          ticksMinor: { interval: 50000000, size: '5%' },
                          ticksMajor: { interval: 10000000, size: '9%' },
                  labels: { interval: 10000000 },
                          value: 0,
                  max: 200000000,
                  width: 200,
                  height: 200,
                  caption: { value: 'Soil moisture', position: 'bottom', offset: [0,0], visible: true },
                  colorScheme: 'scheme05',
                          animationDuration: 1200
                      });
                 
                dataAdapter.dataBind();
                $('#gaugeContainer').on('valueChanging', function (e) {
                       $('#gaugeValue').text(Math.round(e.args.value) + ' au');
                });
          });
    </script>
</head>
<body style="background:white;">
    <div id="demoWidget" style="position: relative;">
	    <div style="float: left;" id="gaugeContainer"></div>
<div id="gaugeValue" style="position: absolute; top: 156px; left: 62px; font-family: Sans-Serif; color: #333; text-align: center; font-size: 11px; width: 70px;">8930 au</div>    </div>
</body>
</html>

Author

Posts

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →