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

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?

Related

How to properly store, retrieve and Clears Users id to and from local storage in Jquery or javascript

I have 3 or more users that I need to store, retrieve and clear their respective Ids to and from html5 local storage via Jquery or javascript.
My Issue is that only 1 User's Id is being stored, retrieved and cleared irrespective of the Users button being clicked. Please How do I store and clear users id uniquely to and from Html5 Local storage.
I have also tried the code below but cannotget it to work
const users = {arr: [{ id: 1, name: "user1"},{ id: 2, name: "user2"},{ id: 3, name: "user3"}]};
$(".save_btn").click(function(){
var id = $(this).data('id');
localStorage.setItem('user', JSON.stringify(users));
});
window.onload = function exampleFunction() {
var readArrayStr = localStorage.getItem('user');
users = JSON.parse(readArrayStr);
}
Here is the code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<script src="jquery.min.js"></script>
<style>
.box {
position: relative;
bottom: -5px;
width: 250px;
height:250;
background: black;
color: red;
display: inline-block;
border: 2px solid white;
}
</style>
<script>
$(document).ready(function(){
//const users = {arr: [{ id: 1, name: "user1"},{ id: 2, name: "user2"},{ id: 3, name: "user3"}]};
$(".clear_btn").click(function(){
var id = $(this).data('id');
localStorage.removeItem("storage_id");
alert('storage Cleared(' +id+ ')');
location.reload();
});
$(".save_btn").click(function(){
var id = $(this).data('id');
localStorage.setItem("storage_id", id);
$(".result_msg_"+id).html(id);
});
});
//show avaliable result on page reload
window.onload = function exampleFunction() {
var msg = localStorage.getItem("storage_id");
if(msg) {
$(".msg_restore").html(msg);
}
}
</script>
</head>
<body>
<h1>Save, Retrieve and Clear Users Id</h1>
<div class="box" id="user1">
<b>User 1</b>
<button class="clear_btn" data-id='1'>clear Id(1)</button>
<br><br><br>
<div class="result_msg_1" style="font-size:20px;"></div>
<div class="msg_restore"></div>
<br><br>
<button class="save_btn" data-id='1'>save Id(1)</button>
</div>
<div class="box" id="user2">
<b>User 2</b>
<button class="clear_btn" data-id='2'>clear Id(2)</button>
<br><br><br>
<div class="result_msg_2" style="font-size:20px;"></div>
<div class="msg_restore"></div>
<br><br>
<button class="save_btn" data-id='2'>save Id(2)</button>
</div>
<div class="box" id="user3">
<b>User 3</b>
<button class="clear_btn" data-id='3'>clear Id(3)</button>
<br><br><br>
<div class="result_msg_3" style="font-size:20px;"></div>
<div class="msg_restore"></div>
<br><br>
<button class="save_btn" data-id='3'>save Id(3)</button>
</div>
</body>
</html>

Style Binding makes app no show up anymore in Vue

What I'm trying to do is to make small 20px x 20px boxes of different colors in Vue. But, whenever I try to do :style='{ background-color: color.text }' (color is an object in the data with property text), it just breaks the app and it shows up with nothing.
Sceenshot without :style='{ background-color: color.text }'
Screenshot of inspector with :style='{ background-color: color.text }'
(No divs with id=app!)
Code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Learning</title>
</head>
<body>
<style>
[v-cloak] {
display: none;
}
.color-box {
height: 20px;
width: 20px;
}
</style>
<div v-cloak id='app'>
<div id='product'>
<h1>{{ product }}</h1>
<div class='product-image'>
<img :src='image'>
</div>
<p v-if='inventory >= 50'>In stock</p>
<p v-else-if='10 <= inventory && inventory < 50'>Almost in stock</p>
<p v-else-if='inventory < 10'>Almost out of stock</p>
<p v-else-if='inventory == 0'>Out of stock</p>
<h3>Comes in the colors:</h3>
<div v-for='color in colors'
:key='color.id'
#mouseover='changeColor(color.image)' class='color-box'
:style='{ background-color: color.text }'>
</div>
<button #click='addToCart'>Add to cart</button>
<button #click='removeFromCart'>Remove item from cart</button>
<p># of items in cart: {{ cart }}</p>
</div>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue'></script>
<script src='main.js'></script>
</body>
</html>
main.js
let app = new Vue({
el: '#app',
data: {
product: 'Socks',
image: '',
inventory: 9,
colors: idify([
{
text: "green",
image: 'socks.jpg'
},
{
text: "blue",
image: 'blue-socks.jpg'
}
]),
cart: 0,
},
methods: {
addToCart() { // ES6 shorthand for "addToCart: function() {"
this.cart += 1
},
removeFromCart() {
if (!this.cart) {
return;
}
this.cart -= 1
},
changeColor(image) {
this.image = image
},
}
})
app.image = app.colors[0].image
function idify(array) {
let idcount = 0
let array2 = []
for (let value of array) {
let obj = { id: idcount, ...value }
array2.push(obj);
idcount++;
}
return array2
}
function toTitleCase(str) {
return str.replace(
/\w\S*/g,
function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
}
);
}

background-color is not a valid property name in the object literal syntax because of the -.
You can fix it in these ways:
:style="{ backgroundColor: color.text }" (Vue-specific)
:style="{ 'background-color': color.text }"

Using Cytoscape with a form in HTML

I have this HTML:
<form>
Text :<br>
<input type="text" name="nameid" id="nameid" value="">
<br><br>
<input type="submit" value="Send">
</form>
<br />
<div id="cy"></div>
And this JS
$(document).ready(function () {
$("form").submit(function (event) {
$.ajax({
type: 'GET',
url: "/MyController/MyAction2",
data: { nameid: $('#nameid').val() },
success: function (newdata) {
var cy = cytoscape({
container: document.getElementById("cy"),
elements: JSON.parse(newdata)
});
}
});
});
});
And this style :
<style>
#cy {
width: 80%;
height: 80%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
When I make position absolute, I can see the graph but the buttons and textbox become unclickable, when I make position center or fixed, textbox and buttons become clickable but then I can't see the graph. How can I see both of them? Thanks.

Add label in the middle of Google pie chart donut

I am using the google charts library to create donut charts. I wanted to know if it was possible to add a label in the middle of my donut chart just as this:
I checked in the google description of options and couldn't find anything. here is how i generate my charts.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("visualization", "1", {packages:["corechart"]});
google.charts.setOnLoadCallback(init);
function drawChart(myID,titler,known,unknown) {
var data = google.visualization.arrayToDataTable([
['Knowledge', 'Out of 10'],
['Known', known],
['Unknown', unknown]
]);
var options = {
title: titler,
pieHole: 0.7,
colors: ['#000000', '#cdcdcd'],
pieSliceText: 'none',
legend:{position: 'none'},
tooltip:{text:'percentage'},
tooltip:{textStyle:{fontSize: 12}}
};
var chart = new google.visualization.PieChart(document.getElementById(myID));
chart.draw(data, options);
}
function init(){
drawChart('donutchart1','VB.NET',8,2);
drawChart('donutchart2','Javascript',4,6);
}
</script>
And my HTML to style my output:
<table class="Charts">
<tr>
<td><div id="donutchart1" style="width: 256px; height: 256px;"></div></td>
<td><div id="donutchart2" style="width: 256px; height: 256px;"></div></td>
</tr>
</table>

You can add an overlay div, centered on each donut chart, and set the following style attributes:
For the table cell:
position: relative;
For the overlay div:
position: absolute;
width: same as the donut width
line-height: same as the donut height
text-align: center;
The attribute position: relative is set on the table cell so that the absolute position of the overlay div is relative to the cell. The text-align attribute centers the text horizontally, the line-height attribute centers the text vertically.
google.charts.load("visualization", "1", { packages: ["corechart"] });
google.charts.setOnLoadCallback(init);
function drawChart(myID, titler, known, unknown) {
var data = google.visualization.arrayToDataTable([
['Knowledge', 'Out of 10'],
['Known', known],
['Unknown', unknown]
]);
var options = {
title: titler,
pieHole: 0.7,
colors: ['#000000', '#cdcdcd'],
pieSliceText: 'none',
legend: { position: 'none' },
tooltip: { text: 'percentage' },
tooltip: { textStyle: { fontSize: 12 } }
};
var chart = new google.visualization.PieChart(document.getElementById(myID));
chart.draw(data, options);
}
function init() {
drawChart('donutchart1', 'VB.NET', 8, 2);
drawChart('donutchart2', 'Javascript', 4, 6);
}
.donutCell
{
position: relative;
}
.donutDiv
{
width: 256px;
height: 256px;
}
.centerLabel
{
position: absolute;
left: 2px;
top: 2px;
width: 256px;
line-height: 256px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
color: maroon;
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<table class="Charts">
<tr>
<td class="donutCell">
<div id="donutchart1" class="donutDiv"></div>
<div class="centerLabel">8/10</div>
</td>
<td class="donutCell">
<div id="donutchart2" class="donutDiv"></div>
<div class="centerLabel">4/10</div>
</td>
</tr>
</table>

Google Visualization uses SVG for the graphics, so if we want to reposition the SVG <text> we have a number of JavaScript methods at our disposal. If we use the Dev Console and dig into the charts, we will finally reach the lowest level that being the <text> element. Notice there's 2 attributes that look like XY coordinates. I wrote a function called centerText() that'll manipulate those particular attributes, and AFAIK, should be able to navigate through most Google Visualization Chart SVG layouts.
There's a bunch of commented out lines in this function because I was going to have it calculate horz/vert center, but I found out that the <text> tag doesn't have a <length>, so I'll leave that when I have more time.
function centerText(chart, idx, X, Y) {
idx === 'undefined' || idx === null || idx === NaN ? 0 : idx;
var cht = document.querySelector(chart);
var txt = document.querySelectorAll(chart + " text");
//var chW = cht.width/2;
//var chH = cht.height/2;
//var txW = txt[idx].width/2;
//var txH = txt[idx].height/2;
//var W = chW - txW;
//var H = chH - txH;
txt[idx].setAttribute('x', X);
txt[idx].setAttribute('y', Y);
}
/* chart [string][REQUIRED ]: Id of chart - ex. #donutchart1
|| idx [number][DEFAULT: 0]: Index number of <text>
|| X [number][REQUIRED ]: Set X coordinate of <text>
|| Y [number][REQUIRED ]: Set Y coordinate of <text>
*/
SNIPPET
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Google Visualization Dohnut Chart Text Position</title>
<style>
</style>
</head>
<body>
<table class="Charts">
<tr>
<td>
<div id="donutchart1" style="width: 256px; height: 256px;"></div>
</td>
<td>
<div id="donutchart2" style="width: 256px; height: 256px;"></div>
</td>
</tr>
</table>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load("visualization", "1", {
packages: ["corechart"]
});
google.charts.setOnLoadCallback(init);
function drawChart(chartID, heading, known, unknown) {
var chart = new google.visualization.PieChart(document.getElementById(chartID));
var data = google.visualization.arrayToDataTable([
['Knowledge', 'Out of 10'],
['Known', known],
['Unknown', unknown]
]);
var options = {
title: heading,
pieHole: 0.7,
colors: ['#000000', '#cdcdcd'],
pieSliceText: 'none',
legend: {
position: 'none'
},
tooltip: {
text: 'percentage'
},
tooltip: {
textStyle: {
fontSize: 12
}
}
};
chart.draw(data, options);
}
function centerText(chart, idx, X, Y) {
var cht = document.querySelector(chart);
var txt = document.querySelectorAll(chart + " text");
//var chW = cht.width/2;
//var chH = cht.height/2;
//var txW = txt[idx].width/2;
//var txH = txt[idx].height/2;
//var W = chW - txW;
//var H = chH - txH;
txt[idx].setAttribute('x', X);
txt[idx].setAttribute('y', Y);
}
function init() {
drawChart('donutchart1', 'VB.NET', 8, 2);
drawChart('donutchart2', 'Javascript', 4, 6);
centerText('#donutchart1', 0, 112, 130);
centerText('#donutchart2', 0, 106, 130);
}
</script>
</body>
</html>

I'd just like to automate the #zer00ne answer, so that we don't have to set the X and Y manually. The text will always be in the center regardless the length of the text
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<title>Google Visualization Dohnut Chart Text Position</title>
<style>
#test_font{
position: absolute;
visibility: hidden;
height: auto;
width: auto;
white-space: nowrap;
}
</style>
</head>
<body>
<table class="Charts">
<tr>
<td>
<div id="donutchart1" style="width: 256px; height: 256px;"></div>
</td>
<td>
<div id="donutchart2" style="width: 256px; height: 256px;"></div>
</td>
</tr>
</table>
<div id="test_font"></div>
<script src="https://www.gstatic.com/charts/loader.js">
</script>
<script>
google.charts.load("visualization", "1", {
packages: ["corechart"]
});
google.charts.setOnLoadCallback(init);
function drawChart(chartID, heading, known, unknown) {
var chart = new google.visualization.PieChart(document.getElementById(chartID));
var data = google.visualization.arrayToDataTable([
['Knowledge', 'Out of 10'],
['Known', known],
['Unknown', unknown]
]);
var options = {
title: heading,
pieHole: 0.7,
colors: ['#000000', '#cdcdcd'],
pieSliceText: 'none',
legend: {
position: 'none'
},
tooltip: {
text: 'percentage'
},
tooltip: {
textStyle: {
fontSize: 12
}
}
};
chart.draw(data, options);
}
function centerText(chart) {
var cht = document.querySelector(chart);
var txt = document.querySelector(chart + " text");
var test_txt = document.querySelector('#test_font');
test_txt.innerHTML = txt.innerHTML;
test_txt.style.fontFamily = txt.getAttribute('font-family');
test_txt.style.fontSize = txt.getAttribute('font-size') + 'px';
test_txt.style.fontWeight = txt.getAttribute('font-weight');
var X = (cht.clientWidth-test_txt.clientWidth)/2;
var Y = ((cht.clientHeight-test_txt.clientHeight)/2) + 1*document.querySelectorAll(chart + " rect").item(1).getAttribute('height');
txt.setAttribute('x', X);
txt.setAttribute('y', Y);
}
function init() {
drawChart('donutchart1', 'VB.NET', 8, 2);
drawChart('donutchart2', 'Javascript', 4, 6);
centerText('#donutchart1');
centerText('#donutchart2');
}
</script>
</body>
</html>

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

Categories