We Keep Coding

new to highchart and stuck with type datetime , data not plot

I am trying to understand from this demo
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-time-series
by changing only data and run it , But it not working , from my understand datetime type it should be millisecond right ?
This test data is select from mysql by using command UNIX_TIMESTAMP(dateTime_Field)*1000
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
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: 'USD to EUR',
data: '[[1015174800000, 62], [1044810000000, 86], [1081011600000, 147], [1110819600000, 177], [1137344400000, 408], [1191258000000, 1612], [1221411600000, 960], [1240160400000, 960], [1291395600000, 6833], [1319043600000, 2952], [1332262800000, 3746], [1366995600000, 5612], [1417971600000, 8662], [1442250000000, 6504], [1482166800000, 15010], [1512838800000, 8168], [1526662800000, 10439], [1559581200000, 33594], [1580922000000, 22307], [1614186000000, 25955]]'
}]
});
.highcharts-figure,
.highcharts-data-table table {
min-width: 360px;
max-width: 800px;
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/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Highcharts has extensive support for time series, and will adapt
intelligently to the input data. Click and drag in the chart to zoom in
and inspect the data.
</p>
</figure>

Your data structure looks correct, but you need to use an array instead of a string. You can use JSON.parse to convert.
series: [{
type: 'area',
name: 'USD to EUR',
data: JSON.parse('[[1015174800000, 62], [1044810000000, 86], ...]')
}]
Live demo: https://jsfiddle.net/BlackLabel/w9vfut1k/
API Reference: https://api.highcharts.com/highcharts/series.area.data

How to show two Plotly charts side-by-side in 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>

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);
});

How to edit the html of a highchart label?

I have a highchart pie chart which have the labels with the following format:
{point.name} <div class="pct">{point.percentage:.2f}%</div>
But unfortunatly, the div is deleted when the labels are loaded.
There is any way to apply the class so the percentajes got the same apperance independently of the style of the label?
Here is the jsfiddle where you can try: http://jsfiddle.net/69x7a/5/
HTML
<div id="container" style="width: 100%; height: 400px;"></div>
CSS
.pct {
color: blue;
font-size: 8px;
}
JS
$(function () {
$('#container').highcharts({
plotOptions: {
pie: {
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name} <div class="pct">{point.percentage:.2f}%</div>'
}
}
},
series: [{
type: 'pie',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
dataLabels: {
style: {
color: "#ff0000",
fontFamily: 'serif',
fontSize: '17px'
}
}
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});

Seems class is removed, but you can do this:
format: '<b >{point.name}</b>:<span style="color: blue;font-size: 8px;"> {point.percentage:.1f}%</span>