PDA

View Full Version : [CLOSED] How to skip series labels if they overlap in line chart?



PriceRightHTML5team
Apr 08, 2014, 9:15 AM
Hi,

I am creating one line chart and I have data which have many points close to each other so because of this labels get overlapped. I want to hide labels which are getting overlapped. Can you please tell me how to do that?

Please see the following screenshot:
9591

Please see the code I am using:

1. cshtml page


@model List<ExtNetPractice.Models.ChartModel>
@{
var X = Html.X();
}

@(X.Panel()
.Title("Line Chart")
.Layout(LayoutType.Fit)
.Width(800)
.Height(600)
.Items(
X.Chart()
.ID("Chart1")
.StyleSpec("background:#fff;")
.Shadow(true)
.StandardTheme(StandardChartTheme.Category1)
.Animate(true)
.LegendConfig(X.ChartLegend().Position(LegendPosit ion.Right))
.Store(X.Store()
.Data(Model)
.Model(X.Model()
.Fields(
X.ModelField().Name("DateColumn"),
X.ModelField().Name("Data1")
)
)
.Proxy(X.AjaxProxy()
.Url(Url.Action("GetData"))
.Reader(X.JsonReader().Root("data"))
)
)
.Axes(
X.NumericAxis()
.Fields(new[] { "Data1" })
.Title("Price")
.MinorTickSteps(1)
.Minimum(0)
.GridConfig(X.AxisGrid()
.Odd(new SpriteAttributes { Opacity = 1, Fill = "#ddd", Stroke = "#bbb", StrokeWidth = 0.5 })
),
X.TimeAxis()
.DateFormat("dd-MMM-yyyy")
.Position(Position.Bottom)
.Fields("DateColumn")
.Title("Date")
.FromDate(Convert.ToDateTime("01-01-2014"))
)
.Series(
X.LineSeries()
.Axis(Position.Left)
.Smooth(3)
.XField("DateColumn")
.YField("Data1")
.HighlightConfig(new SpriteAttributes { Size = 7, Radius = 7 })
.MarkerConfig(new SpriteAttributes { Type = SpriteType.Circle, Size = 4, Radius = 4, StrokeWidth = 2 })
.Label(X.SeriesLabel()
.Display(SeriesLabelDisplay.Over)
.Orientation(Orientation.Vertical)
.Field(new[] { "Data1" })
.Renderer(r => r.Handler = "return (Ext.util.Format.date(item.storeItem.get('DateColu mn'),'d-M-Y') + ' / '+ Ext.util.Format.number(item.storeItem.get('Data1') , '0.00'));")
)
.Tips(Html.X().ChartTip()
.TrackMouse(true)
.Layout(LayoutType.Fit)
.Items(Html.X().Container())
.Renderer(r => r.Handler = "this.down('container').update(Ext.util.Format.date (storeItem.get('DateColumn'),'d-M-Y') + ' / '+ Ext.util.Format.number(storeItem.get('Data1'), '0.00'));")
)
)
)
)


2. Model


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ExtNetPractice.Models
{
public class ChartModel
{
public DateTime DateColumn { get; set; }

public string Name { get; set; }

public int Data1 { get; set; }

public int Data2 { get; set; }

public int Data3 { get; set; }
}
}


3. Controller code


using Ext.Net;
using Ext.Net.MVC;
using ExtNetPractice.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ExtNetPractice.Controllers
{
public class HomeController : Controller
{
public ActionResult SampleChart()
{
return View(GetLineChartData());
}

private List<ChartModel> GetLineChartData()
{
List<ChartModel> data = new List<ChartModel>()
{
new ChartModel()
{
DateColumn=new DateTime(2014,02,01),
Data1=20,
Data2=21,
Data3=22
},

new ChartModel()
{
DateColumn=new DateTime(2014,02,15),
Data1=21,
Data2=28,
Data3=13
},

new ChartModel()
{
DateColumn=new DateTime(2014,02,17),
Data1=21,
Data2=28,
Data3=13
},

new ChartModel()
{
DateColumn=DateTime.Today,
Data1=19,
Data2=16,
Data3=22
}
};

return data;
}
}
}

Daniil
Apr 08, 2014, 5:44 PM
Hi @PriceRightHTML5team,

For some reason your code doesn't render labels for me. Though, the screenshot is enough for me to understand the problem.

In the Label's Renderer you could try to analyze the previous and next DateColumn values and return an empty string if they are close. I am not 100% sure it will work, but I think it is worth to try.