multiple line chart json data - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, javascript chart, jquery chart, jqwidgets chart, json data multiple line chart jqxchart

This topic contains 12 replies, has 2 voices, and was last updated by Blomotom 7 years, 2 months ago.

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

Author

multiple line chart json data Posts
July 10, 2017 at 5:13 pm multiple line chart json data #94810

Blomotom
Participant

Hello,
I have following json 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.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}]

I would a chart with multiple lines like

G 0 0 0.088 0.1 0.09
E 0 0 0.16 0.18 0.22
2013 2014 2015 2016 2017

Could you help me please.

July 10, 2017 at 6:42 pm 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 10, 2017 at 7:53 pm 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 11, 2017 at 11:07 am multiple line chart json data #94831

Hristo
Participant

Hello Blomotom,

You could use beforeLoadComplete callback function of the DataAdapter to transform the data.
Please, take a look at this example:
https://www.jseditor.io/?key=jqxchart-with-two-lines-series

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

July 11, 2017 at 6:07 pm 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 11, 2017 at 6:35 pm 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 12, 2017 at 12:29 am 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 14, 2017 at 12:50 pm 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 19, 2017 at 9:46 am multiple line chart json data #94986

Hristo
Participant

Hello Blomotom,

I would like to suggest you look at our “Showcase” demos section. There you will find how could reuse one chart with different data (different ‘users’).
Please, take a look at this example:
http://www.jqwidgets.com/jquery-widgets-demo/demos/interactivedemos/personalsales/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

July 21, 2017 at 7:06 pm 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 24, 2017 at 9:54 pm 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 25, 2017 at 9:44 am multiple line chart json data #95103

Hristo
Participant

Hello Blomotom,

Please, take a look at this example:
https://www.jseditor.io/?key=jqxchart-with-two-lines-series-edited
I am not sure what you want to achieve.
Could you clarify it?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

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

Blomotom
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}]

or

[{“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)
Author

Posts

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

You must be logged in to reply to this topic.