In wavemaker a got an app that display charts with dojo charting, some charts have a lot
data so the chart is compressed so i look around and found that we could add zooming and panning, found an example on the web link:http://informatik.fh-brandenburg.de/~porebskk/dojo.html
i look at the source code and it looks like i only had to add this to my code
dojo.require("dojox.charting.action2d.MouseZoomAndPan");
and then call it before rendering the chart
new dojox.charting.action2d.MouseZoomAndPan(chart, "default");
My problem is when i had this to my source code
dojo.require("dojox.charting.action2d.MouseZoomAndPan");
and run the app i get "page Main as error" and my application does not work anymore
if i do this then my application comesback to life
//dojo.require("dojox.charting.action2d.MouseZoomAndPan");
i create a new application and i only had this on top of the main page and get
the error again
dojo.require("dojox.charting.action2d.MouseZoomAndPan");
in the wavemaker debugger i get "error parsing pages/Main/Main.js"
I am using AMD style but this may help you. I was able to find the missing piece with your link.
Dojo toolkit had some slightly incorrect code here (MouseZoomAndPan section), but it will give you the code I have below and is why I have commented out code after MouseZoomAndPan(...);
define(["dojox/charting/themes/Claro", "dojox/charting/Chart", "dojox/charting/axis2d/Default"
, "dojox/charting/plot2d/Lines", "dojox/charting/action2d/MouseZoomAndPan"],
function (claro, Chart, Default, Lines, MouseZoomAndPan) {
return {
createZoomableChart: function () {
"use strict";
var chart = new Chart("mouseZoom");
chart.addAxis("x", { type: Default, enableCache: true })
.addAxis("y", { vertical: true })
.addPlot("default", { type: Lines, enableCache: true })
.addSeries("Series A", [1, 2, 2, 3, 4, 8, 6, 7, 5]);
var mzap = new MouseZoomAndPan(chart, "default");//, { axis: "x", "none" });
chart.render();
},
init: function() {
this.createZoomableChart();
}
};
});
Related
I have created a bar chart using google charts, this is a CORE Chart
I have tried getting the bar chart to change colours and adding an additional tooltip information to it, so that the tooltip shows a bit more information
I have gone through the google documentation and i cant see what i am doing wrong
For easy reading this is the output of my code on the source
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var exams = [["Date", "Score",({type: 'string', role: 'tooltip'})], ["18 Oct", 39,"TEST"], ["26 Oct", 20,"TEST"], ["26 Oct", 0,"TEST"], ["27 Oct", 0,"TEST"], ["27 Oct", 0,"TEST"]];
if(exams.length > 1){
var data = google.visualization.arrayToDataTable(exams);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
title: "Results",
width: 1170,
height: 700,
bar: {groupWidth: "95%"},
legend: { position: "none" }
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
else{
$("#columnchart_values").html('No Data found to show graph');
}
}
This is the google documentation i have been following, its slightly different
to mine as i am getting my data from a database, but it should give the same output.
I have gone through many examples and i am replicating them as close as possible and just not having any luck
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content
I also have the exact same problem with color, i cant get colors on bar charts to change both having the same problem that it just doesn't do anything
Am i missing something??
the tooltip column is not being included in the data view.
view.setColumns([0, 1]);
to add the tooltip...
view.setColumns([0, 1, 2]);
I'm new using browserify and VueJS. I have a project where I'd like to use the map service Leaflet. So as i show in the code down below I try to require it, I have pulled it in using npm. If I look in the compiled JS file i can find Leaflet there. So that seems to work..
I'll show a image of my resulting map when i try to initialize it in the browser:
Broken Leaflet map
So as you can see the tiles are behaving really wierd, and nothing works as it should. Draging the map does really strange things..
This is the code for the components JS.
var L = require('leaflet');
module.exports = {
data: function () {
return {
map: false,
samples: [],
messages: [],
customer_id: '',
year: ''
}
},
methods: {
fetch: function (id, year, successHandler) {
var that = this
that.$set('customer_id', id)
that.$set('year', year)
successHandler(id);
}
},
ready: function () {
var map = L.map('map').setView([41.3921, 2.1705], 13);
L.Icon.Default.imagePath = 'images/';
var osmTiles = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var attribution = '© OpenStreetMap contributors';
L.tileLayer(osmTiles, {
maxZoom: 18,
attribution: attribution
}).addTo(map);
},
route: {
data: function (transition) {
this.fetch(this.$route.params.customer_id, this.$route.params.year, function (data) {
transition.next({customer_id: data})
})
}
}}
Right now I tried require:ing the leaflet package in my components script file.
Somewhere along the line Leaflet breaks.. I get no errors in the console when viewing the map, but as you can see it doesn't look good.
I would be really happy for all the help i can get!
Edit:
I just tried using chart.js in my project, required in the same way as leaflet, works like a charm.. Can't understand why leaflet wont work.
/ Simon
You are missing the Leaflet style sheet. Add it (for the correct version) using a link tag:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
In ExtJS 4.2, el.dom.click() triggered a click event. Moving to ExtJS 5 broke this functionality in IE 10 and PhantomJS. It is a big problem for automation testing.
Following is an example:
https://fiddle.sencha.com/#fiddle/13l3
Ext.require('Ext.panel.Panel');
Ext.onReady(function(){
var p = new Ext.panel.Panel({
width: 300,
height: 200,
renderTo: Ext.getBody(),
margin: 15,
bodyPadding: 5,
title: 'Click Panel',
listeners:{
click: {
element: 'el',
fn: function(){alert('clicked');}
}
}
});
p.el.dom.click()
});
Run the above code on chrome ExtJS 4,5,6 - you get an alert when loading.
Run the above code on IE 10 - you get an alert on ExtJS 4. No alert on 5 and 6.
Got support for this issue. It is related to changes in the event model for ExtJS 5. See following article for more details:
https://www.sencha.com/blog/delegated-events-and-gestures-in-ext-js-5/
In the click event handler 'translate: false' will solve the above problem.
Another option (global modification) is to override dom.Element:
Ext.define('DomOverride', {
override: 'Ext.dom.Element'
},
function(Element) {
var eventMap = Element.prototype.eventMap;
eventMap.click = 'click';
eventMap.dblclick = 'dblclick';
});
But the global solution may have negative effect for supporting touch.
I would like to know how to add itemmouseup listener of an chart's series into controller?
My controller's init method is as follows :
init: function() {
this.control({
'candidateDistribution > treepanel' : {
itemclick: this.treeStoreItemClickHandler
},
'#candidateDistributionButton' : {
click: this.candidateDistributionButton_ClickHandler
},
'competitorAnalysis #slaWiseEmprDistriGrid series': {
itemmouseup: this.sLA_ItemMouseUpEventHandler
}
});
},
In this case, itemmouseup event handler of organizationAnalysis #sLAWiseEmprDistriGrid series is not working but event handlers for rest of the things are working fine.
I tried to change Component Query to competitorAnalysis > #slaWiseEmprDistriGrid series or to competitorAnalysis > #slaWiseEmprDistriGrid[series] but its not working.
I had to add this itemmouseup event handler into code of chart's series which is working just fine but I think its breaking MVC pattern.
Code for my chart is as follows :
xtype: 'chart',
itemId: 'slaWiseEmprDistriGrid',
store: 'SLAWiseCompetitorDistribution',
flex: 2,
animate: true,
legend: {
position: 'right'
},
insetPadding: 25,
series: [{
type: 'pie',
field: 'empCount',
showInLegend: true,
listeners: {
'itemmouseup': function(item) {
var record = item.storeItem;
var slaWiseEmpListStore = Ext.data.StoreManager.lookup('SLAEmployerList');
slaWiseEmpListStore.proxy.extraParams['paramFirstDimensionValue']= record.get('name');
serviceLineWiseEmpListStore.load();
}
}
}] // end of series configuration
So I would like to know why this itemmouseup event handler is not working in controller?
Also in future I want to convert this app into web desktop like application, but I am not able to find information/documentation/tutorial on extjs documentation site. Where can I get tutorial/documentation about developing web desktop application?
Thanks in Advance !
You could setup this event in controller in 2 steps.
Add listener to your chart render event
In this listener setup your series events.
Regarding desktop application - I only can suggest looking into this example: http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/desktop/desktop.html
We're using the google custom search API (paid-for server-side API) to power our search results.
I'd like to add an autocomplete feature to the search - however, does anyone know if there is support for this (either via the server-side API, or via some sort of client-side JSONP?)
I have tried using the autocomplete for the Google Customised search, but this appears to want to draw the search box and display google ads with the results, which I don't want.
Got this working something like this - hope this helps someone else :)
$(function () {
$('input.search')
.focus(function () { this.select(); })
.mouseup(function (e) { e.preventDefault(); })
.autocomplete({
position: {
my: "left top",
at: "left bottom",
offset: "0, 5",
collision: "none"
},
source: function (request, response) {
$.ajax({
url: "http://clients1.google.com/complete/search?q=" + request.term + "&hl=en&client=partner&source=gcsc&partnerid={GOOGLESEARCHID}&ds=cse&nocache=" + Math.random().toString(),
dataType: "jsonp",
success: function (data) {
response($.map(data[1], function (item) {
return {
label: item[0],
value: item[0]
};
}));
}
});
},
autoFill: true,
minChars: 0,
select: function (event, ui) {
$(this).closest('input').val(ui.item.value);
$(this).closest('form').trigger('submit');
}
});
});
At the time of writing (June 2013), there is a somewhat easier way of getting autocompletion while still getting the results as XML:
Use the Google Custom Search Element Control (https://developers.google.com/custom-search/docs/element).
Just use the Search bar control, which you can style as you like.
<gcse:searchbox-only enableAutoComplete="true"
resultsUrl="#"></gcse:searchbox-only>
The "trick" is that you can specify "resultsUrl" which means you can direct the actual search results to a page you generate via the XML API, without having to implement the search box UX yourself.