Home Forums Porto Admin Template Graphs

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #10031083
    mushi
    Participant

    Hello Rodrigo,
    I have 2 graphs and i want to update data via ajax on every second.

    1st graph
    i have Total Calls, Incoming calls & Out going calls of every hour (getting from database). so i could monitor calls every second.
    Graph1
    attached image having static values

    2nd graph
    i want to display live calls in this graph via ajax every second
    i have realtime number of calls coming to server (calls count)
    Graph2

    help me to do this above 2 tasks.
    thanks



    Template Version: 2.2.0
    #10031085
    Support2
    Keymaster

    Hello mushi,

    You can use the setInterval() from Javascript.

    For example for the 1st graph:

    setInterval(function(){
    	$.ajax({
    		url: '/path/to/file',
    		type: 'default GET (Other values: POST)',
    		dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
    		data: {
    			param1: 'value1'
    		},
    	})
    	.done(function( response ) {
    
                    // Change the flotBasicData variable with value from database response
    		$.plot('#flotBasic', flotBasicData, {
    			series: {
    				lines: {
    					show: true,
    					fill: true,
    					lineWidth: 1,
    					fillColor: {
    						colors: [{
    							opacity: 0.45
    						}, {
    							opacity: 0.45
    						}]
    					}
    				},
    				points: {
    					show: true
    				},
    				shadowSize: 0
    			},
    			grid: {
    				hoverable: true,
    				clickable: true,
    				borderColor: 'rgba(0,0,0,0.1)',
    				borderWidth: 1,
    				labelMargin: 15,
    				backgroundColor: 'transparent'
    			},
    			yaxis: {
    				min: 0,
    				max: 200,
    				color: 'rgba(0,0,0,0.1)'
    			},
    			xaxis: {
    				color: 'rgba(0,0,0,0.1)'
    			},
    			tooltip: true,
    			tooltipOpts: {
    				content: '%s: Value of %x is %y',
    				shifts: {
    					x: -60,
    					y: 25
    				},
    				defaultTheme: false
    			}
    		});
    	});
    
    }, 1000);

    For the 2nd graph change the code in (js/examples/examples.charts.js) to:

    /*
    Flot: Real-Time
    */
    var data = [],
    	totalPoints = 300;
    
    function getRandomData( response ) {
    	if( $('#flotRealTime').get(0) ) {
    		if (data.length > 0)
    			data = data.slice(1);
    
    		// Do a random walk
    		while (data.length < totalPoints) {
    			data.push( response );
    		}
    
    		// Zip the generated y values with the x values
    		var res = [];
    		for (var i = 0; i < data.length; ++i) {
    			res.push([i, data[i]])
    		}
    
    		return res;
    	}
    }
    
    if( $('#flotRealTime').get(0) ) {
    	var plot = $.plot('#flotRealTime', [getRandomData()], {
    		colors: ['#8CC9E8'],
    		series: {
    			lines: {
    				show: true,
    				fill: true,
    				lineWidth: 1,
    				fillColor: {
    					colors: [{
    						opacity: 0.45
    					}, {
    						opacity: 0.45
    					}]
    				}
    			},
    			points: {
    				show: false
    			},
    			shadowSize: 0
    		},
    		grid: {
    			borderColor: 'rgba(0,0,0,0.1)',
    			borderWidth: 1,
    			labelMargin: 15,
    			backgroundColor: 'transparent'
    		},
    		yaxis: {
    			min: 0,
    			max: 100,
    			color: 'rgba(0,0,0,0.1)'
    		},
    		xaxis: {
    			show: false
    		}
    	});
    }
    
    function update() {
    	if( $('#flotRealTime').get(0) ) {
    		$.ajax({
    			url: '/path/to/file',
    			type: 'default GET (Other values: POST)',
    			dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
    			data: {
    				param1: 'value1'
    			}
    		})
    		.done(function( response ) {
            	
            	// reponse should be the value returned from database
            	response = Math.random() * 100;
                
                plot.setData([getRandomData( response )]);
    
    			plot.draw();
            });
    		
    		setTimeout(update, $( 'html' ).hasClass( 'mobile-device' ) ? 1000 : 1000 );
    	}
    }
    update();

    We hope this helps.

    Kind Regards,

    Rodrigo.


    #10031087
    mushi
    Participant

    Hello,
    Thank you for your help i have completed my 2nd graph (Live calls).

    Can you please tell me how can i put response data in 1st graph (mentioned above) ?
    I have Total Calls, Incoming calls & Out going calls of 24 hour (each hour).
    for example
    hours = calls
    1 = 200
    2 = 300
    3 = 345
    4 = 560
    ……


    • This reply was modified 1 month, 1 week ago by mushi.
    #10031093
    Support2
    Keymaster

    Hello,

    Here is an example for the 1st:

    flotBasicData = [{
    	data: [
    		[1, 170],
    		[2, 69],
    		[3, 173],
    		[4, 188],
    		[5, 147],
    		[6, 113],
    		[7, 128],
    		[8, 169],
    		[9, 173],
    		[10, 128],
    		[11, 228],
    		[12, 328],
    		[13, 428],
    		[14, 528],
    		[15, 628],
    		[16, 728],
    		[17, 128],
    		[18, 138],
    		[19, 448],
    		[20, 228],
    		[21, 338],
    		[22, 558],
    		[23, 668],
    		[24, 778]
    	],
    	label: "Total Calls",
    	color: "#0088cc"
    }, {
    	data: [
    		[1, 270],
    		[2, 469],
    		[3, 573],
    		[4, 888],
    		[5, 747],
    		[6, 513],
    		[7, 428],
    		[8, 669],
    		[9, 773],
    		[10, 228],
    		[11, 228],
    		[12, 328],
    		[13, 428],
    		[14, 528],
    		[15, 628],
    		[16, 728],
    		[17, 828],
    		[18, 128],
    		[19, 138],
    		[20, 148],
    		[21, 128],
    		[22, 728],
    		[23, 828],
    		[24, 228]
    	],
    	label: "Incoming Calls",
    	color: "#2baab1"
    }, {
    	data: [
    		[1, 270],
    		[2, 569],
    		[3, 773],
    		[4, 88],
    		[5, 747],
    		[6, 213],
    		[7, 328],
    		[8, 469],
    		[9, 773],
    		[10, 228],
    		[11, 328],
    		[12, 148],
    		[13, 168],
    		[14, 126],
    		[15, 300],
    		[16, 222],
    		[17, 328],
    		[18, 628],
    		[19, 728],
    		[20, 928],
    		[21, 228],
    		[22, 328],
    		[23, 118],
    		[24, 328]
    	],
    	label: "Out Going Calls",
    	color: "#734ba9"
    }];
    
    $.plot('#flotBasic', flotBasicData, {
    	series: {
    		lines: {
    			show: true,
    			fill: true,
    			lineWidth: 1,
    			fillColor: {
    				colors: [{
    					opacity: 0.45
    				}, {
    					opacity: 0.45
    				}]
    			}
    		},
    		points: {
    			show: true
    		},
    		shadowSize: 0
    	},
    	grid: {
    		hoverable: true,
    		clickable: true,
    		borderColor: 'rgba(0,0,0,0.1)',
    		borderWidth: 1,
    		labelMargin: 15,
    		backgroundColor: 'transparent'
    	},
    	yaxis: {
    		min: 0,
    		max: 1000,
    		color: 'rgba(0,0,0,0.1)'
    	},
    	xaxis: {
    		color: 'rgba(0,0,0,0.1)'
    	},
    	tooltip: true,
    	tooltipOpts: {
    		content: '%s: Value of %x is %y',
    		shifts: {
    			x: -60,
    			y: 25
    		},
    		defaultTheme: false
    	}
    });

    * You need put this code “done()” callback of ajax response and then populate the variable flotBasicData with data from database.

    We hope this helps.

    Kind Regards,

    Rodrigo.


    #10031102
    mushi
    Participant

    Hello Rodrigo,

    Can you please help me to form json data in the required format for graph. i tried but couldn’t make it.
    data from my database will be arrays like this (using PDO)
    Image

    flotBasicData = [{
    	data: [
    		[1, 170],
    		[2, 69],
    		[3, 173],
    		[4, 188],
    		[5, 147],
    		[6, 113],
    		[7, 128],
    		[8, 169],
    		[9, 173],
    		[10, 128],
    		[11, 228],
    		[12, 328],
    		[13, 428],
    		[14, 528],
    		[15, 628],
    		[16, 728],
    		[17, 128],
    		[18, 138],
    		[19, 448],
    		[20, 228],
    		[21, 338],
    		[22, 558],
    		[23, 668],
    		[24, 778]
    	],
    	label: "Total Calls",
    	color: "#0088cc"
    }, {
    	data: [
    		[1, 270],
    		[2, 469],
    		[3, 573],
    		[4, 888],
    		[5, 747],
    		[6, 513],
    		[7, 428],
    		[8, 669],
    		[9, 773],
    		[10, 228],
    		[11, 228],
    		[12, 328],
    		[13, 428],
    		[14, 528],
    		[15, 628],
    		[16, 728],
    		[17, 828],
    		[18, 128],
    		[19, 138],
    		[20, 148],
    		[21, 128],
    		[22, 728],
    		[23, 828],
    		[24, 228]
    	],
    	label: "Incoming Calls",
    	color: "#2baab1"
    }, {
    	data: [
    		[1, 270],
    		[2, 569],
    		[3, 773],
    		[4, 88],
    		[5, 747],
    		[6, 213],
    		[7, 328],
    		[8, 469],
    		[9, 773],
    		[10, 228],
    		[11, 328],
    		[12, 148],
    		[13, 168],
    		[14, 126],
    		[15, 300],
    		[16, 222],
    		[17, 328],
    		[18, 628],
    		[19, 728],
    		[20, 928],
    		[21, 228],
    		[22, 328],
    		[23, 118],
    		[24, 328]
    	],
    	label: "Out Going Calls",
    	color: "#734ba9"
    }];

    #10031117
    Support2
    Keymaster

    Hello Mushi,

    Here is an example with PHP:

    $fromHours = array( 0,1,2,3,4,5 ); // [0, 1, 2, 3, .....]
    $totalCalls = array( 704, 474, 366, 271, 333 ); // [704, 474, 366, 271, .....]
    
    $newArr = array();
    
    for( $i = 0; $i < count($fromHours); $i++ ) {
    	array_push( $newArr, array( $fromHours[ $i ], $totalCalls[ $i ] ) );
    }
    
    print_r( $newArr );

    We hope this helps.

    Kind Regards,

    Rodrigo.


    #10031125
    mushi
    Participant

    Thank You so much Rodrigo. I appreciate your help and support. 🙂


    #10031129
    Support2
    Keymaster

    Hello Mushi,

    Great!

    If you need further assistance feel free to contact us.

    Kind Regards,

    Rodrigo.


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