I am new to highcharts and I am working on a cricket app in which I have to display Run rate per over and number of wickets in an over. If there is a wicket(s) in the specific over I want to show a ball(s) to the point and on hover or click to that point it show the information about player and bowler etc.
What I want is you can view from this Link Crichq Graphs
I want the same think like in crichq graphs, but don't know how to do.
Please help me out of this issue.
You can use the point marker settings to indicate where the wickets fell. e.g. make it a different colour and size. http://api.highcharts.com/highcharts#series.data.marker
I would process the data as follows:
var ausData = [ { x:1, y:1 },
{ x:2, y:24, out:{num:2,names:['john','doe']} },
{ x:3, y:5 },
{ x:4, y:8 },
{ x:5, y:22 },
{ x:6, y:11 } ];
for (var p in ausData) {
var point = ausData[p];
if (point.out !== undefined) {
point.marker = {fillColor:'red',radius:4*point.out.num};
} else {
point.marker = {radius:5};
}
}
This start with the basic info, and then adds custom point markers depending on how the wickets fill.
The only other thing to do is customise the tooltip to give the names e.g.:
tooltip: {
formatter: function () {
var text = 'Over: ' + this.x +
' Runs: ' + this.y;
if (this.point.out !== undefined) {
text = text + '<br>Out: ' + this.point.out.num;
for (var n in this.point.out.names) {
text = text + ' ' + this.point.out.names[n];
}
}
return text;
}
},
http://jsfiddle.net/d6fgwg14/
Related
I have set a 'tooltip' at columnDefs as below,
var columnDefs = [{
headerName: "City",
field: "city",
cellRenderer: function(params) {
return '<span title="'+params.value+'">'+params.value+'</span>';
},
editable: true
}
This tool tip is rendered properly on hover over the cells with the value in the cell.
Now I am also capturing the old and new values after a cell edit in onCellValueChanged() event handler as below,
onCellValueChanged: function(params) {
if (params.oldValue !== params.newValue) {
// Send the values to the tool tip
}
}
Is it possible to update my tool tip with the values captured in the onCellValueChanged() handler ? I mean, passing the params.oldValue and params.newValue() somehow to the 'tooltip' which is on my cellRenderer.
This issue is fixed, this demo updates tool tips when change occurs.
var oldValue = params.oldValue;
var newValue = params.newValue;
var recordKey = params.data.key;
var columnField = params.colDef.field;
if (!_.isEqual(oldValue, newValue)) {
if (!cellMetadata[recordKey]) {
cellMetadata[recordKey] = {};
}
if (!cellMetadata[recordKey][columnField]) {
cellMetadata[recordKey][columnField] = {};
}
cellMetadata[recordKey][columnField].trackChanges = true;
cellMetadata[recordKey][columnField].tooltip =
columnField.toUpperCase() + ' ' + 'Changed from' + ' ' + oldValue + ' ' + 'to' + ' ' + newValue;
}
I want to get different overlayed layers by clicking on the map so that the user can choose which one want to get feature info through a pop-up.
I am using map.forEachFeatureAtPixel but I just get one of the overlayed layers.
var prue=[];
layers=[]
var displayFeatureInfo = function(pixel) {
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
l=layer.get('name');
console.log("CAPA:",l)
layers.push(l);
console.log(layers);
if (layer == rustic_wfs){
var capa= "rustica";
prue[0]=capa;
return feature;};
if (layer == zonas_wfs){
var capa="zonas";
prue[0]=capa;
return feature;}
});
map.on('click', function(evt) {
displayFeatureInfo(evt.pixel);
});
The ol.Map#forEachFeatureAtPixel will be called with all features at the provided pixel until you return a truthy value, which you do in your snippet (return feature). So to get all features, never return a truthy value. The function needs to look something like this:
var layers = [];
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
if (layers.indexOf(layer) == -1) {
layers.push(layer);
}
});
Try something like this:
function displayFeatureInfo(evt) {
var txt = "";
olMap.forEachFeatureAtPixel(evt.pixel, function (feature, source) {
//In the feature is the information of layer
//In the source is the layer
//you can save the "source" in you array to get all layers
var features = feature.getProperties();
Object.getOwnPropertyNames(features).forEach(function (campo, idx, array) {
var valor = features[campo];
txt += "<b>" + campo + ":</b> " + valor + "<br />";
});
var coordinate = evt.coordinate;
content.innerHTML = "<p style='padding: 0px'><b>Información:</b></p>" + txt + "<br/>";
txt += "<br/>------------------------<br/><br/>";
overlay.setPosition(coordinate);
});
};
Ignore "overlay" and "content", it is the way like I show the pop-up
I currently have this one,
data.dataLabels = { formatter : function(){ if( this.point.y != 0 ){ return this.point.y; } } };
chart = new Highcharts.Chart(data);
this is suggested in this question and i tried it using what I put above but it did not work, it still shows values which are 0. Any help? Thanks in advance.
EDIT:
my actual code looks like this,
jQuery.ajax({
url:"charts/bar_chart.php",
dataType: "json",
cache: false,
data:{"tid":"<?php print $q4tid ?>"}
}).done(
function(data) {
data.chart["renderTo"] = "q4chart";
<?php if($q4title!="") { ?>
data.title["text"] = "<?php print $q4title ?>";
<?php } ?>
//calculate approximate heigt of chart. this is needed because
//highchart calcluate chart height based on offset height.
var ah = data.xAxis.categories.length * (data.series.length*15);
jQuery("#q4chart").css("height", ah+"px");
data.dataLabels = { formatter : function(){ if( this.point.y != 0 ){ return this.point.y; } } };
chart = new Highcharts.Chart(data);
//resize parent frame
resizeFrame();
}
).fail(
function(jqXHR, textStatus, errorThrown) {
jQuery("#q4chart").html("Error loading Q4 chart, please contact administrator.<br />" + errorThrown);
//alert("Error loading Q4 Bar chart:" + errorThrown);
}
);
Select2 Jquery Plugin
I was having hard time how to override the default message for minimum length input in jquery Select2.
by default the plugin gives the following message.
Default Text
Please enter 1 more characters
My requirement was to show, the following text
Required Text
Enter 1 Character
please share the solution.
Thanks.
The accepted answer does not work for Select2 v4. Expanding on the comment by #IsaacKleinman, the way to override the default messages for an individual Select2 instance is through the language property:
var opts = {
language: {
inputTooShort: function(args) {
// args.minimum is the minimum required length
// args.input is the user-typed text
return "Type more stuff";
},
inputTooLong: function(args) {
// args.maximum is the maximum allowed length
// args.input is the user-typed text
return "You typed too much";
},
errorLoading: function() {
return "Error loading results";
},
loadingMore: function() {
return "Loading more results";
},
noResults: function() {
return "No results found";
},
searching: function() {
return "Searching...";
},
maximumSelected: function(args) {
// args.maximum is the maximum number of items the user may select
return "Error loading results";
}
}
};
$('#mySelect').select2(opts);
To override the functions globally, call the set function on the defaults (according to the docs):
$.fn.select2.defaults.set("key", "value")
However, in our code we do it like this:
$.fn.select2.defaults.defaults['language'].searching = function(){
return 'Custom searching message'
};
I don't know why we don't follow the docs, but it works.
Solution
Here is the solution that i have found out.
Prior to v4
Initialize
$("input[name='cont_responsible'],input[name='corr_responsible'],input[name='prev_responsible'],input[name='pfmea_responsible']").select2({
minimumInputLength: 1,
formatInputTooShort: function () {
return "Enter 1 Character";
},
});
Note
Do not forget to add this code in your document. ready function.
$(document).ready(function () {
});
I shared my solution, any better solutions are welcome.
Thanks.
Using v4 and onwards
The following worked for V4. #Isaac Kleinman
language: { inputTooShort: function () { return ''; } },
You can try this on version 4.0 or higher
you can see reference for answer frome this link :
issues reference
$("#select2").select2({
minimumInputLength: 1,
language: {
inputTooShort: function() {
return 'Please Add More Text';
}
}
});
If you are using django-select2, just add attributes to your form in forms.py:
widget=BookSelect2Widget(
attrs={'data-minimum-input-length': 1}
)
Override the function behaviour like below
$.fn.select2.defaults = $.extend($.fn.select2.defaults, {
formatMatches: function(matches) {
return matches + $filter('translate')('label.matches.found');
},
formatNoMatches: function() {
return $filter('translate')('noMatches.found');
},
formatInputTooShort: function(input, min) {
var n = min - input.length;
return $filter('translate')('label.please.enter ') + n + $filter('translate')(' more.characters') + (n == 1 ? "" : "s");
},
formatInputTooLong: function(input, max) {
var n = input.length - max;
return $filter('translate')('please.delete ') + n + $filter('translate')('')('delete.characters') + (n == 1 ? "" : "s");
},
formatSelectionTooBig: function(limit) {
return $filter('translate')('select.only') + limit + $filter('translate')('select.item ') + (limit == 1 ? "" : "s");
},
formatLoadMore: function(pageNumber) {
return $filter('translate')('load.results');
},
formatSearching: function() {
return $filter('translate')('label.search');
}
});
}
I am developing an asp applicaiton which uses WCF service (.svc not .asmx) to send JSON data to highcharts. It only seems to work if I use ie compatibility view. If I don't I get the message:
Microsoft JScript runtime error: Highcharts error #13: http://www.highcharts.com/errors/13
Error number 13 along with online searching suggests I don't have the proper renter to DIV, but it is present. Any ideas what I can to to make my application work in non-compatibility view?
Thanks!
As requested here is some code. I have two charts placed side by side one deals with "Low" turnover items the other with high. Here is the low item chart thus it renders to a named containerLow.
var lowchart = new Highcharts.Chart({
chart: {
renderTo: 'containerLow'
},
xAxis: {
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
//ChartClicked(this.x, this.y, this, this.series.name, this.series.color, this.index);
ChartClicked(this, 'Low');
}
}
}
}
},
tooltip: {
formatter: function () {
var txt = "$= <b>" + this.point.x + "</b><br/>"
+ "Wait = <b>" + this.point.y + "</b><br/>"
+ "Other DB Info for future Bow Wave, etc. <b><br/>"
+ "Avg Fill Rate = <b>" + this.point.config.averageFillRate + "</b><br/>"
+ "Average On Hand = <b>" + this.point.config.averageOnHand + "</b><br/>"
+ "Average Workload = <b>" + this.point.config.averageWorkload + "</b><br/>"
return txt;
}
}
}); //end chart
My web service get a JSON string with multiple series in it. On page load I call the web service (twice once for hight and low items) and loop through the series array to plot the multiple curves.
function pageLoad() {
JSONGraphing.GetDataDB(getParameterByName("id"), 2, OnGetDataCompleteLow, OnError);
JSONGraphing.GetDataDB(getParameterByName("id"), 1, OnGetDataCompleteHigh, OnError);
}
Here is an example of one of the call back functions for the low graph.
function OnGetDataCompleteLow(result) {
var webServiceData = eval("(" + result + ")");
for (var i = 0; i < webServiceData.series.length; i++) {
lowchart.addSeries({
data: webServiceData.series[i].data
});
}
lowchart.yAxis[0].setTitle({
text: 'Wait time in Days'
});
lowchart.xAxis[0].setTitle({
text: 'Investment in Dollars'
});
lowchart.setTitle({ text: 'Low Frequency Items' });
}
I am in a bit of a time crunch any and all help greatly appreciated.
To make sure that the container exists you have to run your code after it gets rendered, it can be done by the following ways.
document.ready(function() {
// your code
});
or
<div id="container"> </div>
<script type="type="text/javascript"">
// your code here
</script>
or
(function() {
// your code here
})