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/

nvD3: Chart won't appear on dynamically-created DIV

I made a button that adds divs to my DOM, as well as forms for adding data that I want made into charts for each div.
Here's index.html:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.square {
background-color: #ccc;
height: 400px;
width: 400px;
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<button ng-click="addSomething()">add</button>
<button ng-click="removeSomething()">remove</button>
<div ng-repeat="item in items">
<input type="text" placeholder="Headline" ng-model="item.hed">
<input type="text" placeholder="Subhead" ng-model="item.subhed">
<br>
<form id="{{'customize-chart-' + item.number}}" novalidate>
<textarea rows="5" cols="50" placeholder="Paste comma-separated data here." ng-model="textModel"></textarea>
<br>
<button id="{{'update-chart-' + item.number}}" ng-click="updateChart(item.number)">Update chart</button>
</form>
</div>
<div ng-repeat="item in items">
<h3>{{item.hed}}</h3>
<p>{{item.subhed}}</p>
<div class="square">
<nvd3 options="options" data="data" class="with-3d-shadow with-transitions"></nvd3>
</div>
</div>
</body>
</html>
Here's app.js:
var chNum= 1;
var maxCharts= 4;
var minCharts= 1;
var app= angular.module("myApp",["nvd3"]);
app.controller("myCtrl",function($scope){
$scope.items= [
{
hed: '',
subhed: '',
number: chNum
}
];
$scope.textModel= '';
$scope.addSomething= function(){
if (chNum===maxCharts){
return false;
}
chNum += 1;
$scope.items.push({
hed:'',
subhed:'',
number: chNum
});
};
$scope.removeSomething= function(){
if (chNum===minCharts){
return false;
}
$scope.items.splice(-1,1);
chNum -= 1;
};
$scope.updateChart= function(passedItemNumber){
var data= this.textModel
.split(',')
.map(function(d){
return d;
});
console.log(data);
$scope.options= {
chart: {
type: "linechart",
height: 400,
margin: {
top: 20,
right: 20,
bottom: 20,
left: 20
},
x: function(d){
return d.x;
},
y: function(d){
return d.y;
},
xAxis: {
axisLabel: "X axis"
},
yAxis: {
axisLabel: "Y axis"
},
}
};
$scope.data= data;
};
});
Here's the contents of data.csv, which I paste into the textarea input:
date,dow,sp500,nasdaq
1/1/16,10,15,8
1/3/16,5,3,7
1/5/16,12,18,12
I want to be able to paste data into the textarea, then click the "Update chart" button, and see the data appear in div.square, but nothing happens when I do that.
I also want to be able to do the same with other div.square elements I add to the DOM after I click the "add" button element.
What do I need to change to make this work?

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>

Use Javascript to select a colour declared in CSS

I'm using highcharts to create a donut chart. The colours for each section are defined in the options passed via JS.
self.chartView = new Donut({
el: this,
colors: ['#96c6e3','#d8c395','#7fb299','#c693c3'],
data: $(this).data('series')
});
I would like to define these colours in CSS and then grab them for donut chart. Something along the lines of:
CSS
#color1{
background-color: #96c6e3;
}
JS
self.chartView = new Donut({
el: this,
colors: [$('#color1').css('background-color') ],
data: $(this).data('series')
});
But I'm not even sure this is possible.

For example, see this code snippet:
$(function() {
var colors = [
$('#color1').css('background-color'),
$('#color2').css('background-color')
];
$('#container').highcharts({
colors: colors,
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8]
]
}]
});
});
#color1 {
background-color: #96c6e3;
}
#color2 {
background-color: red;
}
#colors {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="colors">
<div id="color1"></div>
<div id="color2"></div>
</div>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

JqxChart Giving error Error: Invalid negative value for <rect> attribute height="-1"

Am using JqxPanel, JqxDocking and JqxChart.
JqxPanel consists Docking windows which are working fine. when i used to place JqxChart into a window Chrome giving error Error: Invalid negative value for attribute height="-1" (repated 2 times) at tag
Please some one can help me in this regard
JavaScript deviceschart.js
var DevicesgenerateData = function () {
var devicedata = new Array();
var deviceNames =
[
"Working", "GPS Antenna","Power Removed","SIM Problem","Servicing","Damaged"
];
var deviceNos =
[
10,10,30,10,20,20
];
for (var i = 0; i < 6; i++) {
var devicerow = {};
devicerow["devicenames"] = deviceNames[i];
devicerow["devicenos"] = deviceNos[i];
devicedata[i] = devicerow;
}
return devicedata;
}
var devicesource =
{
localdata: DevicesgenerateData(),
datafields: [
{ name: 'devicenames' },
{ name: 'devicenos' }
],
datatype: "array"
};
var ddataAdapter = new $.jqx.dataAdapter(devicesource);
//, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
//$('#jqxChart').jqxChart({borderColor: 'Blue'});
// prepare jqxChart settings
var devicesettings = {
//title: "Mobile browsers share in Dec 2011",
// description: "(source: wikipedia.org)",
enableAnimations: true,
borderColor: 'Red',
showLegend: true,
legendLayout: { left: 210, top: 50, width: 100, height: 200, flow: 'vertical' },
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
source: ddataAdapter,
colorScheme: 'scheme02',
seriesGroups:
[
{
type: 'pie',
showLabels: true,
series:
[
{
dataField: 'devicenos',
displayText: 'devicenames',
labelRadius: 70,
initialAngle: 15,
radius: 95,
centerOffset: 0,
formatSettings: { sufix: '%', decimalPlaces: 1 }
}
]
}
]
};
<link rel="stylesheet" href="css/jqx.base.css" type="text/css" />
<script type="text/javascript" src="js/gettheme.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jqxcore.js"></script>
<script type="text/javascript" src="js/jqxscrollbar.js"></script>
<script type="text/javascript" src="js/jqxbuttons.js"></script>
<script type="text/javascript" src="js/jqxpanel.js"></script>
<script type="text/javascript" src="js/jqxwindow.js"></script>
<script type="text/javascript" src="js/jquery.global.js"></script>
<script type="text/javascript" src="js/jqxdocking.js"></script>
<script type="text/javascript" src="js/jqxsplitter.js"></script>
<script type="text/javascript" src="js/jqxchart.js"></script>
<script type="text/javascript" src="js/jqxdata.js"></script>
<script type="text/javascript" src="js/deviceschart.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Create jqxPanel
var theme = getTheme();
$("#panel").jqxPanel({ width: "100%", height: 350, theme: theme });
$('#maindocking').jqxDocking({ theme: theme, orientation: 'horizontal', width: 990, mode: 'docked' });
$('#maindocking').jqxDocking('disableWindowResize', 'window1');
$('#maindocking').jqxDocking('disableWindowResize', 'window2');
$('#maindocking').jqxDocking('disableWindowResize', 'window3');
$('#maindocking').jqxDocking('disableWindowResize', 'window4');
$('#maindocking').jqxDocking('disableWindowResize', 'window5');
$('#maindocking').jqxDocking('disableWindowResize', 'window6');
$('#jqxChart').jqxChart(devicesettings);
});
</script>
</head>
<body class='default'>
<div id='panel' style=" font-size: 13px; font-family: Verdana;">
<div id="maindocking">
<div id="column1docking">
<div id="window1" style="height: 200px;">
<div>Vehicle Information</div>
<div style="overflow: hidden;">
<div id="jqxChart"></div>
</div>
</div><!-- window1--->
<div id="window2" style="height: 200px;">
<div>Vehicle Information</div>
<div style="overflow: hidden;">
</div>
</div><!-- window2--->
</div><!-- Column1 Docking-->
<div id="column2docking">
<div id="window3" style="height: 200px;">
<div>Vehicle Information</div>
<div style="overflow: hidden;">
</div>
</div><!-- window3--->
<div id="window4" style="height: 200px;">
<div>Vehicle Information</div>
<div style="overflow: hidden;">
</div>
</div><!-- window4--->
</div><!-- Column2 Docking-->
<div id="column3docking">
<div id="window5" style="height: 200px;">
<div>Vehicle Information</div>
<div style="overflow: hidden;">
</div>
</div><!-- window5--->
<div id="window6" style="height: 200px;">
<div>Vehicle Information</div>
<div style="overflow: hidden;">
</div>
</div><!-- window6--->
</div><!-- Column3 Docking-->
</div> <!-- MainDocking -->
</div> <!-- Panel -->
</body>

I had the same issue , I solved it by setting the width of the containing div to be large enough to contain the chart given the settings specified .
<div id="jqxChart" style="width:680px; height:400px; vertical-align: top; display: inline-block; padding: 10px;">
Hope this helps

#Anon, Thank you for that solution. I had the same issue, but with "Raphael" framework (raphael-2.1.0.js) for drawing charts, with the same error messages as OP. Removing the max-width (css) of a parent element solved my issue.
(This was posted as solution because 50 reputation was required to add a comment to Anon's solution.)

For me this turned out to be the case because I embedded the chart in a tab div that wasn't visible on page load. When I move it to a tab that's visible on page load it works.

So I was getting this error because the data that was supplied did not entirely match my series in the seriesGroups. Some of the data was not defined correctly so when I first tried drawing the chart their code didn't like what was missing and coughed up several of these errors.
Further, I wanted to try to update my chart using new data and new seriesGroups. In making a change like that I have to call jqxChart and update the seriesGroups before changing other data.
if (chartTableArea.jqxChart("isInitialized") === true) {
if (gSettings === undefined || gSettings.title === undefined) {
gSettings = getSettings(); //sets up the gSettings
}
chartTableArea.jqxChart({ seriesGroups: gSettings.seriesGroups });
chartTableArea.jqxChart(gSettings);
} else {
//not initialized
chartTableArea.jqxChart(getSettings());
}