PDA

View Full Version : [OPEN] [#217] Highlighting an item without highlighting the entire line



MWM2Dev
Apr 23, 2013, 9:51 AM
Hi,

When I'm trying to display charts that have an item highlighted on mouseover it automaticly changes the entire line. See example:
6083
The top chart item does have the highlight I want. But the rest of the line is bigger than the line in the graph below it.(How it originally looks)

Here is my source for the chart



lineTips.Renderer.Fn = "LineTipRenderer";
var hightlightConfig = new SpriteAttributes { Size = 5, Radius = 5, StrokeWidth = 5, Width = 1, Fill = "red" };
var serie = new LineSeries
{
SeriesID = id + "Series" + counter,
Axis = Position.Left,
XField = new[] { x },
YField = new[] { series },
ShowMarkers = true,
Highlight = false,
HighlightConfig = hightlightConfig,
Fill = false,
ShowInLegend = true,
Tips = lineTips,
SelectionTolerance = 5,
MarkerConfig =
new SpriteAttributes
{
Type = SpriteType.Circle,
Radius = 0,
Size = 0,
Cursor = "pointer"
},
Title = seriesLabel
};




function LineTipRenderer(si, item)
{
item.series.highlightItem(item);
this.setTitle('<span style=\"color:' + item.series.seriesStyle.fill + '\">' + item.series.title + ': ' + si.data[item.series.yField] + '</span><br />' + si.data["X"]);
}


Is it possible to only display the highlight on the item without highlighting the entire line?

Thank you,

MWM2

Daniil
Apr 23, 2013, 11:33 AM
Hi @MWM2Dev,

There is no such a built-in option.

I can suggest the following solution, see CustomConfig and the page's <head>.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store s = this.Chart1.GetStore();
s.DataSource = new object[]
{
new
{
x = 0,
y = 0
},
new
{
x = 50,
y = 50
},
new
{
x = 100,
y = 100
}
};
s.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
Ext.chart.series.Line.override({
highlightItem: function() {
var me = this,
line = me.line;

Ext.chart.series.Line.superclass.highlightItem.app ly(this, arguments);
if (line && !me.highlighted && me.highlightLine !== false) { // added the third condition
if (!('__strokeWidth' in line)) {
line.__strokeWidth = parseFloat(line.attr['stroke-width']) || 0;
}
if (line.__anim) {
line.__anim.paused = true;
}

line.__anim = new Ext.fx.Anim({
target: line,
to: {
'stroke-width': line.__strokeWidth + 3
}
});
me.highlighted = true;
}
}
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Chart
ID="Chart1"
runat="server"
Width="400"
Height="400">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="x" />
<ext:ModelField Name="y" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis Title="X" Fields="x" Position="Bottom" />
<ext:NumericAxis Title="Y" Fields="y" Position="Left" />
</Axes>
<Series>
<ext:LineSeries
Titles="Chart"
XField="x"
YField="y"
Highlight="true">
<CustomConfig>
<ext:ConfigItem Name="highlightLine" Value="false" Mode="Raw" />
</CustomConfig>
</ext:LineSeries>
</Series>
</ext:Chart>
</form>
</body>
</html>

I reported it to Sencha as a feature request.
http://www.sencha.com/forum/showthread.php?262037

MWM2Dev
Apr 24, 2013, 10:23 AM
Thank you very much. This work around did solve my problem.

Kind regards,

MWM2

Daniil
Apr 25, 2013, 5:19 AM
Sencha opened a ticket.

We created an Issue to track it.
https://github.com/extnet/Ext.NET/issues/217

By the way, you might be interested to provide some feedback on this one.
http://www.sencha.com/forum/showthread.php?262031#post960858