jQWidgets Forums

Tagged: charting

This topic contains 7 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 2 months ago.

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

Author

Chart doesn't render Posts
March 13, 2015 at 3:28 pm Chart doesn't render #68499

Yann
Participant

Hi.
This code is nearly the same as http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-data-source.htm
but it doesn’t render the chart :

var source_data;
$.ajax({
type: ‘post’,
dataType: ‘json’,
url: ‘lib/loadChargeTech1.php’,
success: function(data){
source_data = $.makeArray(data);
var settings = {
title: “Evolution du nombre de planifications par mois et par technicien sur les 12 derniers mois”,
description: “”,
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 11, bottom: 5 },
titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
source: source_data,
xAxis:
{
dataField: ‘mois’,
valuesOnTicks: false
},
valueAxis:
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: {text: ‘Nb Planif’}
},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘line’,
series: [
{ dataField: ‘Arnaud DAUPHIN’, displayText: ‘Arnaud DAUPHIN’ }
]
},
{
type: ‘line’,
series: [
{ dataField: ‘Elie CHAUVEAU’, displayText: ‘Elie CHAUVEAU’ }
]
}
]
};
$(‘#chartContainer’).jqxChart(settings);
}
});

data returned by the php file to the ajax call is :

[“{mois:’3\/2014′,’Elie CHAUVEAU’:44,’Arnaud DAUPHIN’:28,’Yann GLEVAREC’:0,’Kevin GORIN’:0,’Renald LARUE’:31,’Pascal LECOQ’:20,’Eric RENIER’:19,’Pascal ROUSSEAU’:23,’Jean-Paul VALLEE’:38}”,”{mois:’4\/2014′,’Elie CHAUVEAU’:40,’Arnaud DAUPHIN’:21,’Yann GLEVAREC’:0,’Kevin GORIN’:0,’Renald LARUE’:25,’Pascal LECOQ’:16,’Eric RENIER’:18,’Pascal ROUSSEAU’:24,’Jean-Paul VALLEE’:43}”,”{mois:’5\/2014′,’Elie CHAUVEAU’:31,’Arnaud DAUPHIN’:17,’Yann GLEVAREC’:0,’Kevin GORIN’:0,’Renald LARUE’:29,’Pascal LECOQ’:15,’Eric RENIER’:22,’Pascal ROUSSEAU’:41,’Jean-Paul VALLEE’:39}”,”{mois:’6\/2014′,’Elie CHAUVEAU’:47,’Arnaud DAUPHIN’:29,’Yann GLEVAREC’:0,’Kevin GORIN’:0,’Renald LARUE’:23,’Pascal LECOQ’:24,’Eric RENIER’:30,’Pascal ROUSSEAU’:41,’Jean-Paul VALLEE’:47}”,”{mois:’7\/2014′,’Elie CHAUVEAU’:54,’Arnaud DAUPHIN’:35,’Yann GLEVAREC’:0,’Kevin GORIN’:0,’Renald LARUE’:26,’Pascal LECOQ’:15,’Eric RENIER’:36,’Pascal ROUSSEAU’:18,’Jean-Paul VALLEE’:53}”,”{mois:’8\/2014′,’Elie CHAUVEAU’:18,’Arnaud DAUPHIN’:14,’Yann GLEVAREC’:0,’Kevin GORIN’:0,’Renald LARUE’:20,’Pascal LECOQ’:19,’Eric RENIER’:8,’Pascal ROUSSEAU’:35,’Jean-Paul VALLEE’:27}”,”{mois:’9\/2014′,’Elie CHAUVEAU’:59,’Arnaud DAUPHIN’:35,’Yann GLEVAREC’:0,’Kevin GORIN’:17,’Renald LARUE’:27,’Pascal LECOQ’:15,’Eric RENIER’:60,’Pascal ROUSSEAU’:27,’Jean-Paul VALLEE’:32}”,”{mois:’10\/2014′,’Elie CHAUVEAU’:55,’Arnaud DAUPHIN’:32,’Yann GLEVAREC’:0,’Kevin GORIN’:22,’Renald LARUE’:29,’Pascal LECOQ’:24,’Eric RENIER’:23,’Pascal ROUSSEAU’:34,’Jean-Paul VALLEE’:54}”,”{mois:’11\/2014′,’Elie CHAUVEAU’:30,’Arnaud DAUPHIN’:21,’Yann GLEVAREC’:0,’Kevin GORIN’:23,’Renald LARUE’:22,’Pascal LECOQ’:20,’Eric RENIER’:25,’Pascal ROUSSEAU’:33,’Jean-Paul VALLEE’:52}”,”{mois:’12\/2014′,’Elie CHAUVEAU’:47,’Arnaud DAUPHIN’:29,’Yann GLEVAREC’:2,’Kevin GORIN’:26,’Renald LARUE’:25,’Pascal LECOQ’:24,’Eric RENIER’:34,’Pascal ROUSSEAU’:43,’Jean-Paul VALLEE’:41}”,”{mois:’1\/2015′,’Elie CHAUVEAU’:50,’Arnaud DAUPHIN’:28,’Yann GLEVAREC’:0,’Kevin GORIN’:24,’Renald LARUE’:25,’Pascal LECOQ’:22,’Eric RENIER’:31,’Pascal ROUSSEAU’:36,’Jean-Paul VALLEE’:48}”,”{mois:’2\/2015′,’Elie CHAUVEAU’:43,’Arnaud DAUPHIN’:19,’Yann GLEVAREC’:1,’Kevin GORIN’:32,’Renald LARUE’:25,’Pascal LECOQ’:25,’Eric RENIER’:22,’Pascal ROUSSEAU’:25,’Jean-Paul VALLEE’:44}”,”{mois:’3\/2015′,’Elie CHAUVEAU’:15,’Arnaud DAUPHIN’:21,’Yann GLEVAREC’:1,’Kevin GORIN’:14,’Renald LARUE’:19,’Pascal LECOQ’:8,’Eric RENIER’:20,’Pascal ROUSSEAU’:21,’Jean-Paul VALLEE’:18}”]

Have an idea ?
Thanks.

March 13, 2015 at 5:27 pm Chart doesn't render #68504
Peter Stoev
Keymaster
Hi Yann,

The JSON is malformed and can’t be parsed through JSON.parse or jQuery.parseJSON. For example, well formed JSON is parsed correctly as in the sample below:
```
<!DOCTYPE HTML>
<html lang="en">
<head>
    <title id='Description'>Chart with Range Column Series</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/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 data = '[{"mois":"3/2014","Elie CHAUVEAU":"44","Arnaud DAUPHIN":"28","Yann GLEVAREC":"0","Kevin GORIN":"0","Renald LARUE":"31","Pascal LECOQ":"20","Eric RENIER":"19","Pascal ROUSSEAU":"23","Jean-Paul VALLEE":"38"},{"mois":"4\/2014","Elie CHAUVEAU":"40","Arnaud DAUPHIN":"21","Yann GLEVAREC":"0","Kevin GORIN":"0","Renald LARUE":"25","Pascal LECOQ":"16","Eric RENIER":"18","Pascal ROUSSEAU":"24","Jean-Paul VALLEE":"43"}]'

            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'mois', type: 'string' },
                    { name: 'Elie CHAUVEAU', type: 'int' },
                    { name: 'Arnaud DAUPHIN', type: 'int' },
                    { name: 'Yann GLEVAREC', type: 'int' },
                    { name: 'Renald LARUE', type: 'int' },
                    { name: 'Pascal LECOQ', type: 'int' },
                    { name: 'Eric RENIER', type: 'int' },
                    { name: 'Pascal ROUSSEAU', type: 'int' },
                    { name: 'Jean-Paul VALLEE', type: 'int' },
                    { name: 'Kevin GORIN', type: 'int' }
                ],
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            var settings = {
                title: "Evolution du nombre de planifications par mois et par technicien sur les 12 derniers mois",
                description: "",
                enableAnimations: true,
                showLegend: true,
                padding: {
                    left: 5,
                    top: 5,
                    right: 11,
                    bottom: 5
                },
                titlePadding: {
                    left: 10,
                    top: 0,
                    right: 0,
                    bottom: 10
                },
                source: dataAdapter,
                xAxis: {
                    dataField: 'mois',
                    valuesOnTicks: false
                },
                valueAxis: {
                    minValue: 0,
                    maxValue: 100,
                    unitInterval: 10,
                    title: {
                        text: 'Nb Planif'
                    }
                },
                colorScheme: 'scheme01',
                seriesGroups: [{
                    type: 'line',
                    series: [{
                        dataField: 'Arnaud DAUPHIN',
                        displayText: 'Arnaud DAUPHIN'
                    }]
                }, {
                    type: 'line',
                    series: [{
                        dataField: 'Elie CHAUVEAU',
                        displayText: 'Elie CHAUVEAU'
                    }]
                }]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxChart' style="width:850px; height:500px">
    </div>    
</body>
</html>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/
March 14, 2015 at 6:48 am Chart doesn't render #68518

Yann
Participant

Hi Peter.
My data format is not a json object but an array. As you can see, data returned by ajax call is converted in an array :source_data = $.makeArray(data);

March 14, 2015 at 8:16 am Chart doesn't render #68519

Peter Stoev
Keymaster

Hi Yann,

You have 2 options – either use my solution or build your own following our samples and documentation.

Best Regards,
Peter Stoev

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

March 14, 2015 at 8:33 am Chart doesn't render #68522

Yann
Participant

Thanks Peter.
I followed your explanation and it works.
Now I would like to make it totally dynamic, I mean a dynamic datafields param for the source and dynamic series.
Can I build arrays for datafields param and series ?
Thanks in advance.

March 14, 2015 at 8:53 am Chart doesn't render #68523

Yann
Participant

To be more comprehensive, I try do something like that :

var myDatafields = [];
var field = new Object();
var mySeries = [];
var serie = new Object();
$.each(result, function(k,v){
if(i==0){
field.name=k;
field.type=’string’;
myDatafields.push(field);
}else{
field.name=k;
field.type=’int’;
myDatafields.push(field);
serie.dataField=k;
serie.displayText=k;
mySeries.push(serie);
}
i++;
});

March 14, 2015 at 9:54 am Chart doesn't render #68524

Yann
Participant

It works Peter.
The objects declaration was not on the right place.

March 14, 2015 at 2:34 pm Chart doesn't render #68528

Peter Stoev
Keymaster

Hi Yann,

Thanks for the update and hope you like our Chart. If you wish you can also try our new product which is in Beta now – jQWidgets Chart Studio – https://www.jqwidgets.com/chartstudio/

Best Regards,
Peter Stoev

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

Posts

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

You must be logged in to reply to this topic.