jQuery UI Widgets Forums Chart values wrapping on line chart

Tagged: 

This topic contains 6 replies, has 2 voices, and was last updated by  Hristo 3 months, 2 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • values wrapping on line chart #108039

    shawn
    Participant

    I have a chart with several hundred values to be mapped.
    I’m not sure what I’m doing wrong, but the values seem to be wrapping.

    the data is from JSON which looks like

    [

    	{
    		"capacityDL": 351,
    		"capacityUL": 115,
    		"currentDL": 46,
    		"currentUL": 119,
    		"signal": -65,
    		"dateTime": "02/07/2020 00:05:15"
    	},
    	{
    		"capacityDL": 351,
    		"capacityUL": 115,
    		"currentDL": 64,
    		"currentUL": 15,
    		"signal": -65,
    		"dateTime": "02/07/2020 00:10:15"
    	},...

    the chart code is

     // prepare jqxChart settings
      var settings = {
          title: gTitle,
          description: "",                
          enableAnimations: true,
          showLegend: true,
          padding: { left: 10, top: 5, right: 10, bottom: 5 },
          titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
          source: pJson,
          xAxis:
          {
              dataField: 'dateTime',
              type: 'date',
              baseUnit: 'minute',
              valuesOnTicks: true,
              unitInterval: 50
          },
          valueAxis:
          {
              unitInterval: 100,
              minValue: 0,
              maxValue: 1000,
              title: {text: '<br>'},
    					formatFunction: function (value) {
    					        return Math.round(value);
    					}                    
          },
          colorScheme: 'scheme03',
          seriesGroups:
              [
                  {
                      type: 'line',
                      series: [
                              { dataField: 'capacityDL', displayText: 'capacity download' },                                    
                              { dataField: 'currentDL', displayText: 'current download' }
                          ]
                  }
              ]
      };
      // setup the chart
      $('#chartContainer').jqxChart(settings);

    example

    • This topic was modified 3 months, 3 weeks ago by  shawn. Reason: added image
    • This topic was modified 3 months, 3 weeks ago by  shawn.
    values wrapping on line chart #108058

    shawn
    Participant

    a like to actual data is HERE

    values wrapping on line chart #108062

    Hristo
    Participant

    Hello shawn,

    I would like to suggest you try to use it on that way:

    var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: "capacityDL" },
                        { name: "capacityUL" },
                        { name: "currentDL" },
                        { name: "currentUL" },
                        { name: "signal" },
                        { name: "dateTime", type: "date", format: "MM/dd/yyyy HH:mm:ss" }
                    ],
                    //url: "http://nbson.com/test/jsonTest.json"
                    //localdata: pJson
                    url: "./jsonTest.json",
                    root: 0
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert("Error loading '" + source.url + "' : " + error); } });
    
                var settings = {
                    title: "gTitle",
                    description: "",
                    enableAnimations: true,
                    showLegend: true,
                    padding: { left: 10, top: 5, right: 10, bottom: 5 },
                    titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
                    source: dataAdapter,
                    xAxis:
                    {
                        dataField: "dateTime",
                        type: "date",
                        baseUnit: "minute",
                        valuesOnTicks: true,
                        unitInterval: 50
                    },
                    valueAxis:
                    {
                        unitInterval: 100,
                        minValue: 0,
                        maxValue: 1000,
                        title: { text: "<br>" },
                        formatFunction: function (value) {
                            return Math.round(value);
                        }
                    },
                    colorScheme: "scheme03",
                    seriesGroups:
                        [
                            {
                                type: "line",
                                series: [
                                    { dataField: "capacityDL", displayText: "capacity download" },
                                    { dataField: "currentDL", displayText: "current download" }
                                ]
                            }
                        ]
                };
    
                // setup the chart
                $("#chartContainer").jqxChart(settings);

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    values wrapping on line chart #108063

    shawn
    Participant

    that works, thank you

    values wrapping on line chart #108089

    shawn
    Participant

    Hello:
    I guess I spoke too soon.
    The problem seems to be intermittent.

    I have sample data here

    
    // the chart may be redrawn so remove and add the component each time
    // note: the line "wrap" can happen even on the first draw
    $('#chartContainer').remove();
    
    $.ajax({    
    	url: "../cgi-bin/myProg.exe",    
    	dataType: "json",		
    	data: dataString,
    	error: ajaxError, 		 	
    	success: function(json){   	 	
    			if(json.error !== "0"){
    				spinner(0);
    				alertify.alert("ERROR "+json.error);
    				return;
    			}		 				
    			
    			  console.log("%crData length: "+json.rData.length,"color:orange;");
    
    				var gTitle=$("#radioNameDIV").html();
    				
    				// add the chart container
    				var dv='<div id="chartContainer"></div>';
    				$("body").append(dv);
    
            // prepare the data
    				var source =
            {
                datatype: "json",
                datafields: [
    						{ name: "autoID" },
    						{ name: "rid" },
    						{ name: "capacityDL" },
    						{ name: "capacityUL" },
    						{ name: "currentDL" },
    						{ name: "currentUL" },
    						{ name: "signal" },
    						{ name: "dateTime", type: "date", format: "MM/dd/yyyy HH:mm:ss" },
    						{ name: "benchDL" },
    						{ name: "benchUL" },
    						{ name: "benchSignal" }
                ],
                localdata: json,
                root: 0
            };
            
           var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alertify.alert("Error loading '" + source.url + "' : " + error); } });
           
           var len=dataAdapter.records.length;
           var interval=len/100;
           var rval=parseInt( $("#resolution").val() );           
           if(interval < 1){interval=1;}           
           interval=(interval*100)/2;
    
           // prepare jqxChart settings
            var settings = {
                title: gTitle,
                description: "",                
                enableAnimations: true,
                showLegend: true,
                padding: { left: 10, top: 5, right: 10, bottom: 5 },
                titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                xAxis:
                {
                    dataField: 'dateTime',
                    type: 'date',
                    baseUnit: 'minute',
                    valuesOnTicks: true,
                    unitInterval: interval 
                },
                valueAxis:
                {
                    unitInterval: 100,
                    minValue: 0,
                    maxValue: 1000,
                    title: {text: '<br>'},
    								formatFunction: function (value) {
    								        return Math.round(value);
    								}                    
                },
                colorScheme: 'scheme03',
                seriesGroups:
                    [
                        {
                            type: 'line',
                            series: [
                                    { dataField: 'capacityDL', displayText: 'capacity download' },                                    
                                    { dataField: 'currentDL', displayText: 'current download' }
                                ]
                        }
                    ]
            };
    
                // function to wait for chart to exist before populating 
                waitForElement("#chartContainer",function(){		            
                  // setup the chart
                  // sometimes
                  try{
                     	$('#chartContainer').jqxChart(settings);
                  }catch{
                    	alertify.alert("error: please narrow your search");
                  }	
            });    
    
    	
    }
    });	

    Sometimes I will get the error

    jqxchart.core.js:8 Uncaught TypeError: Cannot read property 'offset' of undefined
        at c.<computed>._generateDTOffsets (jqxchart.core.js:8)
        at c.<computed>._renderXAxis (jqxchart.core.js:8)
        at c.<computed>._render (jqxchart.core.js:8)
        at c.<computed>._internalRefresh (jqxchart.core.js:8)
        at c.<computed>.refresh (jqxchart.core.js:8)
        at Object.b.jqx.applyWidget (jqxcore.js:15)
        at HTMLDivElement.<anonymous> (jqxcore.js:15)
        at Function.each (jquery.1.11.1.js:2)
        at m.fn.init.each (jquery.1.11.1.js:2)
        at m.fn.init.b.fn.<computed> [as jqxChart] (jqxcore.js:15)

    I have verified that the JSON is always correct.

    Thanks

    values wrapping on line chart #108090

    shawn
    Participant

    SORRY:
    I found the problem.
    The JSON data was not sorted by date.
    thanks for your help

    values wrapping on line chart #108153

    Hristo
    Participant

    Hello shawn,

    Thank you for the clarification.
    Please let me know if you have any other questions.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.