added chart export

This commit is contained in:
Akinwale Ariwodola 2017-06-17 10:56:37 +01:00
parent bfc5c40449
commit 4557e395fe
2 changed files with 17 additions and 3 deletions

View file

@ -126,9 +126,14 @@
$this->assign('title', 'Blocks');
$this->start('css');
echo $this->Html->css('/amcharts/plugins/export/export.css');
$this->end();
$this->start('script'); ?>
<script type="text/javascript" src="/amcharts/amcharts.js"></script>
<script type="text/javascript" src="/amcharts/serial.js"></script>
<script type="text/javascript" src="/amcharts/plugins/export/export.min.js"></script>
<script type="text/javascript">
var chart;
var chartData = [];
@ -208,7 +213,7 @@
bulletBorderThickness: 1,
bulletBorderAlpha: 1,
bulletColor: '#ffffff',
bulletSize: 6,
bulletSize: 5,
useLineColorForBulletBorder: true,
lineColor: '#1e88e5',
hideBulletsCount: 101,
@ -228,7 +233,7 @@
bulletBorderThickness: 1,
bulletBorderAlpha: 1,
bulletColor: '#ffffff',
bulletSize: 6,
bulletSize: 5,
useLineColorForBulletBorder: true,
lineColor: '#00e676',
balloonText: '$[[AvgUSD]]',
@ -277,6 +282,12 @@
return formatted;
}
},
export: {
enabled: true,
fileName: 'lbry-block-size-chart',
position: 'bottom-right',
divId: 'chart-export'
}
});
@ -316,7 +327,7 @@
chart.categoryAxis.dateFormats[4].format = isHourly ? 'DD MMM' : 'DD';
chart.chartCursor.categoryBalloonDateFormat = isHourly ? 'D MMM HH:NN ' : 'D MMM YYYY';
chart.categoryAxis.gridCount = gridCount;
chart.chartScrollbar.gridCount = periodGridCounts[dataPeriod];
chart.chartScrollbar.gridCount = gridCount;
chart.dataProvider = chartData;
chart.validateNow();
chart.validateData();
@ -366,6 +377,7 @@
<a href="#" title="1 year" data-period="1y">1y</a>
</div>
<div id="block-size-chart" class="chart"></div>
<div id="chart-export" class="btn-chart-export"></div>
</div>
<div class="all-blocks">

View file

@ -164,10 +164,12 @@ footer .content .page-time { position: absolute; right: 12px; bottom: 0px; paddi
.all-blocks { width: 1200px; margin: 0 auto; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 36px; position: relative; cursor: default }
.all-blocks h3 { font-weight: 300; margin: 0 0 12px 0 }
.amcharts-export-menu { font-size: 80% }
.block-size-chart-container { width: 1200px; height: 500px; margin: 0 auto 48px auto; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 24px 36px; position: relative; cursor: default; overflow: hidden }
.block-size-chart-container h3 { font-weight: 300; margin: 0 0 12px 0; line-height: 26px }
.block-size-chart-container .load-progress { position: absolute; top: 0; left: 0; width: 25%; height: 3px; background: #1e88e5; animation: indeterminate 4s linear infinite; }
.block-size-chart-container .chart { width: 100%; height: 414px; border: 1px solid #d9d9d9 }
.block-size-chart-container .btn-chart-export { position: absolute; right: 40px; bottom: 36px }
.block-size-chart-container .block-size-data-links { position: absolute; right: 48px; top: 28px; font-size: 80% }
.block-size-chart-container .block-size-data-links a { display: inline-block; width: 40px; text-align: right }
.block-size-chart-container .block-size-data-links a.active:link,