I have the following implementation and it is functional. When user clicks on the line series, then it loads another data.
I want to give an impression to the first time user that line series clickable with implementing mouse over event and cursor: pointer.
var isHover=false;
function onClick (e) {
if (!isHover) {
var chart = $("#chart").data("kendoChart");
chart.options.series =[{data: stats2,name:stats2[0].name}] ;
chart.redraw();
isHover = true;
}
else if (isHover) {
var chart = $("#chart").data("kendoChart");
chart.options.series = [{data: stats,name:stats[0].name}];
chart.redraw();
isHover = false;
}
}
FIDDLE
A bit hacky, but this should work on stroke as well as the path:
circle:hover,
path[stroke="#ff6800"]:hover { cursor:pointer; }
See: http://jsfiddle.net/3yhbyy2g/78/
But would be better to set a class here (since you are tying the mouseover to a certain color), but not sure how this would work in kendo.
And since it's a bit hard to hit the line, maybe it would be enough to leave it on the circle alone.
Related
There are 2 charts and 1 common legend in one page. This legend is clickable to show/hide graph line of charts. This is forked this question.
I had tried to update data above code. It's an unrefined way, but i've been able to update the chart. "The legend" text will hide/show a line chart in here.
However after the update data, this toggle function is not work.
Please try here.
Click "The legend", it show and hide graph line --->OK
Click "ChangeData" button, graph line will be changed --->OK
Click "The legend" again, does not disappear graph line -->NG
First, it call the DrawChart function, which draws the data for the argument.
window.onload = function () {
DrawChart(data_A1, data_B1);
clickableCommonLegend();
}
The DrawChart function draw line chart by typical method of ChartJS.
function DrawChart(data_A, data_B) {
var ctxA = document.getElementById("myChartA").getContext("2d");
var ctxB = document.getElementById("myChartB").getContext("2d");
myChartA = new Chart(ctxA, {
type: 'line',
data:{.....
options:{....
});
myChartB = new Chart(ctxB, {
type: 'line',
data:{.....
options:{....
});
The clickableCommonLegend() is forked from this question.
On click button function that calls "changeData()".
This function execute destroy charts and reCall "DrawChart"
function changeData() {
myChartA.destroy();
myChartB.destroy();
DrawChart(data_A2, data_B2);
myChartA.update();
myChartB.update();
clickableCommonLegend();
}
I guess that destroy() delete all context of and re-define context by document.getElementById("myChartA")... in DrawChart().
I think it wii work fine, but result is not.
in clickableCommonLegend,
var legendItems = document.querySelector('.legend').innerHTML = myChartA.generateLegend();
Does legendItems removed from chart.destroy?
But I call it again.
I'm grad if you let me know what is wrong.
Current code is present here.
I've found a solution.
Change changeData() function
function changeData() {
// ---NOT WORK---
// myChartA.destroy();
// myChartB.destroy();
// DrawChart(data_A2, data_B2);
// --- OK ---
myChartA.data.datasets[0].data = data_A2;
myChartB.data.datasets[0].data = data_B2;
myChartA.update();
myChartB.update();
clickableCommonLegend();
}
I am using Amcharts plugins in making a graph. But I am having issues in hiding and showing the graph using legends.
This is my function code:
function handleLegendClick( graph ) {
var chart = graph.chart;
for( var i = 0; i < chart.graphs.length; i++ ) {
if ( graph.id == chart.graphs[i].id )
chart.hideGraph(chart.graphs[i]);
else
chart.showGraph(chart.graphs[i]);
}
if (graph.id == chart.graphs['3'].id)
chart.hideGraph(chart.graphs['4']);
if (graph.id ==chart.graphs['4'].id)
chart.hideGraph(chart.graphs['3']);
chart.validateNow();
// return false so that default action is canceled
return true;
}
This code is working but my problem is, it hides only one graph and show the graph again when the user click another legend. What I need to do is to hide multiple graphs by clicking it's assigned label text and marker, and when the graph is hidden I should click the same legend to show the hidden graph.
Please help me. Thank you.
From your description, the default legend behavior does exactly what you're asking for without needing to add your handleClick code. I'm not sure what's the point of it.
var chart = AmCharts.makeChart("chartdiv", {
// ...
"legend": { }, //default setup
});
Here's an example with multiple graphs.
Right now my graph's label is placed in a default position, but my label texts are rather long and its sticking out from the graph.
If possible, I want to place it so that the labels don't stick out from the graph.
Pic of Current situation & Ideal graph
Or if the above is not possible, I want to fix the visible labels. Is this possible?
right now, the "best" label gets lost/hidden when the graph width is reduced. The "too much" label also gets lost when the width is largely reduced.
I have been searching all over stackoverflow and amcharts website but I can't seem to find a good solution.
Is there any way to solve either of the problems...?
// tried these but doesnt work for what I want to do
va.labelOffset = -5;
va.position = "bottom";
va.inside = false;
full code in JSfiddle
In order to keep the chart from hiding the labels on resize, you need to disable the valueAxis' autoGridCount and set the gridCount to the number of tick marks you want to see. You'll also need to remove the labelFrequency setting.
va.autoGridCount = false;
va.gridCount = 3;
//va.labelFrequency = 5;
As for label positioning, you are limted to rotating and vertical offsets out of the box. As a workaround, you can position the labels by modifying the SVG nodes directly through the drawn event, for example:
// prior to chart.write
chart.addListener("drawn", function(e) {
var textNodes = e.chart.valueAxes[0].labelsSet.node.childNodes;
var transform;
//Position "too little"
transform = parseTransform(textNodes[0].getAttribute('transform'));
transform.translate[0] = parseFloat(transform.translate[0]) + 25;
textNodes[0].setAttribute('transform', serializeTransform(transform));
// Position "too much"
transform = parseTransform(textNodes[2].getAttribute('transform'));
transform.translate[0] = parseFloat(transform.translate[0]) - 25;
textNodes[2].setAttribute('transform', serializeTransform(transform));
});
// ...
// from http://stackoverflow.com/questions/17824145/parse-svg-transform-attribute-with-javascript
function parseTransform(a) {
var b = {};
for (var i in a = a.match(/(\w+\((\-?\d+\.?\d*e?\-?\d*,?)+\))+/g)) {
var c = a[i].match(/[\w\.\-]+/g);
b[c.shift()] = c;
}
return b;
}
//serialize transform object back to an attribute string
function serializeTransform(transformObj) {
var transformStrings = [];
for (var attr in transformObj) {
transformStrings.push(attr + '(' + transformObj[attr].join(',') + ')');
}
return transformStrings.join(',');
}
Updated fiddle
How to get consistent mouseover and mouseout events for highcharts columns?
The issue can be replicated by hovering the mouse horizontally back and forth along the middle of the chart in this js fiddle
EDIT :
This issue has been resolved by the below accepted answer.
In addition, I recommend setting tooltip.shared to false, and plotOptions.column.stickyTracking to false.
tooltip:
shared: false
plotOptions:
column:
stickyTracking: false # Mouse events will occur on column vs surrounding area
point:
events:
mouseOut: onItemMouseOut
mouseOver: onItemMouseOver
states:
hover:
enabled: false # Removes default mouse over behavior.
In the screenshot, the arrows represent the mouse hovering back and forth along the middle of the chart. The expected behavior is that the currently hovered column will be full opacity.
This is how the mouse events are declared in the highcharts options configuration :
plotOptions:{
column:{
point: {
events: {
mouseOut: onItemMouseOut,
mouseOver: onItemMouseOver
},
},
states:{hover:{enabled:false}},
},
},
These are the mouse event handlers :
var onItemMouseOver = function(){
console.log('mouseover');
var chart = $('#container').highcharts();
var series = chart.get('series-1');
var currentItem = this;
// Reduce opacity of all columns besides currently hovered column.
for(var i=0; i<series.segments[0].length;i++){
var segment = series.segments[0][i];
if(segment!==currentItem){
segment.graphic.attr({opacity: 0.3});
}
}
}
var onItemMouseOut = function(){
console.log('mouseout');
var chart = $('#container').highcharts();
var series = chart.get('series-1');
var currentItem = this;
for(var i=0; i<series.segments[0].length;i++){
var segment = series.segments[0][i];
segment.graphic.attr({opacity: 1});
}
}
I'm using a custom tooltip style, I had some suspicion the tooltip is interfering with the normal mouse events.
How about simply setting the opacity of the item you mouse over to 1 along with the other items to 0.3:
if(segment!==currentItem){
segment.graphic.attr({opacity: 0.3});
} else {
segment.graphic.attr({opacity: 1});
}
Fiddle Example
This way the hovered column will be for sure highlighted. In some cases when moving to a new column the item you moved to would still have an opacity of 0.3 causing the seemingly inconsistent behaviour, this means that two mouseover events happened rather than a in-between mouseout. This can happen when you have mouse events happening nearly the same time and the elements being very close to as each other (or even overlapping).
For Flot, is there an event that fires after the user has completed panning or zooming using the mouse scroll wheel (after the range.xaxis.to/from and range.yaxis.to/from have settled)? I am trying to use the line below to update the selection on an overview plot after the user has panned or zoomed in the main plot, but am finding that either the update to the overview plot happens after panning or zooming(not both).
$("#plot").bind("mouseup scroll",updateOverviewSelection);
Edit: http://jsfiddle.net/apandit/nu2rr58h/9/
In the jsfiddle, I am unable to pan in the main plot and the cursor does not seem to change back to normal. The user can click and drag in the overview plot to make a selection, which leads to zooming in the main plot. I would also like to be able to allow the user to pan and zoom in the main plot and have the selection box in the overview plot updated; I am attempting to do this by binding the updateOverviewSelection method to the plot div for the scroll and mouseup events. Is there an event in Flot that fires every time the x- and y-axis limits are updated?
The solution to this issue is below. The issue was that setting the overview plot's selection(overview.setSelection(ranges);) was triggering the zoom method because it was bound to the plotselected event in the overview plot. At the end of the zoom method, the main plot was plotted, which was again calling the overview.setSelection(ranges); line in the updateOverviewSelection method. To prevent this ping-pong between the two methods/events, I added an updatingOverviewSelection flag.
http://jsfiddle.net/apandit/nu2rr58h/12/
var datasets = [[
[0,0],[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9]
],
[
[0,0],[-1,-1],[-2,-2],[-3,-3],[-4,-4],[-5,-5],[-6,-6],[-7,-7],[-8,-8],[-9,-9]
]];
var plot = $.plot("#plot",datasets,{
pan: {
interactive: true
},
zoom: {
interactive: true,
mode: "x"
}
});
var overview = $.plot("#overview",datasets,{
selection: {
mode: "xy"
}
});
var updatingOverviewSelection = false;
$("#plot").bind("plotpan plotzoom",updateOverviewSelection);
$("#overview").bind("plotselected", zoom);
function zoom(event,ranges) {
if(updatingOverviewSelection) {
updatingOverviewSelection = false;
}
else {
var options = plot.getOptions();
options.xaxes[0].min = ranges.xaxis.from;
options.xaxes[0].max = ranges.xaxis.to;
options.yaxes[0].min = ranges.yaxis.from;
options.yaxes[0].max = ranges.yaxis.to;
plot = $.plot("#plot",datasets,options);
}
};
// get the window x-axis and y-axis ranges for the main plot
// and set the selection in the overview plot to those ranges
function updateOverviewSelection(event) {
var options = plot.getOptions();
var ranges = {
xaxis: {
from: options.xaxes[0].min,
to: options.xaxes[0].max
},
yaxis: {
from: options.yaxes[0].min,
to: options.yaxes[0].max
}
};
updatingOverviewSelection = true;
overview.setSelection(ranges);
};