We Keep Coding

How to render Highcharts graph into user-selected DIV

I have multiple buttons, representing webservices in form of maps and Highcharts graphs, which the user can drag into one of several containers (DIVs) on the page, in which these webservices are then displayed.
It works fine for the map/image-webservices. But it is not clear to me how to make it possible with the Highcharts graphs. I guess I have to indicate somewhere a chart.renderTo("DIVx"), but not sure about that process.
I have setup a fiddle here. For the moment, the graph is being displayed in the DIV "container". But this should disappear, and once the user drags the button "Graph :: XXX" into one of the DIVs, the graph should display there.
The HTML part:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!-- this container should disappear -->
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<!-- buttons -->
<div id="map_npp" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
<h4 style="float: left">Map :: NPP</h4>
</div>
<div id="map_precipitations" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
<h4 style="float: left">Map :: Precipitations</h4>
</div>
<div id="map_temperature" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
<h4 style="float: left">Map :: Temperature</h4>
</div>
<div id="graph_gdp" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
<h4 style="float: left">Graph :: GDP</h4>
</div>
<div id="graph_xxx" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
<h4 style="float: left">Graph :: XXX</h4>
</div>
<br clear="all" />
<!-- dropzone DIVs -->
<div id="dropzone1" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone2" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone3" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone4" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
The javascript/jquery part for the graph:
var csv = "2010/01/01,51.67074582499006,13.789093928493081,-0.0010074468085106377\n" +
"2010/02/01,51.67074582499006,13.789093928493081,0.0024117021276595747\n" +
"2010/03/01,51.67074582499006,13.789093928493081,0.026550000000000004\n" +
"2010/04/01,51.67074582499006,13.789093928493081,0.08252659574468087\n" +
"2010/05/01,51.67074582499006,13.789093928493081,0.12837446808510639\n" +
"2010/06/01,51.67074582499006,13.789093928493081,0.140618085106383\n" +
"2010/07/01,51.67074582499006,13.789093928493081,0.0668787234042553\n" +
"2010/08/01,51.67074582499006,13.789093928493081,0.10335744680851064\n" +
"2010/09/01,51.67074582499006,13.789093928493081,0.08095000000000001\n" +
"2010/10/01,51.67074582499006,13.789093928493081,0.0400159574468085\n" +
"2010/11/01,51.67074582499006,13.789093928493081,0.004214893617021277\n" +
"2010/12/01,51.67074582499006,13.789093928493081,-0.0018680851063829788\n" +
"2011/01/01,51.67074582499006,13.789093928493081,0.0011914893617021279\n" +
"2011/02/01,51.67074582499006,13.789093928493081,0.003752127659574468\n" +
"2011/03/01,51.67074582499006,13.789093928493081,0.027225531914893623"
function extract(csv) {
var rows = csv.split(/\r\n|\n/);
var data;
var series = [];
var serie = {
name: -1,
data: []
};
for (var i = 0; i < rows.length; i++) {
data = rows[i].split(',');
if (serie.name === -1) {
serie.name = data[0].substr(0, 4);
} else {
if (serie.name !== data[0].substr(0, 4)) {
series.push(serie);
serie = {
name: data[0].substr(0, 4),
data: []
};
}
}
serie.data.push(parseFloat(data[3]));
}
series.push(serie);
return series;
}
$(function() {
Highcharts.chart('container', {
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
]
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: extract(csv),
});
});
The javascript/jquery part for the draggable buttons and target DIVs:
//just to know which button is being dragged we will use this variable
var draggingDiv;
function onDragOver(e) {
e.preventDefault();
e.target.classList.add("over-me");
}
function onDragLeave(e) {
e.target.classList.add("static");
e.target.classList.remove("over-me");
}
function onDragStart(e) {
draggingDiv = e.target;
e.target.innerHTML = "<h4>You are Dragging me</h4>";
}
function onDragEnd(e) {
e.target.innerHTML = "<h4>Drag Me into the Box :)</h4>";
e.target.parentElement.classList.add("static");
draggingDiv.innerHTML = "<h4>Dragged once Can't drag me now:)</h4>";
// e.target.innerHTML = "<h4>You Dropped Me In "+e.target.parentElement.id+"</h4>";
}
function onDrop(e) {
e.preventDefault();
e.target.classList.remove("over-me");
//uncommment the below line if want that the button should not be draggable once it has been dropped in a div already
//draggingDiv.draggable=false;
//e.target.appendChild(draggingDiv);/commented as this will take the button to the div but we want it to at the original pposition
//e.target.innerHTML="<span>Please Change My innerHTML or call some function that loads data That handles the graph/map creation in this Div</span>";
if (draggingDiv.id == "map_npp") {
e.target.innerHTML = "<img style='margin-top: 0' src='http://npp.unepgrid.ch/images/wms_fake.png'>";
} else if (draggingDiv.id == "map_precipitations") {
e.target.innerHTML = "<img style='margin-top: 0' src='http://npp.unepgrid.ch/images/wms_fake.png'>";
} else if (draggingDiv.id == "map_temperature") {
e.target.innerHTML = "<img style='margin-top: 0' src='http://npp.unepgrid.ch/images/wms_fake.png'>";
} else if (draggingDiv.id == "graph_gdp") {
e.target.innerHTML = "<img style='margin-top: 0' src='http://npp.unepgrid.ch/images/wms_fake.png'>";
} else if (draggingDiv.id == "graph_xxx") {
e.target.innerHTML = "<img style='margin-top: 0' src='http://npp.unepgrid.ch/images/wms_fake.png'>";
}
}
Thanks for any hints how this could be implemented.

You need to render the chart onDrop event. The container for the chart will be the target of that event. An element in which the chart will be rendered can be set via chart.renderTo property or as a parameter in the chart constructing function - see API.
The example can be found below. I also destroy the previous chart before a new one is created.
var chart;
function onDrop(e) {
e.preventDefault();
e.target.classList.remove("over-me");
if (chart) {
chart.destroy();
}
var options = {
chart: {},
series: [{
data: [1,2,3,4,5]
}]
};
if (draggingDiv.id == "map_npp") {
} else if (draggingDiv.id == "map_precipitations") {
options.chart.type = 'column';
} else if (draggingDiv.id == "map_temperature") {
} else if (draggingDiv.id == "graph_gdp") {
options.series.data = [5,4,3,2,1];
} else if (draggingDiv.id == "graph_xxx") {
options.series.data = [5,4,3,2,1];
options.chart.type = 'column';
}
chart = Highcharts.chart(e.target, options);
}
example: https://jsfiddle.net/1nye1zk7/

Axis Y and X labels in Kendo UI chart

How could I set a horizontal title for X axis and a vertical title for axis Y in Kendo chart ?
For example , for this chart I want to set titles (Month and VISITORS) as in this image -

valueAxis:[{
title: {
text: "My Text X"
}
}],
title:{
text: "My Text Y",
position: "bottom"
}

Thanks for this, it was very helpful when solving my problem, which was similar. I edited the example accordingly: http://dojo.telerik.com/OBOZefEr/2 I've put the entire code snipped below, you're welcome to run it from here.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/bar-charts/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "Site Visitors Stats \n /thousands/"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [56000, 63000, 74000, 91000, 117000, 138000]
}, {
name: "Unique visitors",
data: [52000, 34000, 23000, 48000, 67000, 83000]
}],
valueAxis: {
max: 140000,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto"
},
title: {
text: "VISITORS"
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
majorGridLines: {
visible: false
},
title: {
text: "Month"
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>

Add custom logo to Highchart graphs

Is it possible to add custom logo/images to the graphs?
I have tried to modify the credits label, without luck.
$('#container').highcharts({
credits: {
text: 'remisture.no',
href: 'http://remisture.no',
position: {
align: 'right',
x: -75,
verticalAlign: 'top',
y: 25
},
style: {
color: 'red',
backgroundImage: 'url(https://upload.wikimedia.org/wikipedia/en/thumb/3/3a/Burger_King_Logo.svg/1024px-Burger_King_Logo.svg.png)'
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
Demo: http://jsfiddle.net/remisture/738bnv0b/
Any idea how to approach this?

from their support forum, you can use Renderer.image just as:
$('#container').highcharts({
// your setup
}, function (chart) { // on complete
chart.renderer
.image('//image.com/image.png', 100, 100, 30, 30)
.add();
});
your example with your image: http://jsfiddle.net/738bnv0b/3/

Credits label is only a text and generaly a link to the source of the graph data.
Where do you want to put the logo? Because you're able to put it outside the Highcharts element and position it with css.
Something like that: jsfiddle
<script src="http://code.highcharts.com/highcharts.js"></script>
<div style="position:relative;">
<a style="display: block;" href="http://remisture.no" >
<img style="position:absolute; top: 0; right: 0; z-index: 1;" width="40" src="https://upload.wikimedia.org/wikipedia/en/thumb/3/3a/Burger_King_Logo.svg/1024px-Burger_King_Logo.svg.png" />
</a>
<div id="container" style="height: 400px"></div>
</div>

getting error a.ownerDocument.defaultView is null

I am using jqxwidget. While integrating the widgets I have used jqxgrid , jqxwindow and jqxtabs
When I implement the jqxtabs I face the javascript error a.ownerDocument.defaultView
and my editor stops working.
How can I solve this issue?
I have added following code:
var initWidgets = function (tab) {
switch (tab) {
case 0:
initGrid();
break;
}
}
$('#jqxTabs').jqxTabs({ width: 'auto', height: 'auto'});
I have added my code to submit my form inside the function initGrid.

Have you tried to init the widgets within the jQWidgets Tabs initTabContent function? Example: jQWidgets Tabs Integration with UI Widgets
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>This demo shows how to integrate jqxTabs with other widgets.
</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var initGrid = function () {
var source =
{
datatype: "csv",
datafields: [
{ name: 'Date' },
{ name: 'S&P 500' },
{ name: 'NASDAQ' }
],
url: '../sampledata/nasdaq_vs_sp500.txt'
};
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
$("#jqxGrid").jqxGrid(
{
width: '100%',
height: '84%',
source: dataAdapter,
columns: [
{ text: 'Date', datafield: 'Date', cellsformat: 'd', width: 250 },
{ text: 'S&P 500', datafield: 'S&P 500', width: 150 },
{ text: 'NASDAQ', datafield: 'NASDAQ' }
]
});
}
var initChart = function () {
// prepare the data
var source =
{
datatype: "csv",
datafields: [
{ name: 'Date' },
{ name: 'S&P 500' },
{ name: 'NASDAQ' }
],
url: '../sampledata/nasdaq_vs_sp500.txt'
};
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
// prepare jqxChart settings
var settings = {
title: "U.S. Stock Market Index Performance (2011)",
description: "NASDAQ Composite compared to S&P 500",
enableAnimations: true,
showLegend: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
categoryAxis:
{
dataField: 'Date',
formatFunction: function (value) {
return months[value.getMonth()];
},
toolTipFormatFunction: function (value) {
return value.getDate() + '-' + months[value.getMonth()];
},
type: 'date',
baseUnit: 'month',
showTickMarks: true,
tickMarksInterval: 1,
tickMarksColor: '#888888',
unitInterval: 1,
showGridLines: true,
gridLinesInterval: 3,
gridLinesColor: '#888888',
valuesOnTicks: false
},
colorScheme: 'scheme04',
seriesGroups:
[
{
type: 'line',
valueAxis:
{
displayValueAxis: true,
description: 'Daily Closing Price',
axisSize: 'auto',
tickMarksColor: '#888888'
},
series: [
{ dataField: 'S&P 500', displayText: 'S&P 500' },
{ dataField: 'NASDAQ', displayText: 'NASDAQ' }
]
}
]
};
// setup the chart
$('#jqxChart').jqxChart(settings);
}
// init widgets.
var initWidgets = function (tab) {
switch (tab) {
case 0:
initGrid();
break;
case 1:
initChart();
break;
}
}
$('#jqxTabs').jqxTabs({ width: 600, height: 560, initTabContent: initWidgets });
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id='jqxTabs'>
<ul>
<li style="margin-left: 30px;">
<div style="height: 20px; margin-top: 5px;">
<div style="float: left;">
<img width="16" height="16" src="../../images/catalogicon.png" />
</div>
<div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
US Indexes</div>
</div>
</li>
<li>
<div style="height: 20px; margin-top: 5px;">
<div style="float: left;">
<img width="16" height="16" src="../../images/pieicon.png" />
</div>
<div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
NASDAQ compared to S&P 500</div>
</div>
</li>
</ul>
<div style="overflow: hidden;">
<div id="jqxGrid">
</div>
<div style="margin-top: 10px; height: 15%;">
The S&P 500 index finished 2011 less than a point away from where it ended 2010
-- 0.04 points down to be exact. That's the smallest annual change in history. At
its peak in April, the S&P had climbed more than 8%. But by October, at the lowest
levels of the year, it was down more than 12%. The Nasdaq, meanwhile, lost 1.8%
for the year.</div>
</div>
<div style="overflow: hidden;">
<div id='jqxChart' style="width: 100%; height: 100%">
</div>
</div>
</div>
</div>
</body>
</html>

How do I make Highcharts half-donut appear in angular application?

I am working on an angular.js application that displays various widgets in a dashboard. One of these widgets uses a Highcharts half-doughnut. I have created a prototype in straight HTML and it works as expected. I am now porting things over to my angular.js application using highcharts-NG. Everything in my widget is displaying EXCEPT the half-doughnut. Here is the code from my partial:
<div class="row container">
<div class="col-md-2 greyBack loanWidget">
<div class="calendarContainer">
<div class="calendarTitle">{{myLoan.LoanStatus.Month}}</div>
<div class="calendarDay">{{myLoan.LoanStatus.Day}}</div>
<div class="calendarYear">{{myLoan.LoanStatus.Year}}</div>
</div>
</div>
<div class="col-md-4 greyBack loanWidget" style="min-width: 200px; margin: 0; max-width: 200px; max-height: 300px; vertical-align: top;">
<div ng-controller="LoanStatusChart">
<highchart id="chart1" config="highchartsNG"></highchart>
</div>
</div>
<!--<div id="container" class="col-md-4 greyBack loanWidget" style="min-width: 200px; margin: 0; max-width: 200px; max-height: 300px; vertical-align: top;"></div>-->
<div class="col-md-3 greyBack loanWidget balance">
<span class="balanceText">{{myLoan.LoanStatus.OriginalPrincipalBalance}}</span><br />
<span class="balanceTextLabel">Outstanding Balance</span><br />
<span class="borrowedText">{{myLoan.LoanStatus.BorrowedAmt}}</span><br />
<span class="borrowedTextLabel">Borrowed</span>
</div>
<div class="col-md-3 loanWidget"><img src="../images/c4l/cfl-banner.png" /></div>
</div>
Here is the code in my controller:
cflApp.controller('LoanStatusChart', function ($scope) {
$scope.options = {
type: 'pie',
colors: ['#971a31', '#ffffff']
}
$scope.swapChartType = function () {
if (this.highchartsNG.options.chart.type === 'line') {
this.highchartsNG.options.chart.type = 'bar'
} else {
this.highchartsNG.options.chart.type = 'line'
}
}
$scope.highchartsNG = {
options: {
plotOptions: {
pie: {
borderColor: '#000000',
size: 115,
dataLabels: {
enabled: false,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black',
}
},
startAngle: -90,
endAngle: 90,
center: ['30%', '75%']
}
},
colors: ['#971a31', '#ffffff'],
chart: {
type: 'pie',
backgroundColor: '#f1f1f2',
height: 150
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Hello',
style: {
color: '#971a31',
fontWEight: 'bold',
fontSize: '15px'
},
verticvalAlign: 'middle',
y: 20,
x: -24
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
series: [{
type: 'pie',
name: 'Loan',
innerSize: '50%',
data: [
['85% paid', 85],
['15% owed', 15]
]
}],
loading: false
}
});
My two questions are:
Why won't this display?
Currently the data is "hard-coded" in these lines:
series: [{
type: 'pie',
name: 'Loan',
innerSize: '50%',
data: [
['85% paid', 85],
['15% owed', 15]
]
}],
How can I set this up so I can pass in the percentages? These come from another controller as you can see in the code in my partial.
UPDATE: I have managed to get the chart area to populate with something by adding Jquery prior to the Highcharts.js. However, it is ignoring every single option I pass to it and simply displaying "Chart Title" and a very tall div where the chart should be. Ideas?

I tried your code its running fine. Might be you have some javascript file ordering or CSS issue. Be sure to follow the correct order
jquery
Highcharts.js
AngularJS
Highchart-ng.js
Secondly you declared series:[{}]object twice in your chart configuration.
Here's the fiddle you can check your code here http://jsfiddle.net/Hjdnw/1018/