I am having a weird problem that I hope you can help me with.
I have Highcharts running on a dev website -- I use a simple form to allow the user to enter data.
On the same page, a Highchart shows once data is entered.
The data entry form has very simple jQuery-based snippets, eg. form validation, a counter for max number of characters, etc.
What happens is that when there is chart data in the database, the chart plots correctly, and the remaining JS snippets work as expected wen you try to enter new datapoints.
But if there is no data in the database (therefore no Highchart is shown), all my JS snippets stop working.
On Firebug console, I get this error when there is no data to form a chart:
jb is null
function n(m,h){kc=ya(a.title,m);tc=ya...play:""});Aa.body.appendChild(Qb)}Tc=
highcharts.js (line 47)
On Chrome, a different error shows as
Uncaught TypeError: Cannot set property 'innerHTML' of null
d.d.extend._Deferred.f.resolveWith jquery.min.js:16
d.d.extend.ready jquery.min.js:16
d.c.addEventListener.A
Again, these errors disappear as soon as I enter the first data point and a chart is formed.
Does anyone know what is happening and how I can get my JS to work when a Highchart is empty?
Any pointers are much appreciated. Thanks!
For me the problem was that I wasn't including jQuery before including HighCharts.
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Threw the errors:
Uncaught TypeError: Cannot read property 'addEvent' of undefined(anonymous function) # highcharts.js:313(anonymous function) # highcharts.js:315(anonymous function) # highcharts.js:331
Uncaught TypeError: n.getOptions is not a function(anonymous function) # highcharts-more.js:8(anonymous function) # highcharts-more.js:55
Uncaught TypeError: Cannot read property 'fireEvent' of undefined(anonymous function) # exporting.js:9(anonymous function) # exporting.js:24
But if I included jQuery first it didn't.
I had this problem. I had to surround the highChart creation code with document.ready
$(document).ready({
chart = new Highcharts.Chart({ //my cool chart
});
});
OK, this error popped up again and that's because my comment above did not really solve it.
Here's the culprit: if you have a model that generates data for charts happen to return an empty array (say it's a new user and she hasn't added any data yet to the database), this empty array is passed to the controller -- which will then pass the empty array to the view with Highcharts.
When passing an empty array to my view containing Highcharts, Highcharts would run but would not find an element to inject the chart, because I also had a condition in the view that removed #container if there was no data.
Without where to put the chart, Highcharts returns an innerHTML error, that may or may not break your remaining javascript (my case).
The solution here had nothing to do with JS, but actually with putting a condition in my controller which would be in pseudo code:
if model that generates chart data returns empty array
don't generate view containing Highcharts
else
generate view containing Highcharts
Doing this not only I prevented the error for good but also reduced the overhead of running Highcharts when no data is present.
Related
I am using ag-grid version 20 (ee).
I am trying to use colSpan :
colSpan: (params: ColSpanParams) => params.node.isRowPinned() ? 3 : 1
I obtain following famous ag-gri error on console:
core.js:4002 ERROR Error: ag-Grid: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout, eg instead of api.refreshView(), call setTimeout(function(){api.refreshView(),0}). To see what part of your code that caused the refresh check this stacktrace.
at push../node_modules/ag-grid-community/dist/lib/rendering/rowRenderer.js.RowRenderer.getLockOnRefresh (rowRenderer.js:269:1)
at push../node_modules/ag-grid-community/dist/lib/rendering/rowRenderer.js.RowRenderer.redrawAfterScroll (rowRenderer.js:469:1)....
by replacing with the problem disappear, but i need colspan to be different to 1,
understand the origin of the problem
Whenever I've looked into how to email a chart, all the answers involve some variation on using the getAs function to save the chart as an image and then either inlining it or attaching it to the email. But I'm struggling to save the chart as an image in order to attach it. When I run the following code:
var chart = demandLastWeekSheet.getCharts().getAs("image/png");
I get this error:
TypeError: demandLastWeekSheet.getCharts(...).getAs is not a function (line 8, file "Code")
In fact, I get the same error if I try .getBlob(), .modify() or any other functions from here: https://developers.google.com/apps-script/reference/spreadsheet/embedded-chart.html
Surely these functions have not been deprecated? Am I doing something wrong/stupid? New to the world of apps script, any pointers welcome! Sorry also if this is a badly phrased question, also I am new to stack overflow :)
Any suggestions??
getCharts() returns EmbeddedChart[]. In your script, the method of getAs is used for an array. I think that this is the reason of your issue. In order to retrieve the blob of the chart using the method of getAs, please modify as follows.
From:
var chart = demandLastWeekSheet.getCharts().getAs("image/png");
To:
var chart = demandLastWeekSheet.getCharts()[0].getAs("image/png");
In this modification, the 1st chart in the sheet of demandLastWeekSheet is retrieved. If you want to retrieve the 2nd chart, please modify from [0] to [1].
Reference:
getCharts()
I have an SPA that needs to support any language. Upon loading, it deploys all the labels in a default language. Within the HTML, these are included as:
:
<label ...>{{Labels.Username}}</label>
:
<label ...>{{Labels.Password}}</label>
:
(This is just an example, not the actual HTML).
Now, upon initial loading, all goes OK. When I attempt to change language (even to the initial default language) I get the following error:
SyntaxError: Unexpected token }
at Object.parse (native)
at pc (http://127.0.0.1:55659/Public_Libs/Angular/angular.min.js:14:486)
at Xb (http://127.0.0.1:55659/Public_Libs/Angular/angular.min.js:80:157)
at http://127.0.0.1:55659/Public_Libs/Angular/angular.min.js:81:70
at n (http://127.0.0.1:55659/Public_Libs/Angular/angular.min.js:7:302)
at $c (http://127.0.0.1:55659/Public_Libs/Angular/angular.min.js:81:52)
at c (http://127.0.0.1:55659/Public_Libs/Angular/angular.min.js:82:235)
at http://127.0.0.1:55659/Public_Libs/Angular/angular.min.js:118:182
at m.$eval (http://127.0.0.1:55659/Public_Libs/Angular/angular.min.js:132:221)
at m.$digest (http://127.0.0.1:55659/Public_Libs/Angular/angular.min.js:129:233)(anonymous function) # angular.js:12116(anonymous function) # angular.js:8976(anonymous function) # angular.js:14355m.$eval # angular.js:15574m.$digest # angular.js:15385m.$apply # angular.js:15679l # angular.js:10166J # angular.js:10338w.onload # angular.js:10279
I attempted to debug this by setting breakpoints into my JavaScript code at every relevant location, but (as suggested by the error) the issue appears to be within the Angular code. I need to find our what triggers this.
Found the issue. It had to do with the fact that, under certain conditions, the JSON that was received (i.e. its string representation) from the remote server was wrongly formatted.
It took me some time to find this, and it looks to me reasonable to assume that I would reach this much faster had AngularJS provided more clear description of the error (this particular as well as others).
Thanks to those that sent comments and recommendations.
I hope y'all can help me. I am stuck trying to make a bar chart with a time series using D3 and a JSON file. My JSON file is structured like so:
{
"ProjectCode": "PRJ2.1",
"numberOfSchools": 1188,
"newSchools": 0,
"date": 2011-12
},
The y axis is supposed to show the numberOfSchools whilst the x axis is supposed to show the years passed. I used a combination of a time scale and ordinal scale for the x axis and parsed the date as so:
data.forEach(function(d) {
d.date = parseDate(d.date.toString());
d.numberOfSchools = +d.numberOfSchools;
});
I'm guessing the JSON file is not being parsed properly and have tried the solutions here and here with no luck. I'm using D3.v3. and below is my JSFiddle
http://jsfiddle.net/siyafrica/ESYE3/
I've seen above fiddle, and understood, from that I can say give the exact location where the file is. Url of the Json File might be wrong that's why problem is raising.
Read below Definition
d3.json(url[, callback])
Creates a request for the JSON file at the specified url with the mime
type "application/json". If a callback is specified, the request is
immediately issued with the GET method, and the callback will be
invoked asynchronously when the file is loaded or the request fails;
the callback is invoked with two arguments: the error, if any, and the
parsed JSON. The parsed JSON is undefined if an error occurs. If no
callback is specified, the returned request can be issued using
xhr.get or similar, and handled using xhr.on.
Above is from GitHub--> https://github.com/mbostock/d3/wiki/Requests#d3_json
I am trying to convert the flash version of the Fusion Charts that I have been using to Javascript.
I imported the FusionCharts.HC.js and FusionCharts.HC.Charts.js as well as the FusionCharts.js and as I was told I put the FusionCharts.setCurrentRenderer('javascript') line before rendering my charts. something like the following:
FusionCharts.setCurrentRenderer('javascript');
var XMLArray = ...
barChart = new FusionCharts("/sei/static/flash/FCF_StackedBar2D.swf?ChartNoDataText= ", "barChartLarge", 460, 260, 0, 1);
barChart.setDataXML(XMLArray);
barChart.render("barDivBroadcast");
Without the setCurrentRenderer its fine and displays what I want in Flash . but when I add that line to change the render, I get the following error
Error: DesignTimeError: #25081843 timelineChart.render Error >> #25081843:IECompatibility() Chart Id is same as a JavaScript variable name. Variable naming error. Please use unique name for chart JS variable, chart-id and container id.
And instead of the chart this error message 'Chart type not supported' appears on screen with a white background.
Can someone help me out here . thanks
Seems you are/were using FusionCharts FREE. It will not support JavaScript charts.
However, since you are using the required JS files, it is supposed to work provided you give the corect chart swf files name or chart alias.
Use StackedBar2D.swf or stackedbar2d instead of FCF_StackedBar2D.swf.
Try to dispose the fusion chart object like:
If FusionCharts(barChartLarge){
FusionCharts(barChartLarge).dispose();
}