function renderGraphicForTraffic($container, data, timestampBack, timestampNow, dataPointsLabelsFormat, aggregatedEvery) {

                var dataPointsInfo = [],
                    dataPointsLabels = [];

                var sortedByUnixTime = sortByUnixTimestamp(data.total_bytes);

                //Loop through ajax requested data and prepare for the graph

                $.each(sortedByUnixTime, function (currentIndex, currentValue) {

                    if (currentValue.time >= timestampBack && currentValue.time <= timestampNow && currentValue.time <=
                        convertDateToTimestamp(new Date())) {

                        //Fill the array for drawing the graphic
                        dataPointsInfo.push(currentValue.xAxis / (60 * aggregatedEvery)); // We delete by 60 * 5 because we got it every 5 mins

                        dataPointsLabels.push(moment(new Date(currentValue.time * 1000)).format(dataPointsLabelsFormat));
                    }
                });

                //Fill chart if there are dataPointsInfo and dataPointsLabels

                if (dataPointsInfo.length && dataPointsLabels.length) {

                    $container = resetCanvas($container, $scope.trafficChart);

                    //Draw chart using Highcharts

                    $scope.trafficChart = Highcharts.chart({
                        chart: {
                            renderTo: $container,
                            zoomType: 'x'
                        },
                        title: {
                            text: 'Bandwidth'
                        },
                        subtitle: {
                            text: document.ontouchstart === undefined ?
                                'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
                        },
                        xAxis: {
                            categories: dataPointsLabels
                        },
                        yAxis: {
                            title: {
                                text: 'Mbps'
                            }
                        },
                        legend: {
                            enabled: false
                        },
                        plotOptions: {
                            area: {
                                fillColor: {
                                    linearGradient: {
                                        x1: 0,
                                        y1: 0,
                                        x2: 0,
                                        y2: 1
                                    },
                                    stops: [
                                        [0, Highcharts.getOptions().colors[0]],
                                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                                    ]
                                },
                                marker: {
                                    radius: 2
                                },
                                lineWidth: 1,
                                states: {
                                    hover: {
                                        lineWidth: 1
                                    }
                                },
                                threshold: null
                            }
                        },

                        series: [{
                            type: 'area',
                            name: 'Traffic',
                            data: dataPointsInfo
                        }]
                    });
                }


                //     //Draw chart using chart.js
                //     $scope.trafficChart = new Chart($container, {
                //         type: 'line',
                //         data: {
                //             labels: dataPointsLabels,
                //             datasets: [{
                //                 label: 'Bandwidth',
                //                 data: dataPointsInfo,
                //                 fill: false,
                //                 lineTension: 0.3,
                //                 backgroundColor: "rgba(75,192,192,0.4)",
                //                 borderColor: "lightblue",
                //                 borderCapStyle: 'butt',
                //                 borderDash: [],
                //                 borderDashOffset: 0.0,
                //                 borderJoinStyle: 'round',
                //                 pointBorderColor: "rgba(75,192,192,1)",
                //                 pointBackgroundColor: "#fff",
                //                 pointBorderWidth: 1,
                //                 pointHoverRadius: 5,
                //                 pointHoverBackgroundColor: "rgba(75,192,192,1)",
                //                 pointHoverBorderColor: "rgba(220,220,220,1)",
                //                 pointHoverBorderWidth: 2,
                //                 pointRadius: 1,
                //                 pointHitRadius: 10,
                //             }]
                //         },
                //         options: {
                //             responsive: false,
                //             scales: {
                //                 yAxes: [{
                //                     ticks: {
                //                         userCallback: function (data) {
                //                             return ((data * 8) / 1000000).toFixed(4) + ' Mbps';
                //                         }
                //                     },
                //                     // scaleLabel: {
                //                     //     display: true,
                //                     //     labelString: 'Mbps'
                //                     // }

                //                 }]
                //             },
                //             tooltips: {
                //                 callbacks: {
                //                     label: function (tooltipItem, data) {
                //                         return ((data.datasets[0].data[tooltipItem.index] * 8) / 1000000).toFixed(4) + ' Mbps';
                //                     }
                //                 }
                //             }
                //         }
                //     });
                // }
                else {
                    noDataFoundErrorMsg($scope.trafficChartContainer, 'Sorry, no data for the selected period');
                }
            }