I am using Highcharts using backbone framework. I have div in template.html, and loading chart in someview.ts file. My code looks like following, View.ts: loading the below function through ajax call inside initialize function
renderChart()
{
var mychartoptions: Highchartoptions{ chart: {type:'bar', renderTo:'ColumnChart'} }
}
template.html:
But I am getting the TypeError#13, after some time when refreshes page. Please give me correct approach, what would be wrong in my code.
Related
I am using mpld3 to convert Matplotlib plots into D3 web embedable graphics. I am then using a JS library written on top of MathJax called svg_mathjax2.js (https://github.com/ichuang/svg_mathjax2) to apply Tex conversions.
The error I get is at this line of svg_mathjax2.js:
var svgmath = mathjaxdiv.getElementsByClassName('MathJax_SVG')
[0].getElementsByTagName('svg')[0];
It gives the error:
Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined
Everything works fine the first time I load Mathjax, it converts the text appropriately. However, any additional calls (via AJAX) don't work.
I've posted an issue on the github page, but have not heard back. I'm not sure if this is an issue with svg_mathjax2 or mpld3. Perhaps someone familiar with MathJax can help out?
Never mind, I figured this out. It was specific to the svg_mathjax2.js.
I solved it by activating this block of code:
if (1) {
MathJax.Hub.Register.StartupHook("End Typeset", function () {
forEach(items, function (x) {
});
// remove the temporary items
var mathbucket = document.getElementById('mathjax_svg_bucket');
mathbucket.parentNode.removeChild(mathbucket);
});
}
}
i am trying to create a sap.viz.ui5.Donut Chart, the first time i want to fill it with Data i get the Error 'Mismatched anonymous define() module: function ()'.
My XML-View looks like:
<viz:ui5.Donut width="100%">
<viz:title>
<viz:ui5.types.Title text="t"/>
</viz:title>
<viz:dataset>
<viz:ui5.data.FlattenedDataset data="{chartData>/data}">
<viz:dimensions>
<viz:ui5.data.DimensionDefinition axis="1" name="Creator" value="{Creator}"/>
</viz:dimensions>
<viz:measures>
<viz:ui5.data.MeasureDefinition name="Count" value="{Count}"/>
</viz:measures>
</viz:ui5.data.FlattenedDataset>
</viz:dataset>
</viz:ui5.Donut>
And my Controller has the following code:
var oModel = new JSONModel();
oModel.loadData("../resources/DiagramData.json", "", false);
this.getView().setModel(oModel, "chartData");
The second time i run the code it works, does anyone know how to fix that Problem?
Where do you initialize your model?
Have hou tried loading the model earlier? Perhaps in your component.js? It would not make much sense, but it would be worth trying anyways.
You could also try setting the model to the core instead of the view. sap.ui.getCore().setModel(oModel, "chartData") or directly to the control. The last would probably not solve it seen your issue.
We are currently using the DotNet.Highcharts API to incorporate Highcharts into our website. However, we are having some JavaScript reference issues when using the .SetOptions(GlobalOptions) call.
We are using a wrapper class to build our chart in the controller, then using a simple view to render it.
In our controller:
Chart chart = new HighCharts("chart-id");
chart.SetOptions(new GlobalOptions { Global = new Global { UseUTC = false; } });
chart.SetPlotOptions()...
In our view:
#model HighchartWrapper
#(Model.Chart)
The chart is rendered in the view as follows:
<script type="text/javascript">
Highcharts.setOptions({ global: { useUTC: false } });
var chart05;
$(document).ready(function() {
});
</script>
Chrome is raising an
"Uncaught ReferenceError: Highcharts is not defined"
error on the .setOptions() statement. Without this (and the corresponding .SetOptions() statement in .NET) the chart renders correctly. If I navigate off this page and then back again, the charts start to render correctly.
I've found that manipulating the ToHtmlString() return value to put the .setOptions call to inside the .ready() portion makes the charts display properly. Is this the approach that others have had to resort to?
Your suspicions are right, you need to run your relevant code within doc ready as follows.
$(document).ready(function() {
var chart = new Highcharts.Chart(options);
});
According to the docs, the examples are all executed once the dom is loaded, so it's likely safe to assume this is best practice and expect that within the javascipt libraries, code that is executing will depend on the .ready function. Surely digging through the source will answer any further questions you have, but this is totally fine.
Highcharts - How to set options
Ok, some explanation. Even though I don't think it has anything to do with the problem itself. I have a small django project that maps some data using leaflet. On a mouseover some ajax functionality is added, using the dajax(which is a "lightweight library to implement AJAX inside django projects") framework. The call itself looks like this:
dajax.add_data(simplejson.dumps(series), 'my_test_flot')
My js function receives json data which looks like this (using alert)
[{"color": "#dddd00",
"data": [[-0.5, -20.5]],
"label": "Tweede Zandlaag"}]
The object has more data to it but the problem is not with the object. When I copy/paste the data directly into the function var series = [] the behaviour is as aspected. As aspected means, the graph I'm drawing with flot is actually being drawn. Otherwise the graph remains empty.
function my_test_flot(dat) {
function MyFormatter(v, xaxis) {
return " ";
}
$(function () {
alert(dat)
var series = dat; // here lies the problem, but why?
...
Can anyone help?
Ok, problem solved. Apparently you have to use JSON.parse(). How it's done is explained here.
This does not copy the data - it just makes series a reference to the same object as dat. Therefore, if you later modify the object, all users retaining references to it see the changes. This is probably what causes your trouble.
From an ATK4 page, i can call jqplot using a javascript helper file like this
on the page
$chart = $p->add('jqplot', null, 'chart1');
$chart->setSeries(array(10,20,15));
define a jqplot.php like this
class jqplot extends View {
function render()
{
$plot=$this->js(true)->univ()->jqplot($this->series, $this->opts);
parent::render();
return $this;
}
}
and in a js helper file, link the php call to the javascript
$.each({
jqplot: function(series, opts){
console.log('jqplot series',series);
console.log('jqplot options',opts);
$plot=$.jqplot(this.jquery.attr("id"), series, opts);
return $plot;
}
}
If i have one chart on a page and reload it with an ajaxec call, it works fine but if i have several charts next to each other, only the first one is ok and the one next to it completely disappears if i call reload.
What i really want to do is call the jqplot replot function on the chart and pass it new data from the page but how can i do this ? The $plot object in the jshelper holds a javascript object and i need this object to call replot on it.
I am thinking maybe i can store the object when first created in a javascript associative array and then when i call replot, lookup the id and if found, call replot on the object but not sure what this code looks like or whether i have the right approach so any help appreciated.
Thanks in advance for you assistance.
It probably would be quite difficult to achieve this. First you need to properly handle destruction of jqPlot. You'll need a proper jQuery UI widget capable of restoring everything through a de-constructor. Then you might get it to work.
As far as Agile Toolkit is concern, it destroys the element containing your jqPlot using JavaScript, re-loads HTML and re-executes JavaScript.