Dojo version: 1.10.4 downloaded 11/24/2015
When I create a new Tooltip, there is an error returned:
TypeError: invalid 'in' operand source
thrown from dojox/lang/utils.js line 46
if(x in source && !(x in empty)){...}
where source is the text, "default", but it is expecting an object.
The text, "default" appears to be from the call to create the Tooltip,
indicated in the code below.
(I've removed code that I think is unnecessary to understand the problem.)
require([ "dojox/charting/Chart", "dojox/charting/widget/Legend",
"dojox/charting/axis2d/Default", "dojox/charting/action2d/Tooltip",
"dojox/charting/plot2d/Bars", "dojox/charting/plot2d/ClusteredBars",
"dojox/charting/plot2d/StackedBars", "dojo/domReady!"],
function(Chart, Legend, Tooltip){
var barChart = new Chart("WPDDashboard_DojoBarChart3_1",
{ title: 'Finance Comparison', titleFont: 'bold 100% Arial});
barChart.addPlot("default", {
type: 'ClusteredBars' , gap: 5, stroke: {
color: 'black', width: 2}, fill: '#3366cc', shadow: {
dx: 2, dy: 2}});
barChart.connectToPlot("default" ........);
barChart.addAxis(.......);
//I think this is the offending line
var tip = new Tooltip(barChart, "default");
barChart.render();
});
Your ordering of the required objects doesn't line up with the declaration. You're requiring Chart, Legend, Default, and then Tooltip while you're declaring Chart, Legend, and then Tooltip. So what you've done is you named the Default chart to Tooltip and tried using it. Try fixing the order and that should work.
Related
I'm trying to create chart using Dojox charting. I created plot and added Series.
this.addPlot("st", {type: Lines, markers: false, tension:"X"});
this.addSeries("Series A",
[{x:0, y:0}, {x:5, y:10},
{x:10, y:12}, {x:15, y:14},
{x:20, y:15}, {x:25, y:16},
{x:30, y:18}],
{plot: "st"});
Then I added MouseIndicator
new MouseIndicator (this, "st",
{series: "Series A",
labels: false,
mouseOver: true,
lineStroke: { color: "blue" }
});
So it has added indicator but with default colors.
Tried to change indicator with lineStroke, lineOutline or lineShadow. Nothing changed.
According to API docs it should change the line style^ http://bill.dojotoolkit.org/api/1.9/dojox/charting/action2d/MouseIndicator
Does anybody knows how to change MouseIndicator line style?
Here is my Hack of a solution.
Using dojo/aspect (http://dojotoolkit.org/reference-guide/1.10/dojo/aspect.html) to listen on the "_onMouseSingle" of the MouseIndicator object, and after this event occurs, change the marker and line stroke colors:
var mouseHoverIndicator = new MouseIndicator (this, "st",{
series: "Series A",
labels: false,
mouseOver: true,
lineStroke: { color: "blue" }
});
aspect.after(mouseHoverIndicator, "_onMouseSingle", function (value) {
var plot = mouseHoverIndicator.chart.getPlot(mouseHoverIndicator._uName);
plot.opt.markerStroke= {color:"blue"};
plot.opt.lineStroke= {color:"blue"};
plot.dirty = true;
mouseHoverIndicator.chart.render();
});
How do I trigger on the overlays in jqplot only after I click a checkbox (not when the html loads). When I first set overlay option show to false the overlays are not displayed on plot at 1st and when I used my trigger function the overlays do not appear.
Here is the code I use for the plot :
<div id="fastest" style="margin-top:20px; margin-left:20px; margin-right:200px; width:800px; height:400px;">
<script class="code" type="text/javascript">
$(document).ready(function(){
var dataset="too long to be displayed here"
plot1 = $.jqplot('fastest', dataset, {
title: 'Test_figs',
legend: {show:false},
series: [{
showMarker: false,
color: '#ED0E0E',
label: 'R spectrum',
neighborThreshold: -1
}],
axes:{
xaxis:{
label:'Restframe Wavelength'
},
yaxis:{
label:'Flux',
tickOptions:{formatString:'%.3e'}
}
},
cursor:{
show:true,
zoom:true,
tooltipLocation:'sw'
},
Canvasoverlay: {
show: false,
objects: [
{verticalLine: {
name: 'Na-ID',
x: 5893.000000,
lineWidth: 2,
color: '#F0630C',
lineCap:'butt',
yOffset:0,
shadow: true
}}
]
}
});
});
function NaID_trigger() {
var co = plot1.plugins.canvasOverlay;
var line = co.get('Na-ID');
if (line.options.show==false) line.options.show = true;
else line.options.show = false;
co.draw(plot1);
}
</script>
I then use :
<button onclick="NaID_trigger()">Na-ID</button>
to trigger the overlay on or off for instance.
PS: I tried replacing draw by replot as advised didn't work when show=false in overlays options.
I finally found the solution myself :
to not display the overlays when the jqplot loads I set the overall overlays "show" option to true.
Then within each object I set show to false.
Instead of the external to the plot function I used before I switched to an even handler of the form:
$("input[type=checkbox][name=Na-ID]").change(function(){
plot1.plugins.canvasOverlay.get('Na-ID').options.show = this.checked;
plot1.replot();
});
Now the plot display the selected overlay when checkbox is ticked and not at the beginning.
Hope this will help someone who has the same issues.
I'm using Dojo 1.9 to start learning, and I'm having trouble disabling the resize of the Simple Textarea. I don't really have a particular need to do this, I was just curious about how to and have since been unable.
There is no property listed in the Dijit API, and changing the CSS either with .set("style"), including it inline in the original container (I'm doing it programmatically), or even trying to set resize to none in the original declaration ie:
var textarea = new SimpleTextarea({
rows: 5,
cols: 10,
onFocus: function(){ console.log("textarea focus handler"); },
onBlur: function(){ console.log("textarea blur handler"); },
selectOnClick: true,
style: "resize=none",
value: "This is a sample SimpleTextarea."
}, "textarea");
Any ideas?
If you set style equal to an object with a key value pair of resize : "none" that will do the trick
var textarea = new SimpleTextarea({
style: {resize : "none"}
}, "textarea");
You can do like this:
<input dojotype="dijit.form.SimpleTextarea"
id="yourTxtWidget"
style="resize:none; width: 230px; height: 75px;"
class="myTextField"/>
I have a treegrid "templatecolumn" that displays an image based on a condition in an XTemplate.
However, I also would like an html formatted tooltip displayed upon mouseover of the image. I've done this with Ext JS 3.x via ext:qtip metatdata attribute in a renderer, but haven't been able to figure out how to do this in Ext JS 4.1 using tpl and haven't found anything in my searching.
Here's what I have to display the image based on a record value:
var myTemplate = new Ext.XTemplate(
'<tpl if="p > 0">',
'<img src="exclamation.gif" height="16" width="16"/>',
'</tpl>'
);
var schedTree = Ext.create('Ext.tree.Panel', {
...
columns:[
{ header:' ', dataIndex:'p', xtype:'templatecolumn', tpl:myTemplate }
]
}
Has anyone done this or have any suggestions? Is there a better way to do this? Thanks
This isn't a method using XTemplate, but this one works for me:
{
text : 'Zdj',
width: 40,
align : 'center',
dataIndex : 'Name',
sortable : false,
resizable: false,
renderer: function (v, m, r) {
if(r.get('leaf')==true) {
m.tdAttr = 'data-qtip="<img src=services/Images.ashx?id='+r.get('id')+' width=60px height=60px>"';
return '<img src="services/Images.ashx?id='+r.get('id')+'" width="25px" height="25px"/>';
}
}
},
In my example I'm showing a bigger image in tooltip, but there is no problem to show HTML formatted tooltip.
You can add conditions to renderer and in my opinion do more that XTemplate can do.
Your small image should go to return line and tooltip content to m.tdAttr.
You can read more about renderer function here: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-renderer
Hope this helps :)
I am trying to draw an pie chart using ExtJS but something is going wrong. I can see following warnings in firebug window :
Unexpected value NaN parsing y attribute.
Unexpected value NaN parsing height attribute.
Code for my pie chart is as follows :
xtype: 'chart',
title: 'Location wise candidate distribution',
itemId: 'CandidateDistributionChart',
store: 'CandidateDistribution',
width: 250,
height: 260,
shadow: true,
animate: true,
theme: 'Base:gradients',
legend: {
position: 'right'
},
series: [{
type: 'pie',
field: 'candidateCount',
showInLegend: true,
label: {
field: 'name',
contrast: true,
font: '18px Arial'
}
}]
Why do those warnings are coming? Currently chart is not getting drawn even though I have mentioned all the necessary values.
Please help...
You used a string to define the store, but it needs a store object.
2 solutions :
1) store: Ext.getCmp('CandidateDistribution'),
Or 2) Define the store into a variable this way chartStore = Ext.create('Ext.data.Store', { ... }); and then pass it to the chart config : store: chartStore
But maybe it's not the problem according to the errors... Can you post the code of your store, your model, and the container of your chart ?
Make sure the value at least one value is not null or not zero. If all zeros or null you will have this type of error.
this is the model. I added the return and it worked. is a quick fix
{name: 'HD', type: 'number', convert: function(value,record){
if (value == 0)
return 0.0001 // The graphic needs at least one of the values to be more than 0 or will throw an error.
else
return value;
}
},