jQuery UI Widgets Forums Chart x-axis labels, other json data

This topic contains 6 replies, has 3 voices, and was last updated by  Dimitar 8 years, 11 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • x-axis labels, other json data #74029

    shawn
    Participant

    hello:

    Question #1:
    I want the x-axis labels on my stacked line graph to be years as presented in my json data.

    The json looks like this:

    {  
       "yearData":[  
          {  
             "year":"2008",
             "installs":0,
             "noGo":0,
             "pickups":0
          },
          {  
             "year":"2009",
             "installs":11,
             "noGo":0,
             "pickups":25
          },
          {  
             "year":"2010",
             "installs":18,
             "noGo":0,
             "pickups":3
          },
          {  
             "year":"2011",
             "installs":9,
             "noGo":0,
             "pickups":10
          },
          {  
             "year":"2012",
             "installs":11,
             "noGo":2,
             "pickups":1
          },
          {  
             "year":"2013",
             "installs":10,
             "noGo":2,
             "pickups":2
          },
          {  
             "year":"2014",
             "installs":13,
             "noGo":5,
             "pickups":5
          },
          {  
             "year":"2015",
             "installs":12,
             "noGo":0,
             "pickups":9
          }
       ],
       "error":"0"
    }

    my script looks like this

    			var source =
    			{
    			    datatype: "json",
    			    datafields: [
    			        { name: 'year'},
    			        { name: 'installs'},
    			        { name: 'noGo'},
    			        { name: 'pickups'}
    			    ],
    			    id: 'id',
    			    url: cgiString
    			};			
    
          var dataAdapter = new $.jqx.dataAdapter(source, { 
          		async: false, 
          		autoBind: true, 
          		loadError: 
          		function (xhr, status, error) { 
          				alertify.alert('Error loading "' + source.url + '" : ' + error); } 
          		});
          		
          // prepare jqxChart settings
          var settings = {
              title: "wireless growth comparison chart",
              description: "install,no-go,pickup comparison",
              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: 'year',
                  type: 'date',
                  baseUnit: 'year',
                  valuesOnTicks: true,
                  labels:
                  {
                      formatFunction: function (value) {
                          return value.getDate();
                      }
                  }
              },
              valueAxis:
              {
                  unitInterval: 1,
                  minValue: 0,
                  maxValue: 40,
                  labels: {horizontalAlignment: 'right'},
                  title: { text: 'category counts<br>' }
              },
              colorScheme: 'scheme01',
              seriesGroups:
                  [
                      {
                          type: 'stackedline',
                          series: [
                                  { dataField: 'installs', displayText: 'installs' },
                                  { dataField: 'noGo', displayText: 'noGo' },
                                  { dataField: 'pickups', displayText: 'pickups' }
                              ]
                      }
                  ]
          };
          // setup the chart     
          	 $('#cResults').jqxChart(settings);	 				
    

    My chart always has “31” for the only date on the x-axis.

    Question #2
    I want to get other data that exists in the json. For example, the example above returns an error code along with the chart data.
    How do I get that?

    thanks

    x-axis labels, other json data #74043

    Dimitar
    Participant

    Hello shawn,

    Here is an example that, hopefully, answers both your questions:

    <!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 () {
                var data = {
                    "yearData": [{
                        "year": "2008",
                        "installs": 0,
                        "noGo": 0,
                        "pickups": 0
                    }, {
                        "year": "2009",
                        "installs": 11,
                        "noGo": 0,
                        "pickups": 25
                    }, {
                        "year": "2010",
                        "installs": 18,
                        "noGo": 0,
                        "pickups": 3
                    }, {
                        "year": "2011",
                        "installs": 9,
                        "noGo": 0,
                        "pickups": 10
                    }, {
                        "year": "2012",
                        "installs": 11,
                        "noGo": 2,
                        "pickups": 1
                    }, {
                        "year": "2013",
                        "installs": 10,
                        "noGo": 2,
                        "pickups": 2
                    }, {
                        "year": "2014",
                        "installs": 13,
                        "noGo": 5,
                        "pickups": 5
                    }, {
                        "year": "2015",
                        "installs": 12,
                        "noGo": 0,
                        "pickups": 9
                    }],
                    "error": "0"
                }
    
                var source = {
                    datatype: "json",
                    datafields: [{
                        name: 'year'
                    }, {
                        name: 'installs'
                    }, {
                        name: 'noGo'
                    }, {
                        name: 'pickups'
                    }],
                    id: 'id',
                    localdata: data
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    async: false,
                    autoBind: true,
                    loadError: function (xhr, status, error) {
                        alertify.alert('Error loading "' + source.url + '" : ' + error);
                    }
                });
    
                // prepare jqxChart settings
                var settings = {
                    title: "wireless growth comparison chart",
                    description: "install,no-go,pickup comparison",
                    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: 'year',
                        type: 'default',
                        baseUnit: 'year',
                        valuesOnTicks: true
                    },
                    valueAxis: {
                        unitInterval: 1,
                        minValue: 0,
                        maxValue: 40,
                        labels: {
                            horizontalAlignment: 'right'
                        },
                        title: {
                            text: 'category counts<br>'
                        }
                    },
                    colorScheme: 'scheme01',
                    seriesGroups: [{
                        type: 'stackedline',
                        series: [{
                            dataField: 'installs',
                            displayText: 'installs'
                        }, {
                            dataField: 'noGo',
                            displayText: 'noGo'
                        }, {
                            dataField: 'pickups',
                            displayText: 'pickups'
                        }]
                    }]
                };
                // setup the chart     
                $('#cResults').jqxChart(settings);
    
                $('#getErrorCode').click(function () {
                    alert('Error code is: ' + dataAdapter.loadedData.error + '.');
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='cResults' style="width: 850px; height: 500px">
        </div>
        <br />
        <button id="getErrorCode">
            Get error code</button>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    x-axis labels, other json data #74056

    shawn
    Participant

    thank looks much better! Thank you.
    I have one more question.
    The plotted points on the chart do not seem to correspond to the data values from the json.
    For instance, the “count” from the data is 25, but it is plotted at 36.
    What am I doing wrong? thanks

    example

    x-axis labels, other json data #74057

    shawn
    Participant

    … I see that it is adding the values together, so I suspect I’m using the wrong type of chart.

    x-axis labels, other json data #74058

    shawn
    Participant

    that was it! I changed “stacked line” to “line” and it’s perfect.
    Thanks again!

    x-axis labels, other json data #78397

    ggg
    Participant

    How can i get a custom value on a label on this

    x-axis labels, other json data #78416

    Dimitar
    Participant

    Hello ggg,

    The demo Tooltip Formatting may be helpful to you. Please check it out.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.