How to show two Plotly charts side-by-side in JavaScript - javascript

I want to have two Plotly charts appear next to one another on the same line. Presently one chart appears above the other.
This is my JavaScript code for the two graphs:
var barData = [
{
x: x_names,
y: y_data,
text: y_names,
marker: { color: 'rgba(202,210,211,.90)' },
type: 'bar',
orientation: 'v',
width: 0.8,
options: { offset: true }
}];
var barLayout = {
title: "<b>Arrears Balance Managed by CSM</b>",
showlegend: false,
xaxis: { tickangle: 45, zeroline: true },
yaxis: { gridwidth: 1, zeroline: true },
height: 400,
width: 500,
};
Plotly.newPlot('bar', barData, barLayout);
var donutData = [{
labels: y1_names,
values: x1_data,
hole: .4,
type: "pie"
}];
var donutLayout = {
height: 400,
width: 500,
margin: {"t": 0, "b": 0, "l": 0, "r": 0},
showlegend: true
}
Plotly.newPlot('pie', donutData, donutLayout);
The following is from my html document:
<h3 class='display-4'>Graphs</h3>
<div class="col-md-6">
<div id="bar">
</div>
<div class="col-md-6">
<div id="pie">
</div>
Is there a way to get the two charts to line up next to one another?
Thanks in advance for your help.

If you are using a modern browser with your web page. I suggest you use the following CSS: display: flex;. Here is a link to a good guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can also see the example I made in the code snippet:
.graph-container {
display: flex;
}
#bar {
flex: 1;
width: 50px;
height: 50px;
background-color: #FF0000;
}
#pie {
flex: 1;
width: 50px;
height: 50px;
background-color: #0000FF;
}
<h3 class='display-4'>Graphs</h3>
<div class='graph-container'>
<div id="bar"></div>
<div id="pie"></div>
</div>

Related

Jump Line charts in High Charts

I am using high charts https://www.highcharts.com/ for making a combination chart of Jump line and Column chart. High charts do not have such type for jump line charts . Can anyone have better solution?
How can I integrate jump line chart with column chart using high charts ?
This is what I need to make ...
Combo Chart
Here's the code I am using
Highcharts.chart("container", {
title: {
text: "Combination chart"
},
plotOptions: {
column: {
borderRadius: 5
},
series: {
marker: {
enabled: false
}
}
},
xAxis: {
categories: ["PU", "EK", "EY", "BR", "MS", "DL", "JL", "BA", "NZ", "CV"]
},
labels: {
items: [
{
// html: 'Total fruit consumption',
style: {
left: "50px",
top: "18px",
color:
// theme
(Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color) ||
"black"
}
}
]
},
series: [
{
// max:0,
pointWidth: 7,
type: "column",
name: "TP",
lineWidth: 8,
data: [10, 45, 15, 95, 10, 100, 75, 20, 66, 55]
},
{
type: "column",
name: "1S",
pointWidth: 7,
data: [13, 25, 50, 75, 100, 60, 25, 50, 75, 100],
// yAxis: 1
},
{
type: "column",
name: "1A",
pointWidth: 7,
data: [13, 20, 50, 75, 100, 40, 28, 51, 95, 100],
// yAxis: 1
},
{
type: "line",
name: "LYTP",
data: [10,10,null,80,80,null,90,90,null,103,103],
// dashStyle: "longdash",
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[1],
fillColor: "lightblue"
}
},
{
// type: 'pie',
// name: 'Total consumption',
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}
]
});
.highcharts-strong {
font-weight: bold;
}
.highcharts-figure, .highcharts-data-table table {
min-width: 320px;
max-width: 600px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/timeline.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Timeline charts are used to place events on a time axis,
such as this example showing the major space exploration
events from 1951 to 1975.
</p>
</figure>
There is no a series in Highcharts which perfectly meets your requirements in this case, but you can easily create such. It is enough to slightly modify the column series:
(function(H) {
H.seriesType('jump-line', 'column', {
height: 6
}, {
translate: function() {
H.seriesTypes.column.prototype.translate.apply(this);
this.points.forEach(function(point) {
point.shapeArgs.height = this.options.height;
}, this);
}
});
}(Highcharts));
Highcharts.chart('container', {
...,
series: [..., {
type: 'jump-line',
pointPadding: 0,
grouping: false,
data: [4, 4, 4]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/x3rtdzc0/
API Reference:
https://api.highcharts.com/class-reference/Highcharts#.seriesType
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

Chart.JS - Tooltips - Issue: 3 data points, all three individual tooltips showing for each data point

I have a small dashboard I'm making for our group and users want to hover over the bar graph to get the definitions for different stages of implementation. I've got the hovering part to work, but I'm clearing missing something. All three tooltips show for each data point. I have three data points: No implementation, pre-implementation, and implementation/sustainment. Therefore, I have three definitions. However, all three definitions are showing for one data point. Example: hovering over "No implementation" someone sees "No Implementation Definition", "Pre-Implementation Definition', and "Implementation Definition." It should just should just show "No Implementation Definition."
I'm sure it's an easy fix and something I'm just overlooking. Any help is appreciated. Here's the codepen and further down is my code. Codepen: https://codepen.io/tenebris_silentio/pen/GRZPedx
</head>
<body>
<div class="container">
<main>
<div class="dashboard-container">
<div class="card-1">
<h4 class="chart-lbl">
<h4> Title 1<h4>
</h4>
<div class="divider">
</div>
<div class="doughnut-chart-container">
<canvas class="doughnut-chart" id="doughnut">
</canvas>
</div>
</div>
<div class="card-2">
<h4 class="chart-lbl">
<h4>Title 2</h4>
</h4>
<div class="divider">
</div>
<div class="pie-chart-container">
<canvas class="pie-chart" id="pie">
</canvas>
</div>
</div>
<div class="card-3">
<h4 class="chart-lbl">
<h4>Implementation stage at end of projects</h4>
</h4>
<div class="divider">
</div>
<div class="bar-chart-container">
<canvas class="bar-chart" id="bar">
</canvas>
</div>
</div>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js">
</script>
<script src="js/generate_chart.js">
</script>
</body>
</html>
<style>
:root {
--grey-d1: #585858;
--grey-d2: #F4F4F4;
--grey-d3: #000000;
--red-1: #F2B8D1;
--red-2: #F04B92;
--red-3: #EB1E77;
--red-4: #AD1257;
--white: #FFFFFF;
--blue: #329EF4;
--grey: #eeeeee;
}
html,
body {
font-family: sans-serif;
height: 100%;
background-color: var(--grey);
}
.card-1,
.card-2,
.card-3 {
background-color: white;
border-radius: 15px;
box-shadow: 2px 2px 5px 2px #D7D7D7;
}
.chart-lbl {
margin: 5px;
color: var(--grey-d3);
opacity: 0.8;
}
h4 {
font-size: 16px;
font-weight: bold;
}
.divider {
background-color: var(--grey-d2);
height: 1px;
margin: auto;
width: 70%;
}
.container {
margin: 5px auto;
}
.dashboard-container {
display: grid;
grid-template: 33% / 100%;
grid-gap: 10px;
}
.divider + div {
padding: 15px;
height: calc(100% - 41px);
}
#media only screen and (min-width: 220px) {
.card-1,
.card-2,
.card-3 {
border-radius: 8px;
}
.card-1 {
grid-row: 1 / 3;
}
.card-2 {
grid-row: 3 / 5;
}
.card-3 {
grid-row: 5 / 7;
}
}
#media only screen and (min-width: 792px) {
.dashboard-container {
grid-template: 19% 19% 19% 10% 10% 10% / repeat(2, 50%);
}
.card-1 {
grid-column: 1 / 2;
grid-row: 1 / 3;
}
.card-2 {
grid-column: 2 / 3;
grid-row: 1 / 3;
}
.card-3 {
grid-column: 1 / 3;
grid-row: 3 / 7;
}
}
#media only screen and (min-width: 1100px) {
.dashboard-container {
grid-template: repeat(5, 1fr) / repeat(11, 1fr);
grid-gap: 8px;
margin: 0;
padding: 5px;
}
.card-1 {
grid-column: 1 / 6;
grid-row: 1 / 3;
}
.card-2 {
grid-column: 1 / 6;
grid-row: 3 / 5;
}
.card-3 {
grid-column: 6 / 12;
grid-row: 1 / 5
}
.container {
max-width: 1270px;
}
}
#media screen and (min-width: 1200px) {
.dashboard-container {
max-width: 1500px;
}
}
</style>
<script>
var doughnut = document.getElementById('doughnut');
var doughnutConfig = new Chart(doughnut, {
type: 'horizontalBar',
data: {
labels: ['data-1', 'data-2', 'data-3', 'data-4'],
datasets: [{
label: '# of data',
data: [11, 30, 20, 1],
backgroundColor: ['rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)'],
borderWidth: 1
}]
},
options: {
legend: {
display: false,
},
responsive: true, // Instruct chart js to respond nicely.
maintainAspectRatio: true, // Add to prevent default behaviour of full-width/height
}
});
//pie chart
var pie = document.getElementById('pie');
var doughnutConfig = new Chart(pie, {
type: 'horizontalBar',
data: {
labels: ['d1', 'd2', 'd3', 'd4', 'd5', 'd6'],
datasets: [{
label: '# of data',
data: [11, 30, 20, 14, 11, 3],
backgroundColor: ['rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)'],
borderWidth: 1
}]
},
options: {
legend: {
display: false,
},
responsive: true, // Instruct chart js to respond nicely.
maintainAspectRatio: true, // Add to prevent default behaviour of full-width/height
}
});
//bar chart
var bar = document.getElementById('bar');
var barConfig = new Chart(bar, {
type: 'bar',
data: {
labels: ['Implementation not part of objectives', 'Pre-Implementation', 'Implementation/Sustainment'],
datasets: [{
label: '# of data',
data: [30, 25, 20],
info: [
['No Implementation Definition', 'Pre-Implementation Definition', 'Implementation Definition'],
],
backgroundColor: ['rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)'],
borderWidth: 1
}]
},
options: {
tooltips: {
callbacks: {
title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
label: (tooltipItems, data) => data.datasets[tooltipItems.datasetIndex].label + ' ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index],
footer: (tooltipItems, data) => ['', 'Description:'].concat(data.datasets[tooltipItems[0].datasetIndex].info)
}
},
legend: {
display: false,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
responsive: true, // Instruct chart js to respond nicely.
maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
}
})
</script>
You have info as array of array .Instead simply have [ ] single array and then get info array for individual tootltip like this data.datasets[tooltipItems[0].datasetIndex].info[tooltipItems[0].index].
Demo code :
//bar chart
var bar = document.getElementById('bar');
var barConfig = new Chart(bar, {
type: 'bar',
data: {
labels: ['Implementation not part of objectives', 'Pre-Implementation', 'Implementation/Sustainment'],
datasets: [{
label: '# of data',
data: [30, 25, 20],
info: [
'No Implemention Definition', 'Pre-Implementation Definition', 'Implementation Definition'
],//simply have array
backgroundColor: ['rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)'],
borderWidth: 1
}]
},
options: {
tooltips: {
callbacks: {
title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
label: (tooltipItems, data) => data.datasets[tooltipItems.datasetIndex].label + ' ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index],
footer: (tooltipItems, data) => 'Description:' + (data.datasets[tooltipItems[0].datasetIndex].info[tooltipItems[0].index])
}
},
legend: {
display: false,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
responsive: true, // Instruct chart js to respond nicely.
maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
}
})
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<body>
<div class="container">
<main>
<div class="dashboard-container">
<div class="card-3">
<h4 class="chart-lbl">
<h4>Implementation stage at end of projects</h4>
</h4>
<div class="divider">
</div>
<div class="bar-chart-container">
<canvas class="bar-chart" id="bar">
</canvas>
</div>
</div>
</div>
</main>
</div>

How to remove left and right padding from the canvas/chart?

At the left and right side of the white container, you can see the graph isn't touching entirely on either side, there's a small amount of padding, and I cannot remove it at all.
I tried setting the layout.padding.left to a negative value, but that had no affect, however positive value does move the chart inward, same applies for top and bottom padding.
The only solution that I came up with was adding another div inside the container, and making the canvas width bigger and then using a left negative margin position it, making the line touch the .container corners. Like this jsfiddle but it's only a temporary solution.
JSFIDDLE
var options = {
type: 'line',
data: {
labels: ['', 'november', 'december', 'january', 'february', 'march', 'may', ''],
datasets: [{
data: [80, 100, 100, 115, 119, 105, 100, 90],
pointRadius: [0, 5, 5, 5, 5, 5, 5 , 0],
pointHoverRadius: [0, 7, 7, 7, 7, 7, 7, 0],
borderColor: '#3ca2e0',
backgroundColor: 'rgba(60, 162, 224, .1)',
lineTension: 0.6,
// points
pointBackgroundColor: '#3ca2e0',
pointHoverBackgroundColor: '#3ca2e0',
pointBorderColor: '#ffffff',
pointHoverBorderColor: '#ffffff',
pointBorderWidth: 2.5,
pointHitRadius: 10,
radius: 5,
borderWidth: 2.5
}],
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
display: false,
},
gridLines: {
drawBorder: false,
display: false,
drawTicks: false
}
}],
xAxes: [{
gridLines: {
drawBorder: false,
display: false
},
ticks:{
fontColor: '#858585'
}
}]
},
layout: {
padding: {
top: 10,
}
}
},
}
var ctx = document.getElementById('chartJSContainer');
new Chart(ctx, options);
body { background-color: #1c2128 }
.container {
width: 500px;
background-color: #ffffff;
margin: 20px auto;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<body>
<div class="container">
<canvas id="chartJSContainer" width="500" height="200"></canvas>
</div>
</body>
One solution would be to use a second container.
The canvas seems to resize based on its parent width.
<body>
<div class="container">
<div class="canvas-container">
<canvas id="chartJSContainer" width="500" height="200"></canvas>
</div>
</div>
</body>
* {
padding: 0;
margin: 0;
}
body {
background-color: #1c2128;
}
.container {
width: 490px;
overflow: hidden;
margin: 20px auto;
}
.canvas-container {
width: 500px;
background-color: #ffffff;
height: 200px;
margin-left: -5px;
}

How to load geojson file from local data in Highmaps?

I'm trying to create a mapping website for my thesis. I got this sample from high-maps, and it works.
// Prepare random data
var data = [
['DE.SH', 728],
['DE.BE', 710],
['DE.MV', 963],
['DE.HB', 541],
['DE.HH', 622],
['DE.RP', 866],
['DE.SL', 398],
['DE.BY', 785],
['DE.SN', 223],
['DE.ST', 605],
['DE.NW', 237],
['DE.BW', 157],
['DE.HE', 134],
['DE.NI', 136],
['DE.TH', 704],
['DE.', 361]
];
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=germany.geo.json&callback=?', function (geojson) {
// Initiate the chart
Highcharts.mapChart('container', {
title: {
text: 'GeoJSON in Highmaps'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
tickPixelInterval: 100
},
series: [{
data: data,
mapData: geojson,
joinBy: ['code_hasc', 0],
keys: ['code_hasc', 'value'],
name: 'Random data',
states: {
hover: {
color: '#a4edba'
}
},
dataLabels: {
enabled: true,
format: '{point.properties.postal}'
}
}]
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px"></div>
I have a map file which is located in my local data, so I want to change the existing map with mine and also change the random data. I try to change the $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=germany.geo.json&callback=?', function (geojson) with $.getJSON('3312kec.geojson', function (geojson).
// Prepare random data
var data = [
['010', 728],
['020', 710],
['030', 963],
['040', 541],
['050', 622],
['060', 866],
['070', 398],
['080', 785],
['090', 223],
['100', 605],
['110', 237],
['120', 157],
['130', 134],
['140', 136],
['150', 704],
['160', 398],
['170', 785],
['180', 223],
['190', 605],
['200', 237],
['201', 157],
['210', 134],
['220', 136],
['230', 704],
['240', 361]
];
$.getJSON('3312kec.geojson', function (geojson) {
// Initiate the chart
Highcharts.mapChart('container', {
title: {
text: 'GeoJSON in Highmaps'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
tickPixelInterval: 100
},
series: [{
data: data,
mapData: geojson,
joinBy: ['code_hasc', 0],
keys: ['code_hasc', 'value'],
name: 'Random data',
states: {
hover: {
color: '#a4edba'
}
},
dataLabels: {
enabled: true,
format: '{point.properties.postal}'
}
}]
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px"></div>
I have tried various ways but always failed. Is there someone who can help me?

Export to PDF using Kendo UI (issue with RTL languages)

I am using given code to export html page to pdf by using drawDom method:
$(function(){
$('#ExportToPdf').on("click", function (e) {
var selectedTab = $('.selected-tab').attr("id");
selectedTab = selectedTab.replace("tab-", "#");
var fileName = $(selectedTab).find($('.report-title')).text().replace(' ', '_');
kendo.drawing.drawDOM($(selectedTab))
.then(function (group) {
// Render the result as a PDF file
return kendo.drawing.exportPDF(group, {
paperSize: "auto",
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
});
})
.done(function (data) {
// Save the PDF file
kendo.saveAs({
dataURI: data,
fileName: fileName + ".pdf"
});
});
});
});
But result is given below for Arabic characters
I want this result:
I tried every thing what I get on internet.
Adding different types of fonts for unicode and kendo builtin fonts but all in vein.
This question is 8 months old, so you might have found a solution by now.
I just wanted to share my own solution, which is a bit of a hack, but at least it works for me.
Basically, you want to flip the text in the html using the special command: ‭
For example - ‭ grid.client.name (grid.client.name is just an example, replace with where you store the arabic names. Repeat for each cell that contains arabic text).
You will notice now that the text in the pdf is no longer shrinked - but it actually has the wrong direction now. How to fix this? - well,
you simply reverse the arabic text in the code (so basically we reverse the text twice). An example method to reverse a string:
function reverseString(str) {
var newString = "";
for (var i = str.length - 1; i >= 0; i--) {
newString += str[i];
}
return newString;
}
Apply this to all of your data that contains arabic text.
If you've done both of these things, it should now appear correctly after exporting to pdf.
Good Luck.
Here is KENDO UI tutorial and it works fine for me.Can you rewrite your code by analyze this code? If the problem is still continue then we try to find solution again.
<script>
// Import DejaVu Sans font for embedding
// NOTE: Only required if the Kendo UI stylesheets are loaded
// from a different origin, e.g. cdn.kendostatic.com
kendo.pdf.defineFont({
"DejaVu Sans" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans.ttf",
"DejaVu Sans|Bold" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
"DejaVu Sans|Bold|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
"DejaVu Sans|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
"WebComponentsIcons" : "https://kendo.cdn.telerik.com/2017.1.223/styles/fonts/glyphs/WebComponentsIcons.ttf"
});
</script>
<!-- Load Pako ZLIB library to enable PDF compression -->
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/pako_deflate.min.js"></script>
<script>
$(document).ready(function() {
$(".export-pdf").click(function() {
// Convert the DOM element to a drawing using kendo.drawing.drawDOM
kendo.drawing.drawDOM($(".content-wrapper"))
.then(function(group) {
// Render the result as a PDF file
return kendo.drawing.exportPDF(group, {
paperSize: "auto",
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
});
})
.done(function(data) {
// Save the PDF file
kendo.saveAs({
dataURI: data,
fileName: "HR-Dashboard.pdf",
proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
});
});
});
$(".export-img").click(function() {
// Convert the DOM element to a drawing using kendo.drawing.drawDOM
kendo.drawing.drawDOM($(".content-wrapper"))
.then(function(group) {
// Render the result as a PNG image
return kendo.drawing.exportImage(group);
})
.done(function(data) {
// Save the image file
kendo.saveAs({
dataURI: data,
fileName: "HR-Dashboard.png",
proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
});
});
});
$(".export-svg").click(function() {
// Convert the DOM element to a drawing using kendo.drawing.drawDOM
kendo.drawing.drawDOM($(".content-wrapper"))
.then(function(group) {
// Render the result as a SVG document
return kendo.drawing.exportSVG(group);
})
.done(function(data) {
// Save the SVG document
kendo.saveAs({
dataURI: data,
fileName: "HR-Dashboard.svg",
proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
});
});
});
var data = [{
"source": "Approved",
"percentage": 237
}, {
"source": "Rejected",
"percentage": 112
}];
var refs = [{
"source": "Dev",
"percentage": 42
}, {
"source": "Sales",
"percentage": 18
}, {
"source": "Finance",
"percentage": 29
}, {
"source": "Legal",
"percentage": 11
}];
$("#applications").kendoChart({
legend: {
position: "bottom"
},
dataSource: {
data: data
},
series: [{
type: "donut",
field: "percentage",
categoryField: "source"
}],
chartArea: {
background: "none"
},
tooltip: {
visible: true,
template: "${ category } - ${ value } applications"
}
});
$("#users").kendoChart({
legend: {
visible: false
},
seriesDefaults: {
type: "column"
},
series: [{
name: "Users Reached",
data: [340, 894, 1345, 1012, 3043, 2013, 2561, 2018, 2435, 3012]
}, {
name: "Applications",
data: [50, 80, 120, 203, 324, 297, 176, 354, 401, 349]
}],
valueAxis: {
labels: {
visible: false
},
line: {
visible: false
},
majorGridLines: {
visible: false
}
},
categoryAxis: {
categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
line: {
visible: false
},
majorGridLines: {
visible: false
}
},
chartArea: {
background: "none"
},
tooltip: {
visible: true,
format: "{0}",
template: "#= series.name #: #= value #"
}
});
$("#referrals").kendoChart({
legend: {
position: "bottom"
},
dataSource: {
data: refs
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source"
}],
chartArea: {
background: "none"
},
tooltip: {
visible: true,
template: "${ category } - ${ value }%"
}
});
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 15,
group: { field: "ContactTitle" }
},
height: 450,
groupable: true,
sortable: true,
selectable: "multiple",
reorderable: true,
resizable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "ContactName",
template: "<div class=\'customer-name\'>#: ContactName #</div>",
title: "Contact",
width: 200
},{
field: "ContactTitle",
title: "Contact Title",
width: 220
},{
field: "Phone",
title: "Phone",
width: 160
},{
field: "CompanyName",
title: "Company Name"
},{
field: "City",
title: "City",
width: 160
}
]
});
});
</script>
<style>
/*
Use the DejaVu Sans font for display and embedding in the PDF file.
The standard PDF fonts have no support for Unicode characters.
*/
.k-widget {
font-family: "DejaVu Sans", "Arial", sans-serif;
font-size: .9em;
}
</style>
<style>
.export-app {
display: table;
width: 100%;
height: 750px;
padding: 0;
}
.export-app .demo-section {
margin: 0 auto;
border: 0;
}
.content-wrapper {
display: table-cell;
vertical-align: top;
}
.charts-wrapper {
height: 250px;
padding: 0 0 20px;
}
#applications,
#users,
#referrals {
display: inline-block;
width: 50%;
height: 240px;
vertical-align: top;
}
#applications,
#referrals {
width: 24%;
height: 250px;
}
.customer-photo {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
background-size: 40px 44px;
background-position: center center;
vertical-align: middle;
line-height: 41px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 41px;
padding-left: 10px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/pdf-export/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="box wide hidden-on-narrow">
<h4>Export page content</h4>
<div class="box-col">
<button class='export-pdf k-button'>Export as PDF</button>
</div>
<div class="box-col">
<button class='export-img k-button'>Export as Image</button>
</div>
<div class="box-col">
<button class='export-svg k-button'>Export as SVG</button>
</div>
</div>
<div class="demo-section k-content export-app wide hidden-on-narrow">
<div class="demo-section content-wrapper wide">
<div class="demo-section charts-wrapper wide">
<div id="users"></div>
<div id="applications"></div>
<div id="referrals"></div>
</div>
<div id="grid"></div>
</div>
</div>
<div class="responsive-message"></div>
</div>
</body>
</html>
I made temporary solution that I convert the report into canvas then I exported to pdf. I html2canvas to export html in to canvas. if any one find another solution please let me know.
$('#ExportToPdf').on("click", function (e) {
html2canvas(document.querySelector("#widget-47")).then(canvas => {
$("#widget-47").hide();
$("#widget-47").parent().append(canvas);
});
setTimeout(function () {
kendo.drawing.drawDOM($('#kendo-wrapper'))
.then(function (group) {
// Render the result as a PDF file
return kendo.drawing.exportPDF(group, {
paperSize: "auto",
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
});
})
.done(function (data) {
// Save the PDF file
kendo.saveAs({
dataURI: data,
fileName: "report.pdf"
});
$("#widget-47").siblings().remove();
$("#widget-47").show();
});
}, 3000);
});

Categories