<div class="e-chart">
<div class="e-chart__pie e-chart__pie-reporting">
<div id="pie"></div></div>
<div class="e-chart__info e-chart__info-reporting">
<div class="e-chart__title">
Opened
</div>
<div class="e-chart__value">
<span class="text-color-opened">
37.0%
</span>
<small>
(3,918)
</small>
</div>
</div>
<div class="e-chart__info e-chart__info-reporting">
<div class="e-chart__title">
Opened on mobile
</div>
<div class="e-chart__value">
<span class="text-color-mobile_opened">
11.0%
</span>
<small>
(1,165)
</small>
</div>
</div>
</div>
<div class="e-chart">
<div class="e-chart__pie e-chart__pie-reporting">
<div id="pie"></div>
</div>
<div class="e-chart__info e-chart__info-reporting">
<div class="e-chart__title">Opened</div>
<div class="e-chart__value"><span class="text-color-opened">37.0%</span><small>(3,918)</small></div>
</div>
<div class="e-chart__info e-chart__info-reporting">
<div class="e-chart__title">Opened on mobile</div>
<div class="e-chart__value"><span class="text-color-mobile_opened">11.0%</span><small>(1,165)</small></div>
</div>
</div><div class="e-col-12">
<div class="e-box e-box-chart e-box-nopadding">
<div class="e-row__height">
<div class="e-col-10 e-col-height-bordered e-col-height">
<div class="e-row">
<div class="e-col-12">
<div class="e-field"></div></div></div>
<div class="e-field">
<div class="e-row">
<div class="e-col-12">
<div class="float-right e-buttongroup e-buttongroup-sticky">
<input id="js-chart-mode-revenue" type="radio" value="revenue" name="10" class="e-buttonradio">
<label id="js-chart-mode-label-revenue" for="js-chart-mode-revenue" class="e-btn e-btn-small">
Revenue $
</label>
<input id="js-chart-mode-total" type="radio" value="total" name="10" checked class="e-buttonradio">
<label id="js-chart-mode-label-total" for="js-chart-mode-total" class="e-btn e-btn-small">
Total %
</label>
<input id="js-chart-mode-rate" type="radio" value="rate" name="10" class="e-buttonradio">
<label id="js-chart-mode-label-rate" for="js-chart-mode-rate" class="e-btn e-btn-small">
Rate %
</label>
</div>
</div>
</div>
</div>
<div class="e-row">
<div class="e-col-12">
<div id="chartcontainer" data-highcharts-chart="0" class="trends-chart multi-campaign aggregated">
<e-spinner></e-spinner>
</div>
</div>
</div>
</div>
<div class="e-col-2 e-col-height e-col-bottom e-col-nopadding e-col-height-relative">
<fieldset class="e-fieldset e-fieldset-chart e-fieldset-legend-top">
<div class="e-row legend-group">
<div class="e-col-12">
<div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
<input id="legend-impressions" type="checkbox" checked="checked" data-id="0" class="e-checkbox e-checkbox-impressions">
<label title="Impressions" for="legend-impressions">
Impressions
</label>
<div class="e-fieldset__item__indicator background-color-impressions"></div></div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input id="legend-reach" type="checkbox" data-id="1" class="e-checkbox">
<label title="Reach" for="legend-reach">
Reach
</label>
<div class="e-fieldset__item__indicator"></div></div>
<div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
<input id="legend-frequency" type="checkbox" data-id="2" checked class="e-checkbox e-checkbox-frequency">
<label title="Frequency" for="legend-frequency">
Frequency
</label>
<div class="e-fieldset__item__indicator background-color-frequency"></div></div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input id="legend-socialreach" type="checkbox" data-id="3" class="e-checkbox">
<label title="Social reach" for="legend-socialreach">
Social reach
</label>
<div class="e-fieldset__item__indicator"></div></div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input id="legend-clicks" type="checkbox" data-id="4" class="e-checkbox">
<label title="Clicks" for="legend-clicks">
Clicks
</label>
<div class="e-fieldset__item__indicator"></div></div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input id="legend-likes" type="checkbox" data-id="5" class="e-checkbox">
<label title="Likes" for="legend-likes">
Likes
</label>
<div class="e-fieldset__item__indicator"></div></div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input id="legend-comments" type="checkbox" data-id="6" class="e-checkbox">
<label title="Comments" for="legend-comments">
Comments
</label>
<div class="e-fieldset__item__indicator"></div></div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input id="legend-pageclick" type="checkbox" data-id="7" class="e-checkbox">
<label title="Page click" for="legend-pageclick">
Page click
</label>
<div class="e-fieldset__item__indicator"></div></div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input id="legend-conversions" type="checkbox" data-id="8" class="e-checkbox">
<label title="Conversions" for="legend-conversions">
Conversions
</label>
<div class="e-fieldset__item__indicator"></div></div></div></div>
</fieldset></div></div></div></div>
<script type="text/javascript">
$(function () { var fullWidth = 125; var ringWidth = 25; $('.legend-group .e-fieldset__item').on('click', function(event) { event.preventDefault(); var $input = $($(this).children()[0]); var type = $input.attr('id').replace('legend-', ''); var id = $input.data('id'); var checked = $input.is(':checked'); var $indicator = $input.next().next(); var $field = $(this); var chart = $('#chartcontainer').highcharts(); var series = chart.series[id]; if(checked) { series.hide(); $input.prop('checked', false); $input.removeClass('e-checkbox-' + type); $indicator.removeClass('background-color-' + type); $field.removeClass('e-fieldset__item-chart-active'); } else { series.show(); $input.prop('checked', true); $input.addClass('e-checkbox-' + type); $indicator.addClass('background-color-' + type); $field.addClass('e-fieldset__item-chart-active'); } }); $('#chartcontainer').highcharts({ loading: false, series: [], title: {text: ""}, exporting: { enabled: false }, credits: { enabled: false }, legend: { enabled: false }, lang: { loading: 'Loading' }, plotOptions: { line: { lineWidth: 1.75, marker: { symbol: 'circle', lineColor: '#FFFFFF', lineWidth: 3, enabled: true }, series: { states: { hover: { lineWidth: 2.5 } }, stickyTracking: false, cursor: 'pointer' } } }, tooltip: { crosshairs: { color: "#DFE5DD", width: 1 }, useHTML: true, shared: true, backgroundColor: 'rgba(255, 255, 255, .9)', borderRadius: 0, style: { width: "250px" }, borderWidth: 0 }, xAxis: { lineColor: "#EFEFEF", tickColor: "#EFEFEF", tickLength: 5, categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: 'Total #' }, gridLineColor: "#EFEFEF", floor: 0, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, series: [{ name: 'Impressions', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], color: '#65b964' }, { name: 'Reach', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5], visible: false, color: '#86da85' }, { name: 'Frequency', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0], color: '#d86761' }, { name: 'Social reach', data: [-3.9, -1.6, 2.5, 3.4, 6.5, 10.0, 13.6, 11.9, 10.3, 9.8, 4.3, 2.0], visible: false, color: '#5fce5e' }, { name: 'Clicks', data: [0.9, 1.6, 2.5, 4.4, 8.5, 10.9, 14.6, 12.9, 13.3, 7.0, 6.9, 1.8], visible: false, color: '#4a4eb2' }, { name: 'Likes', data: [2.9, 3.6, 4.5, 5.4, 5.9, 8.2, 12.6, 16.9, 15.3, 9.1, 1.9, 0.1], visible: false, color: '#3b3e8e' }, { name: 'Comments', data: [1.9, 2.6, 3.1, 10.4, 12.5, 16.0, 18.1, 17.5, 14.1, 6.0, 3.5, 1.6], visible: false, color: '#eca24b' }, { name: 'Page click', data: [-2.9, 4.6, 8.5, 10.4, 14.5, 20.0, 19.6, 13.9, 4.3, 2.0, 1.9, 0.2], visible: false, color: '#6e71c2' }, { name: 'Social reach', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8], visible: false, color: '#7f584a' }] }); $('#pie').highcharts({ series: [ { "size": fullWidth, "innerSize": fullWidth - ringWidth, "data": [ { "y": 37.039137833239, "color": window.e.variables.palette_reporting.opened }, { "y": 62.960862166761, "color": "#E2F3DD" } ] }, { "size": fullWidth - ringWidth, "innerSize": fullWidth - ringWidth * 2, "data": [ { "y": 11.01, "color": window.e.variables.palette_reporting.mobile_opened }, { "y": 88.99, "color": "#EBFBE6" } ] } ], title: { text: '' }, yAxis: { title: { text: '' } }, chart: { type: 'pie' }, exporting: { enabled: false }, credits: { enabled: false }, legend: { enabled: false }, tooltip: { enabled: false }, plotOptions: { pie: { states: { hover: { enabled: false } }, dataLabels: { enabled: false }, borderWidth: 0, shadow: false } } });});
</script>
<div class="e-col-12">
<div class="e-box e-box-chart e-box-nopadding">
<div class="e-row__height">
<div class="e-col-10 e-col-height-bordered e-col-height">
<div class="e-row">
<div class="e-col-12">
<div class="e-field"></div>
</div>
</div>
<div class="e-field">
<div class="e-row">
<div class="e-col-12">
<div class="float-right e-buttongroup e-buttongroup-sticky">
<input id="js-chart-mode-revenue" type="radio" value="revenue" name="10" class="e-buttonradio">
<label id="js-chart-mode-label-revenue" for="js-chart-mode-revenue" class="e-btn e-btn-small">Revenue $</label>
<input id="js-chart-mode-total" type="radio" value="total" name="10" checked="" class="e-buttonradio">
<label id="js-chart-mode-label-total" for="js-chart-mode-total" class="e-btn e-btn-small">Total %</label>
<input id="js-chart-mode-rate" type="radio" value="rate" name="10" class="e-buttonradio">
<label id="js-chart-mode-label-rate" for="js-chart-mode-rate" class="e-btn e-btn-small">Rate %</label>
</div>
</div>
</div>
</div>
<div class="e-row">
<div class="e-col-12">
<div id="chartcontainer" data-highcharts-chart="0" class="trends-chart multi-campaign aggregated">
<e-spinner></e-spinner>
</div>
</div>
</div>
</div>
<div class="e-col-2 e-col-height e-col-bottom e-col-nopadding e-col-height-relative">
<fieldset class="e-fieldset e-fieldset-chart e-fieldset-legend-top">
<div class="e-row legend-group">
<div class="e-col-12">
<div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
<input id="legend-impressions" type="checkbox" checked="checked" data-id="0" class="e-checkbox e-checkbox-impressions">
<label title="Impressions" for="legend-impressions">Impressions</label>
<div class="e-fieldset__item__indicator background-color-impressions"></div>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input id="legend-reach" type="checkbox" data-id="1" class="e-checkbox">
<label title="Reach" for="legend-reach">Reach</label>
<div class="e-fieldset__item__indicator"></div>
</div>
<div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
<input id="legend-frequency" type="checkbox" data-id="2" checked="" class="e-checkbox e-checkbox-frequency">
<label title="Frequency" for="legend-frequency">Frequency</label>
<div class="e-fieldset__item__indicator background-color-frequency"></div>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input id="legend-socialreach" type="checkbox" data-id="3" class="e-checkbox">
<label title="Social reach" for="legend-socialreach">Social reach</label>
<div class="e-fieldset__item__indicator"></div>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input id="legend-clicks" type="checkbox" data-id="4" class="e-checkbox">
<label title="Clicks" for="legend-clicks">Clicks</label>
<div class="e-fieldset__item__indicator"></div>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input id="legend-likes" type="checkbox" data-id="5" class="e-checkbox">
<label title="Likes" for="legend-likes">Likes</label>
<div class="e-fieldset__item__indicator"></div>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input id="legend-comments" type="checkbox" data-id="6" class="e-checkbox">
<label title="Comments" for="legend-comments">Comments</label>
<div class="e-fieldset__item__indicator"></div>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input id="legend-pageclick" type="checkbox" data-id="7" class="e-checkbox">
<label title="Page click" for="legend-pageclick">Page click</label>
<div class="e-fieldset__item__indicator"></div>
</div>
<div class="e-fieldset__item e-fieldset__item-chart">
<input id="legend-conversions" type="checkbox" data-id="8" class="e-checkbox">
<label title="Conversions" for="legend-conversions">Conversions</label>
<div class="e-fieldset__item__indicator"></div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var fullWidth = 125;
var ringWidth = 25;
$('.legend-group .e-fieldset__item').on('click', function(event) {
event.preventDefault();
var $input = $($(this).children()[0]);
var type = $input.attr('id').replace('legend-', '');
var id = $input.data('id');
var checked = $input.is(':checked');
var $indicator = $input.next().next();
var $field = $(this);
var chart = $('#chartcontainer').highcharts();
var series = chart.series[id];
if(checked) {
series.hide();
$input.prop('checked', false);
$input.removeClass('e-checkbox-' + type);
$indicator.removeClass('background-color-' + type);
$field.removeClass('e-fieldset__item-chart-active');
} else {
series.show();
$input.prop('checked', true);
$input.addClass('e-checkbox-' + type);
$indicator.addClass('background-color-' + type);
$field.addClass('e-fieldset__item-chart-active');
}
});
$('#chartcontainer').highcharts({
loading: false,
series: [],
title: {text: ""},
exporting: {
enabled: false
},
credits: {
enabled: false
},
legend: {
enabled: false
},
lang: {
loading: 'Loading'
},
plotOptions: {
line: {
lineWidth: 1.75,
marker: {
symbol: 'circle',
lineColor: '#FFFFFF',
lineWidth: 3,
enabled: true
},
series: {
states: {
hover: {
lineWidth: 2.5
}
},
stickyTracking: false,
cursor: 'pointer'
}
}
},
tooltip: {
crosshairs: {
color: "#DFE5DD",
width: 1
},
useHTML: true,
shared: true,
backgroundColor: 'rgba(255, 255, 255, .9)',
borderRadius: 0,
style: {
width: "250px"
},
borderWidth: 0
},
xAxis: {
lineColor: "#EFEFEF",
tickColor: "#EFEFEF",
tickLength: 5,
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Total #'
},
gridLineColor: "#EFEFEF",
floor: 0,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: [{
name: 'Impressions',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
color: '#65b964'
}, {
name: 'Reach',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5],
visible: false,
color: '#86da85'
}, {
name: 'Frequency',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0],
color: '#d86761'
}, {
name: 'Social reach',
data: [-3.9, -1.6, 2.5, 3.4, 6.5, 10.0, 13.6, 11.9, 10.3, 9.8, 4.3, 2.0],
visible: false,
color: '#5fce5e'
}, {
name: 'Clicks',
data: [0.9, 1.6, 2.5, 4.4, 8.5, 10.9, 14.6, 12.9, 13.3, 7.0, 6.9, 1.8],
visible: false,
color: '#4a4eb2'
}, {
name: 'Likes',
data: [2.9, 3.6, 4.5, 5.4, 5.9, 8.2, 12.6, 16.9, 15.3, 9.1, 1.9, 0.1],
visible: false,
color: '#3b3e8e'
}, {
name: 'Comments',
data: [1.9, 2.6, 3.1, 10.4, 12.5, 16.0, 18.1, 17.5, 14.1, 6.0, 3.5, 1.6],
visible: false,
color: '#eca24b'
}, {
name: 'Page click',
data: [-2.9, 4.6, 8.5, 10.4, 14.5, 20.0, 19.6, 13.9, 4.3, 2.0, 1.9, 0.2],
visible: false,
color: '#6e71c2'
}, {
name: 'Social reach',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8],
visible: false,
color: '#7f584a'
}]
});
$('#pie').highcharts({
series: [
{
"size": fullWidth,
"innerSize": fullWidth - ringWidth,
"data": [
{
"y": 37.039137833239,
"color": window.e.variables.palette_reporting.opened
},
{
"y": 62.960862166761,
"color": "#E2F3DD"
}
]
},
{
"size": fullWidth - ringWidth,
"innerSize": fullWidth - ringWidth * 2,
"data": [
{
"y": 11.01,
"color": window.e.variables.palette_reporting.mobile_opened
},
{
"y": 88.99,
"color": "#EBFBE6"
}
]
}
],
title: { text: '' },
yAxis: { title: { text: '' } },
chart: { type: 'pie' },
exporting: { enabled: false },
credits: { enabled: false },
legend: { enabled: false },
tooltip: { enabled: false },
plotOptions: {
pie: {
states: { hover: { enabled: false } },
dataLabels: { enabled: false },
borderWidth: 0,
shadow: false
}
}
});
});
</script>