JSON data and Color Band Chart

[milesdParticipant]

What format is the JSON data in to send to a Color Band Chart? Do you have an example?

[ivailoParticipant]

Hi milesd,

Please look at this demo chart with color bands.
Probably it can be helpful for you.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[milesdParticipant]

Thank you I was looking at that example to bind to php but was having problems. I believe that my problem is having the the axis read time. How do you have the color bands chart use time in the axis. as well as set a minimum and maximum time value?

[milesdParticipant]

I’m sorry I was looking at the color band example but really its the rangecolumn chart.

I cant seem to get the range column from and to to be based off of time.

Can you show me an example of how to display the range column chart with time?
I have tried:
var data = [
{“name”:”7:30 – 9:20″,”start_time”:”Wed Feb 17 2016 08:05:00 GMT-0800 (Pacific Standard Time)”,”end_time”:”Wed Feb 17 2016 08:50:00 GMT-0800 (Pacific Standard Time)”,”count”:5,”result”:”24″,”percent”:85,”bs”:-1},
{“name”:”6:30 – 9:20″,”start_time”:”Wed Feb 17 2016 09:40:00 GMT-0800 (Pacific Standard Time)”,”end_time”:”Wed Feb 17 2016 09:45:00 GMT-0800 (Pacific Standard Time)”,”count”:4,”result”:”24″,”percent”:85,”bs”:-1},
{“name”:”8:30 – 9:20″,”start_time”:”Wed Feb 17 2016 08:45:00 GMT-0800 (Pacific Standard Time)”,”end_time”:”Wed Feb 17 2016 09:45:00 GMT-0800 (Pacific Standard Time)”,”count”:7,”result”:”28″,”percent”:100,”bs”:-1},
{“name”:”9:30 – 10:30″,”start_time”:”Wed Feb 17 2016 04:45:00 GMT-0800 (Pacific Standard Time)”,”end_time”:”Wed Feb 17 2016 14:35:00 GMT-0800 (Pacific Standard Time)”,”count”:6,”result”:”26″,”percent”:85,”bs”:-1}
];

as well as
var data = [
{“name”:”7:30 – 9:20″,”start_time”:”08:05:00″,”end_time”:”08:50:00″,”count”:5,”result”:”24″,”percent”:85,”bs”:-1},
{“name”:”6:30 – 9:20″,”start_time”:”09:40:00″,”end_time”:”09:45:00″,”count”:4,”result”:”24″,”percent”:85,”bs”:-1},
{“name”:”8:30 – 9:20″,”start_time”:”08:45:00″,”end_time”:”09:45:00″,”count”:7,”result”:”28″,”percent”:100,”bs”:-1},
{“name”:”9:30 – 10:30″,”start_time”:”04:45:00″,”end_time”:”14:35:00″,”count”:6,”result”:”26″,”percent”:85,”bs”:-1}
];

I either get no plot or partial and no time on the axis.

[ivailoParticipant]

Hi milesd,

To display your color bands in time intervals you have to set xAxis‘s properties – type:’date’ and baseUnit:’hour’.
Here is a demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[milesdParticipant]

Thank you. I mentioned above it was the range column chart I’m trying to do this for. I cant seem to get these times to works with that. The value axis doesn’t seem to have a type property. here is the sample code.

var source =
			 {
				 datatype: "json",
				 datafields: [
				  { name: 'labelName'},
				  { name: 'start_time'},
				  { name: 'end_time'},
				  { name: 'result'},
				  { name: 'percent'},
				  { name: 'bs'},
				  { name: 'count'},
				 ],
				
                          url: 'mcbind2.php
		 	 };		
  //Data being returned from url
			[{"labelName":"15:05:00 - 16:00:00","start_time":"Wed Feb 17 2016 15:05:00","end_time":"Wed Feb 17 2016 16:00:00","count":7,"result":"1309","percent":100,"bs":-1},{"labelName":"15:20:00 - 16:00:00","start_time":"Wed Feb 17 2016 15:20:00","end_time":"Wed Feb 17 2016 16:00:00","count":7,"result":"1041","percent":100,"bs":-1},{"labelName":"15:15:00 - 16:00:00","start_time":"Wed Feb 17 2016 15:15:00","end_time":"Wed Feb 17 2016 16:00:00","count":7,"result":"951","percent":100,"bs":-1},{"labelName":"15:05:00 - 15:55:00","start_time":"Wed Feb 17 2016 15:05:00","end_time":"Wed Feb 17 2016 15:55:00","count":7,"result":"850","percent":100,"bs":-1},{"labelName":"15:10:00 - 15:55:00","start_time":"Wed Feb 17 2016 15:10:00","end_time":"Wed Feb 17 2016 15:55:00","count":7,"result":"706","percent":100,"bs":-1}]

			 var dataAdapter = new $.jqx.dataAdapter(source,
			 {
				autoBind: true,
				async: false,
				downloadComplete: function () { },
				loadComplete: function () { },
				loadError: function () { }
			 });
 

           
            // prepare jqxChart settings
            var settings = {
                title: mkt+' '+ accuracy + ' '+lookback+' '+dis+' '+minutes+' '+tz+' '+show+' '+rank,
                description: "",
                enableAnimations: true,
                showLegend: false,
                padding: { left: 5, top: 5, right: 10, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                xAxis:
                {
                    dataField: 'labelName',
                    tickMarks: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    }
                },
                colorScheme: 'scheme02',
                seriesGroups:
                    [
                        {
                            orientation: 'horizontal',
                            type: 'rangecolumn',
                            columnsGapPercent: 100,
                           
                            valueAxis:
                            {
                            	  type: 'date',
                            	  baseUnit: 'hour',
                                unitInterval: 1,
                            	 
                                flip: true,
                                valuesOnTicks: true,
                         
                                title: { text: 'Day' },
                                tickMarks: { color: '#BCBCBC' }
                            },
                            series: [
                             
                                    
                                    { 
                                    	dataField: 'bs',
                                    	dataFieldFrom: 'start_time', 
                                    	dataFieldTo: 'end_time', 
                                    	displayText: 'hello', 
                                    	opacity: 1,
                                    	toolTipFormatFunction: function (value,itemIndex, serie, group, categoryValue, categoryAxis){
                            						var records = dataAdapter.records;        
                        								var record = records[itemIndex];
                            						return '<DIV>Percent:'+record.percent+'<br>Result='+record.result+'<br>Time='+record.labelName+'</DIV>'
                            	
                            },
                                    	
                                    		colorFunction: function (dataValue, itemIndex, serie, group) {
                                    			if (isNaN(itemIndex))
                                                    return '#55CC55'; 
                                                
                                    		 var records = dataAdapter.records;        
                        								var record = records[itemIndex];
                        								
                                    	  return (record.bs < 0) ? '#CC1133' : '#55CC55';
                                    		
                                      } 
                                    	}
                                 

                                   
                                ]
                           
                        }

                    ]
            };
dataAdapter.dataBind();
            // setup the chart
            $('#chart' + g_index).jqxChart(settings);
            

[Author]

Posts