I am using Ext Js for creating a map markers with infoBubble displayed on click. when i tried to add this code i got the following error : Uncaught ReferenceError: infoBubble is not defined
infoBubble = new InfoBubble({
content: '<div class="example">Some label</div>',
shadowStyle: 1,
padding: 10,
borderRadius: 5,
minWidth: 200,
borderWidth:1,
disableAutoPan: true,
hideCloseButton: false,
backgroundClassName: 'example',
});
what could be the problem ?
Any help will be apreciated, thanks
Try google.maps.InfoBubble instead of InfoBubble and i also see a "," after the last attribute that must be removed
Related
I am using rGraph to draw the chart. it is working fine for the first time. when trying to generate the graph with different input data for the second time, without refreshing the page. The graph is generating fine, but the x-axis title is disappearing. can anyone help me with this?
FYI: I am making that div empty, before generating the graph.
Attaching image:
1:
In the first image, you can see the Date.
Here you don't see the Date. when I change the input data and tried to generate the chart.
if(document.getElementById(chartID)){
RG.ObjectRegistry.Remove(document.getElementById(chartID));
}
var barGraph = new RGraph.Bar({
id: chartID,
data: chartData,
options: {
variant: '3d',
variantThreedAngle: 0.05,
colorsStroke: 'rgba(0,0,0,0)',
colors: chartColorArr,
marginTop: 35,
marginLeft: 45,
marginRight: 15,
marginBottom: 85,
xaxisLabels: x_axis_label_Arr,
shadowColor:'#ccc',
shadowOffsetx: 3,
backgroundGridColor: '#eee',
xaxisScaleZerostart: true,
axesColor: '#f2f2f2',
//yaxisScaleUnitsPost: 'H',
//title: 'User Sessions',
//key: [legendsTitle],
keyShadow: true,
keyShadowColor: '#ccc',
keyShadowOffsety: 0,
keyShadowOffsetx: 3,
keyShadowBlur: 15,
variantThreedXaxis : true,
variantThreedYaxis : true,
bevelled : false,
axes : true,
tooltips: chartTooltipArr,
tooltipsEvent : 'onmousemove',
xaxisTitle : **'Date',**
yaxisTitle : yAxisTitle,
xaxisTitleSize : legendFontSize,
yaxisTitleSize : legendFontSize,
xaxisLabelsSize : legendFontSize,
yaxisLabelsSize : legendFontSize,
yaxisTitlePos : 0.1,
colorsSequential : true,
}
});
barGraph.draw();
Thanks
By the looks of the 3D style and some other cues, you're using quite an old version. Here's two modern-style 3D charts:
https://www.rgraph.net/demos/bar-3d-effect-multi-row.html
https://www.rgraph.net/demos/bar-ajax.html
There's more examples in the download archive which are worth looking at.
As for the problem with your chart, I think the easiest solution would be to set the textAccessible option to false:
textAccessible: false,
I am using nvd3 and trying to add event handling while clicking on the chart. But I face some problems while implementing it and I am not able to get a solution due to lack of documentation of nvd3. I followed this link, but I still get the following error in the console:
ReferenceError: chart is not defined
Can anyone tell me what I am missing or any best solution for the event handling in nvd3.
Probably your problem is the name of the graph variable;
I make a fiddle for you.
In my example, "chart" is the name of the graph variable. Check out that also in your case it's the same.
var chart = nv.models.multiBarChart();
Anyway, with the fiddle you can see the full code. If you click on an item, you can see the messages in console.
http://jsfiddle.net/g952qb5c/
As suggested by Giordano, I looked for the name of the graph and the dispatch events. And then I have added these event listener in the options like this.
Note: This solution worked for the nvd3 and angular.
$scope.options2 = {
chart: {
type: 'pieChart',
height: 500,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
duration: 500,
labelThreshold: 0.01,
labelSunbeamLayout: true,
legend: {
margin: {
top: 5,
right: 35,
bottom: 5,
left: 0
}
},
pie:{
dispatch: {
elementClick : function(e){
console.log('element: ' + e.value);
console.log(e);
}
}
}
}
};
Hope this will help to others also.
We have been using tips configuration of series in order to set interactive tips for ExtJS 4 & 5. But with ExtJS 6, it does not work anymore. So what is the proper way of showing tips using ExtJS 6 chart package?
series: [{
type: 'pie',
field: 'count',
showInLegend: true,
donut: false,
tips: {
trackMouse: true,
width: 140,
height: 40,
renderer: function(storeItem, item) {
this.update(storeItem.get('name') + ':' + storeItem.get('count'));
}
}
}]
It looks like the tooltip renderer method arguments have been swapped around between versions, otherwise your fiddle is almost there. The this keyword appears to be the series rather than the tooltip - it's best not to rely on the JS context in ExtJS anyway and Sencha appear to be making efforts while refactoring the API, to ensure that you can consistently expect a reference to the relevant component as the first argument of any callback.
If you look at the series-tooltip in the API it will confirm that the first argument is a reference to the tooltip and the second argument is the selected record - so you can update a tooltip as follows:
{
xtype: 'pie'
// ...
tooltip: {
// ...
renderer: function(tip, item){
tip.update(item.get('name') + ': ' + item.get('count'));
}
}
}
ยป updated fiddle
Seems you switched from ext-charts to sencha-charts.
It is no more tips property for Series :
ExtJS 4 - http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.chart.series.Series-cfg-tips
ExtJS 6 - http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.chart.series.Series
Try tooltip property it should be the same as tips before
tooltip: {
trackMouse: true,
renderer: function(toolT, storeItem) {
toolT.setHtml('dummy tooltip');
}
}
Try this.
I am trying to create jqxGrid(JQWdidgets) using angularjs directive. I am trying to access grid id which has been mentioned in directive and hence trying to use function jqxGrid() to set some grid properties in the controller. But I am getting following error
TypeError: $(...).jqxGrid is not a function
I have a set up of the project in git and the project has gulp file.
I have added gulp task to load dependencies for jqwidgets.
gulp.task('vendorScripts', function() {
return gulp.src([
'bower_components/**/dist/jquery.js',
'bower_components/**/assets/javascripts/bootstrap.js',
'bower_components/**/angular.js',
'bower_components/**/angular-route.js',
'bower_components/**/highcharts.js',
'bower_components/**/modules/exporting.js',
'bower_components/**/release/angular-ui-router.min.js',
'bower_components/**/ui-bootstrap-tpls.js',
'bower_components/**/dist/jquery.min.js',
'bower_components/**/jqwidgets/jqxcore.js',
'bower_components/**/jqwidgets/jqxdata.js',
'bower_components/**/jqwidgets/jqxbuttons.js',
'bower_components/**/jqwidgets/jqxscrollbar.js',
'bower_components/**/jqwidgets/jqxmenu.js',
'bower_components/**/jqwidgets/jqxcheckbox.js',
'bower_components/**/jqwidgets/jqxlistbox.js',
'bower_components/**/jqwidgets/jqxdropdownlist.js',
'bower_components/**/jqwidgets/jqxgrid.js',
'bower_components/**/jqwidgets/jqxgrid.sort.js',
'bower_components/**/jqwidgets/jqxgrid.pager.js',
'bower_components/**/jqwidgets/jqxgrid.selection.js',
'bower_components/**/jqwidgets/jqxgrid.edit.js',
'bower_components/**/jqwidgets/jqxangular.js'
])
.pipe(plumber())
.pipe(concat('vendor.js'))
//.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
gulp.start('vendorScripts');
And this is how I used directive:
<jqx-grid id="cs-grid" jqx-settings="$root.settings" jqx-source="$root.gridData"></jqx-grid>
My controller implementation:
$scope.PageSize = 3;
$rootScope.settings = {
theme: 'bootstrap',
width: '100%',
height: '100%',
selectionmode: 'none',
sortable: true,
pageable: true,
pagermode: 'simple',
pagerheight: 0,
pagesizeoptions: [3, 5, 10],
pagesize: $scope.PageSize,
columns: $rootScope.columns,
pagerrenderer: function() {
return '';
},
bindingcomplete: function() {
$scope.pagingInfo = $("#cs-grid").jqxGrid('getpaginginformation');
$scope.PageNum = 0;
}
};
I had suspected that, jqxWidget dependencies are not loaded properly. But when I went though vendor.js which is generated by gulp, I found relevant methods(jqxGrid etc) were available.
I am struggling to resolve this error. Please Help me,
Thanks in advance
Try reordering the include files, especially "jqwidgets file tags". When I got similar problem, I reordered in such a way that I took datepicker files to the top of the tag-stack. Then, it worked well. Of course, in your case, datepicker is not an issue. Still, reordering may help.
I am using ExtJS 3.3 but this might be relevant to other versions as well.
I am using a Slider control in an ExtJS-based UI. I have a tooltip set up to show the value as you drag it, as per the "Slider with Tip" example here: http://dev.sencha.com/deploy/ext-3.3.1/examples/slider/slider.html
It seems to me to be quite poor UX to have a slider with no indication of what the values are (or in this case not until you start sliding it). I would like to add labels to either end to show the range the slider is representing. Something like this:
So, of course, I'm wondering: Is this possible with the standard control itself? (I looked in the docs, but nothing jumped out at me)? or is there a neat way of achieving this?
Here is I went about to do it:
var tip = new Ext.slider.Tip({
getThumbText: this.getThumbText,
getText: function (thumb) {
return '<b>' + this.getThumbText(thumb.value) + '<b>';
}
});
this.timeSliderLabel = new Ext.form.Label({
text: Nipendo.Localization.HistorySlider + ': ',
style: 'margin:3px 5px 0px 5px;'
});
this.timeSlider = new Ext.Slider({
width: 214,
value: 1,
increment: 1,
minValue: 1,
maxValue: 13,
plugins: tip
});
this.timeSlider.on('change', function (slider, newValue, thumb) {
this.timeSliderHintLabel.setText(this.getThumbText(thumb.value), false);
this.onSearchClick();
}, this);
this.timeSliderHintLabel = new Ext.form.Label({
html: String.format('(1 {0})', Nipendo.Localization.OneMonthBack),
style: 'margin:3px 5px 0px 5px;'
});
UPDATE:
The layout could be used like this:
config = config.apply({
layout: 'column',
defaults: {
layout: 'form'
},
items: [
this.timeSliderLabel,
this.timeSlider,
this.timeSliderHintLabel
]
}, config)
Where getThumbText is a helper method I use to get the correct label value.