[shawnParticipant]

thank you

[shawnParticipant]

Thank you.
I have a working sample here, if anyone else would like to see it:

jsfiddle

[shawnParticipant]

Does that mean I have to change the ID of jqxTree every time?

I have a jsfiddle sample here:
http://jsfiddle.net/hpk9tuzf/1/

[shawnParticipant]

when I say “doesn’t work” I mean the body of the tree is missing, only the div that says “Folders” shows.

[shawnParticipant]

Follow up:

Removing the extra fields did the trick.

var pJson=json.rData;

// 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: pJson,
    root: 0
};

[shawnParticipant]

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

[shawnParticipant]

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

[shawnParticipant]

that works, thank you

[shawnParticipant]

a like to actual data is HERE

[shawnParticipant]

just what I was looking for, thanks

[shawnParticipant]

perfect, thanks

[shawnParticipant]

Is there a way to toggle on all of these at once?

[shawnParticipant]

Thank you.
I ended up doing it this way:

$('#repGraph').on('click', function(e){
	tallyRCtotal();
 });

then

function tallyRCtotal(){
	var counter=0;
	$("#repGraph").find(".jqx-chart-label-text").each(function(){
		counter+=parseInt( $(this).html() );
	});	
	
	$("#rdrLen").html(counter.toString()+" records");
}

[shawnParticipant]

I figured it out from this page.

I needed to set the parameters:

borderLineColor: '#f2f2f2',
backgroundColor: '#f2f2f2',

[shawnParticipant]

I added the class

.tblChart td{
	background:#f2f2f2;
	border:0;
}

and I got to look better, but I still can’t figure out how to change the background color of the chart, and how to remove the border.
It looks to me the background color is part of the SVG and needs to be set in the function.

[Author]

Posts