chartjs-plugin-streaming + chartjs-plugin-zoom - plugins

(sorry for my english)
I use chartjs-plugin-streaming for the real time chartjs and I want to use the chartjs-plugin-zoom.
But the zoom don't work.
When i test to zoom, appear the zoom area but on i leave the mouse from chart, nothing is happening
I see that the method doZoom of chartjs-plugin-zoom is called, then i think the problem is in streaming plugin, but I do not know where exactly.
I tested to call pause streaming before to do the zoom but there is the same problem.
What can I do to make the zoom work?
Thanks

chartjs-plugin-streaming v1.6.0 now supports chartjs-plugin-zoom.
Include Chart.js, chartjs-plugin-zoom.js, chartjs-plugin-streaming.js and required libraries (Moment.js and Hammer.js), and add pan and zoom options. Note that unlike other scale types, the rangeMin and rangeMax options don't specify time values. Instead, pan.rangeMin and pan.rangeMax limit the range of the delay option value while zoom.rangeMin and zoom.rangeMax limit the range of the duration option value.
options: {
// Assume x axis is the realtime scale
pan: {
enabled: true, // Enable panning
mode: 'x', // Allow panning in the x direction
rangeMin: {
x: null // Min value of the delay option
},
rangeMax: {
x: null // Max value of the delay option
}
},
zoom: {
enabled: true, // Enable zooming
mode: 'x', // Allow zooming in the x direction
rangeMin: {
x: null // Min value of the duration option
},
rangeMax: {
x: null // Max value of the duration option
}
}
}

Related

Zooming In and Showing/Hiding Labels in Leaflet

I have run into an issue that I can't find a solution anywhere. In my map, because of the number of features, I wait for the map to be zoomed in to a certain extent prior to showing the labels, I found a solution that was suggested as working, but in an older version.
Below is the code sample. The two console.logs do appear when zoomed in to and past the specified level and zoomed out and past the specified level. But the labels just don't appear at all.
mymap.on('zoomend', function() {
var zoom = mymap.getZoom();
if( mymap.hasLayer(lots) ) {
lots.eachLayer( function (layer){
//console.log(layer);
if ( zoom >= 21 && (!layer.getTooltip()) ) {
layer.bindTooltip(layer.feature.properties.lot_number, { sticky: true ,permanent: true, interactive: false , direction: 'center',className: 'countryLabel'});
console.log('zoomedin');
} else if ( zoom < 21 && (layer.getTooltip()) ) {
//console.log('remove tooltip');
layer.unbindTooltip();
console.log('zoomedout');
}
});
}
});
This is how my lot feature data structure is defined prior to and shows up correctly on the map.
{
"properties": {"lot_number": "{{$l->lot_number}}", "lot_id": "{{$l->id}}", "status_color": "{{$l->status->color}}","block_number": "{{$l->block->id}}","section_number": "{{$l->section->section_number}}"},
"type": "{{$l->coordinates['type']}}",
"coordinates": [[{{json_encode($l->coordinates['coordinates'][0][0])}}]]
},
If anyone has any suggestions, I would greatly appreciate them. Thank you!
I have discovered it isn't a zoom level issue because the divs do appear once past the zoom level required. It's somohow in the formatting of the data I want to put in the Tooltip.
In another portion of code I retrieve the properties like such:
var lots = L.geoJSON(myLines, {
onEachFeature: function(feature, layer) {
layer.bindPopup("<b>Lot Record #"+feature.properties.lot_number+"</b><br/>Block "+feature.properties.block_number+"<br>Section "+feature.properties.section_number+"<br><a href='lots/view/"+feature.properties.lot_id+"'>View Details</a>");
layer.setStyle({
fillColor: feature.properties.status_color,
fillOpacity: 0.8,
weight: 0.5
});
}
}).addTo(mymap);
But the above is through the feature.properties... whereas the bindTooltip method I am trying call that is having the issue uses layer.feature. but I am unsure regarding the rest of the statement to get to the properties correctly.
I found my problem to be that by going through the "layer" before the "feature", the properties is accessed through a different method. The correct format should be layer.feature.geometry.properties.lot_number.
Your code is working for me: https://jsfiddle.net/falkedesign/5x2r37pL/
I test it with zoom lvl 10:
if ( zoom >= 10 && (!layer.getTooltip()) ) {
Maybe is the zoom with 21 to high for your map
I found my problem to be that by going through the "layer" before the "feature", the properties is accessed through a different method. The correct format should be layer.feature.geometry.properties.lot_number. This was accomplished by logging the features and tracing their data structures returned in the objects.

modify the heigth of the bars series in echarts

I currently have a map loaded, and I have some bars on the map. I would like to include my variable text_toltip[i] in the tooltip so that the coordinates and text of the variable text_toltip[i] are displayed in each bar. how can I do it? I'm new in this library.
I know that there is an attribute called minHeight, which allows to establish a minimum height for the bars, but I would like to establish a maximum predetermined size for the bars and so the other sizes and colors of the bars are calculated. how can I do it?
series: [{
type: 'bar3D',
coordinateSystem: 'geo3D',
barSize:0.05,
minHeight:0.05,
data: data.map(function (item) {
return {
value: [item[0], item[1], item[2]],
label: {
show: false
}
}
}),
shading: 'lambert'
}]
https://plnkr.co/edit/Tdwwk8yKCi0fiY7I3AqK?p=preview
Thank you.
For this question,I read the Echarts's documentation and found a property belonging to "geo3D called "boxHeight" ,which can play the same role as you say "maxheight".I've tested it,no problem.
boxHeight

Leaflet: map.locate set maxZoom dynamically

It is easy to track a users position and show a position marker with Leaflet
_map.locate({
watch: true,
setView: true,
maxZoom: 13,
enableHighAccuracy: true
})
and some code in the locationfound callback.
However, the user might wish to zoom to a differed level, but when the position maker gets updated the map always zooms back to the value set in the locate maxZoom option.
Is there a way to change the maxZomm value dynamically depending on the zoom level the user has chosen?
Well, after digging a bit in the source it is just as easy as this:
Listen to the zoomend event
_map.on('zoomend', _changeLocateMaxZoom);
and then update the locateOptions maxZoom
function _changeLocateMaxZoom(e) {
if (_map._locateOptions) {
_map._locateOptions.maxZoom = _map.getZoom();
}
}
Leaflet is a well designed library.

jqplot tooltip display on touch instead of jqplotDataHighlight or higlightMouseOver or highlightMouseDown

I am using the jqplotDataHighlight option to display the tooltip on a chart on MouseOver.
$("#"+sTargetId).bind('jqplotcustomDataHighlight',
function (ev, seriesIndex, pointIndex, data) {
var chart_left = $("#"+sTargetId).offset().left,
chart_right = ($(window).width() - ($("#"+sTargetId).offset().left + $("#"+sTargetId).outerWidth())),
chart_top = $("#"+sTargetId).offset().top,
x = oPlot.axes.xaxis.u2p(data[0]), // convert x axis units to pixels
y = oPlot.axes.yaxis.u2p(data[1]);;
var tooltipData = data[1]*scale;
$('#tooltip').css({left:chart_left+x, top:chart_top+y, marginRight:chart_right});
$('#tooltip').html('<span style="font-family: Arial;font-size:'+sTooltip+';font:bold;color:#000000;">' +sXDisplay+': '+ tooltipData + '</span>');
$('#tooltip').show();
});
$("#"+sTargetId).bind('jqplotcustomDataUnhighlight',
function (ev, seriesIndex, pointIndex, data) {
$('#tooltip').empty();
$('#tooltip').hide();
});
It works fine.On iPad, i want the tooltip to be displayed on some touch event.How can i implement it?
// prop: highlightMouseOver
// True to highlight slice when moused over.
// This must be false to enable highlightMouseDown to highlight when clicking on a slice.
this.highlightMouseOver = true;
// prop: highlightMouseDown
// True to highlight when a mouse button is pressed over a slice.
// This will be disabled if highlightMouseOver is true.
this.highlightMouseDown = false;
I have observed that only the above two options are available. How can I implement it on touchstart or so?
Displaying the tooltip on doubleclick or any other event would also be helpful
Maybe you already figured this out. Here's what works for me. I am using jquerymobile, in jquery.jqplot.js version 0.9.7r635 line No: 2290 change mousemove to vmousemove. If you are using cursor: {followMouse: true} , then things should work out of the box, I have a fixed position for my tooltip, but on mousemove the top and left values did not get applied so i hardcoded the top and left for the tooltip div .jqplot-cursor-tooltip to appear in the same position as it does on click. Although its not a very good solution but I havent seen weird behavior till now. Hope this helps !

jqPlot- issue with displaying bar charts -axis padding and inter-bar distance

I'm using the following piece of code to display a set of bar charts in jqPlot. However, I am getting 2 problems:
There is no padding on either side of the range values for the xaxis. The pad attribute seems to have no effect.
When the number of bars is large, the bars overlap on top of each other. The barPadding attribute seems to have no effect.
I looked at this link Having problems with jqPlot bar chart . The answer suggested there was to use a CategoryAxisRenderer. But since I'm using time-series data, I require the DateAxisRenderer.
Please help.
function plotBarGraph(data,myticks,series)
{
$("#placeholder").empty();
$.jqplot('placeholder',data,
{
//stackSeries:true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
barMargin:1,
barPadding:0.5
},
axes:
{
xaxis:
{
ticks:myticks,
tickInterval:10,
renderer:$.jqplot.DateAxisRenderer,
pad:2.5,
tickOptions:
{
formatString:'%d-%m-%y'
}
}
},
legend:
{
show:true,
labels:series
}
});
}
In this case if you do not want to use the approach mentioned in the link, you might want to play with min/max values for your date axis.
I think you might also find useful the approach to a similar sort of problem with padding where I chose to set ticks on creation and hide the unwanted ones after the plot is drawn.
Before I can be of any further assistance please provide a sample presenting your problem.
For your second problem, I ran into a similar issue. I set up a selection statement that widened the size of my chart depending on how many bars would be in it. I then made the parent div scrollable (called "dataHolder"), and that solved the problem.
// set div properties depending on how many sets of data are in the
//array so the view is sized properly
$("#chartDiv").html("").css("width", "750px"); // chartDiv's default settings
$("#tabs-6").removeClass("dataHolder").css("width", "900px"); // parent Div's default settings
if (dataArray.length > 10) {
$("#chartDiv").css("width", "1600px");
$("#tabs-6").addClass("dataHolder").css("width", "900px");
} else if (dataArray.length > 6) {
$("#chartDiv").css("width", "1200px");
$("#tabs-6").addClass("dataHolder").css("width", "900px");
}
I found a solution to use Date data with CategoryAxisRenderer. You have to configure de xaxis like follows:
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
rendererOptions: {
tickRenderer: $.jqplot.DateTickRenderer,
tickOptions: {
formatter: $.jqplot.DateTickFormatter,
formatString:'%d/%m'
}
}
}
}
I hope it helps! ;)