When i add a second graph in same page it happens this that is describes in photos below all the javascript code is here
<div class="inbox-widget scrollbar-track-widgets scrollbar-track-gray nicescroll total_inspections-scrollbar">
<div id="total_inspections_comparison_content_chart"></div>
Lines with javascript code
<script type="text/javascript">
var data = <?php echo json_encode($chart_data);?>;
var data_colors = <?php echo json_encode($data_colors);?>;
var data_labels = <?php echo json_encode($data_labels);?>;
var widget_parms = <?php echo json_encode($widget_parms);?>;
function createBarChart(element, data, xkey, ykeys, labels, lineColors, hoverCallBack)
{
hoverCallBack = (typeof hoverCallBack == 'undefined') ? function (index, options, content, row)
{
return content;
} : hoverCallBack;
Morris.Bar({
element: element,
data: data,
xkey: xkey,
ykeys: ykeys,
labels: labels,
hideHover: 'auto',
resize: true, //defaulted to true
xLabelFormat: function (x) {
return x.src.period;
},
gridLineColor: '#eeeeee',
barSizeRatio: 1.3,
barColors: lineColors,
hoverCallback: hoverCallBack,
preUnits: "",
barSize: 10
});
}
createBarChart(
'total_inspections_comparison_content_chart',
data,
'date',
['three_years_back', 'two_years_back', 'last_year', 'this_year'],
data_labels,
function (row, series, type) {
var now = new Date();
var now_year = now.getFullYear();
if(row.label.indexOf(now_year) >= 0 || (row.label === `Dec 31, ${now_year-1}` && (widget_parms == 'this_month' || widget_parms == 'year_to_date' || widget_parms == 'last_three_months')))
color = data_colors[differenceYear(series.label)];
else if (typeof data_colors[differenceYear(series.label - 1)] != 'undefined') color = data_colors[differenceYear(series.label - 1)];
else color = data_colors[differenceYear(series.label)];
return color;
},
function (index, options, content, row)
{
$tooltip_info_obj = generateTooltip(options, content, row);
return $tooltip_info_obj;
}
);
function generateTooltip(options, content, row){
var $jQueryObject = $($.parseHTML('<div>' + content + '</div>'));
$jQueryObject.find('.morris-hover-row-label').addClass('hover-label-style');
var tooltipInfo = '';
tooltipInfo = '<strong>' + row.period + '</strong><br>';
if(row.three_years_back !== 0){
tooltipInfo += row.three_years_back_label + ': ' + row.three_years_back + '<br>';
}
if(row.two_years_back !== 0){
tooltipInfo += row.two_years_back_label + ': ' + row.two_years_back + '<br>';
}
if(row.last_year !== 0){
tooltipInfo += row.last_year_label + ': ' + row.last_year + '<br>';
}
if(row.this_year !== 0){
tooltipInfo += row.this_year_label + ': ' + row.this_year + '<br>';
}
$jQueryObject.find('.morris-hover-row-label').html(tooltipInfo);
$jQueryObject.find('.morris-hover-point').remove();
return $jQueryObject.contents();
}
function differenceYear (year) {
var previous_year_date = new Date(year,1,1);
var previous_year = previous_year_date.getFullYear();
var this_year_date = new Date();
var this_year = this_year_date.getFullYear();
difference = this_year - previous_year;
return difference;
}
function generateChartLegend(data_colors, data_labels){
data_colors_rev = JSON.parse(JSON.stringify(data_colors));
data_colors_rev = data_colors_rev.reverse();
for(let elem in data_labels){
var wrapper = document.createElement('div');
var label_div = document.createElement('div');
var color_box_div = document.createElement('div');
wrapper.style.float = 'left';
wrapper.style.margin = '0px 0px 0px 15px';
label_div.innerHTML = data_labels[elem];
label_div.style.display = 'inline';
color_box_div.style.background = data_colors_rev[elem];
color_box_div.style.float = 'left';
color_box_div.style.width = '10px';
color_box_div.style.height = '10px';
color_box_div.style.margin = '4px 10px 0px 0px';
wrapper.append(color_box_div);
wrapper.append(label_div);
$('#total_inspections_graph_legend').append(wrapper);
}
}
generateChartLegend(data_colors, data_labels);
Lines with style
<style>
#total_inspections_comparison_content_chart {
min-width: 500px !important;
}
.total_inspections-scrollbar {
max-height: 500px !important;
}
First graph:
Second graph is null because the first one is taking the result also from second:
Images
This is the new code that is used to add a new wiget to the page
private function generateWidgetContent($client, $instance)
{
$instance = $this->widget_instance;
$this->setContainerClass('col-lg-8 widget-box');
$widget_interval = $this->widget_interval;
$widget_parms = $this->widget_params;
if(empty($widget_parms)){
$widget_parms = 'this_month';
}
$title = ($widget_interval == 'per_month' ? 'Per Month' : 'Per Week');
$sql_interval = ($widget_interval == 'per_month' ? '%Y%m' : '%Y%u');
$title_parms = $this->getOptionTitle($widget_parms);
$client = \SetInspect\ClassHelpers\CurrentClient::getClient();
if(!$client instanceof \SetInspect\Eloquent\Models\Client){
$this->setWidgetTitle($instance->widget->title . ' (' . $title_parms . ' ' . $title .')');
return NULL;
}
$date_range = $this->getRangeFromParam();
$this->setWidgetTitle($instance->widget->title . ' (' . $title_parms . ' ' . $title .')');
$start_date_three_years_back = $this->sameDayLastYear($date_range->start_date, 3);
$query_this_year = \SetInspect\Eloquent\Models\Appointment::with('appointmentSelectedPricingAttributes')->isBooked()->betweenDateTimes($date_range->start_date, $date_range->end_date);
$previous_appointments = \SetInspect\Eloquent\Models\Appointment::with('appointmentSelectedPricingAttributes')->isBooked()->betweenDateTimes($start_date_three_years_back->format('Y-m-d'), $date_range->start_date);
if(!ADMIN_SITE)
{
$query_this_year->byClient($client->client_id);
$previous_appointments->byClient($client->client_id);
}
$appointments_this_year = $query_this_year->selectRaw("DATE_FORMAT(appointment_datetime, '".$sql_interval."') as appt_date, count(*) as cnt")
->groupBy("appt_date")
->get();
$appointments_per_period_this_year = $this->summarizeData($appointments_this_year);
$previous_appointments = $previous_appointments->selectRaw("DATE_FORMAT(appointment_datetime, '".$sql_interval."') as appt_date, count(*) as cnt")
->groupBy("appt_date")
->get();
$appointments_per_period = $this->summarizeData($previous_appointments);
$main_colors = [];
$main_colors[] = '#71b6f9';
$main_colors[] = 'red';
$main_colors[] = 'orange';
$main_colors[] = 'purple';
$main_labels = [];
$main_labels[] = gmdate('Y', strtotime('-3 YEARS'));
$main_labels[] = gmdate('Y', strtotime('-2 YEARS'));
$main_labels[] = gmdate('Y', strtotime('LAST YEAR'));
$main_labels[] = intval(gmdate('Y'));
$chart_data = array();
$now = new DateTime('now', new DateTimeZone('UTC'));
foreach($appointments_per_period_this_year as $year_date => $this_year_inspections)
{
$y = substr($year_date, 0, 4);
$i = substr($year_date, 4, 2);
$data = new stdClass();
$dto = new DateTime('now', new DateTimeZone('UTC'));
if($widget_interval == 'per_month') {
$dto->setDate($y, $i, '1');
$display = $dto->format('M Y');
} else
{
$dto->setISODate($y, $i);
$display = $dto->format('M d, Y');
}
$inspections_per_period = $this->inspectionsPerPeriod($appointments_per_period, $year_date);
$data->period = $display;
$data->this_year = $this_year_inspections;
$data->last_year = $inspections_per_period[$y - 1];
$data->two_years_back = $inspections_per_period[$y - 2];
$data->three_years_back = $inspections_per_period[$y - 3];
if($y == $now->format('Y')){
$data->three_years_back = $inspections_per_period[$y - 3];
} else {
$data->three_years_back = 0;
}
$data->this_year_label = $y;
$data->last_year_label = $y - 1;
$data->two_years_back_label = $y - 2;
$data->three_years_back_label = $y - 3;
$chart_data[] = $data;
}
if(empty($chart_data))
{
$this->setNoDataContent();
}
else
{
$view_data = [];
$view_data['chart_data'] = $chart_data;
$view_data['data_colors'] = $main_colors;
$view_data['data_labels'] = $main_labels;
$view_data['widget_parms'] = $widget_parms;
$content = $this->load->view('widgets/total_inspections_comparison_content', $view_data, true);
}
if(!isset($content)){
$content = 'No Data Available';
}
return $content;
}