PDA

View Full Version : [CLOSED] How to show solid horizontal line at specific Y value in entire chart?



PriceRightHTML5team
Apr 18, 2014, 2:16 PM
Hi Ext Team,

I am creating a column chart, I have data which have negative and positive values, chart is working fine with following code, but I want to show one solid horizontal line on 0 (Y value) from Y-Axis line to the end of the chart to indicate the base value. Can you please suggest me how to do this?

1. CSHTML code


@model List<ExtNetPractice.Models.ChartModel>
@{
var X = Html.X();
}
@(X.Panel()
.Title("Column Chart")
.Layout(LayoutType.Fit)
.Width(800)
.Height(600)
)
.Items(
X.Chart()
.ID("Chart1")
.Shadow(true)
.StyleSpec("background:#fff;")
.Animate(true)
.StandardTheme(StandardChartTheme.Category1)
.LegendConfig(X.ChartLegend().Position(LegendPosit ion.Right))
.Store(X.Store()
.Data(Model)
.Model(X.Model()
.Fields(
X.ModelField().Name("Name"),
X.ModelField().Name("Data1"),
X.ModelField().Name("Data2")
)
)
.Proxy(X.AjaxProxy()
.Url(Url.Action("GetColumnData"))
.Reader(X.JsonReader().Root("data"))
)
)
.Axes(
X.NumericAxis()
.Fields("Data1")
.Grid(false)
.Title("Number of Hits")
.Minimum(-20)
.Maximum(25)
.GridConfig(X.AxisGrid()
.Odd(new SpriteAttributes { Opacity = 1, Stroke = "#bbb", StrokeWidth = 0.5 })
)
.Label(X.AxisLabel()
.Renderer(r => r.Handler = "return Ext.util.Format.number(value, '0,0');")
),
X.CategoryAxis()
.Position(Position.Bottom)
.Fields("Name")
.Title("Name of Country")
)
.Series(

X.ColumnSeries()
.Axis(Position.Left)
.Highlight(true)
.XField("Name")
.YField("Data1")
.Tips(X.ChartTip()
.TrackMouse(true)
.Width(140)
.Height(28)
.Renderer(r => r.Handler = "this.setTitle(storeItem.get('Name') + ': ' + storeItem.get('Data1'));")
)
.Label(X.SeriesLabel()
.Display(SeriesLabelDisplay.Outside)
.Field(new[] { "Data1" })
.Orientation(Orientation.Horizontal)
.Color("#333")
.TextAnchor("middle")
.Renderer(r => r.Handler = "return Ext.util.Format.number(value, '0');")
)
)
)
)


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 ColumnChart()
{
return View(GetColumnChartData());
}

private List<ChartModel> GetColumnChartData()
{
List<ChartModel> data = new List<ChartModel>()
{
new ChartModel()
{
Name="TUNISIA",
Data1=20,
Data2=0,
Data3=22
},

new ChartModel()
{
Name="AUSTRILIA",
Data1=-10,
Data2=0,
Data3=13
},


new ChartModel()
{
Name="SPAIN",
Data1=19,
Data2=0,
Data3=22
}
};

return data;
}
}
}

Daniil
Apr 19, 2014, 7:26 PM
Hi @PriceRightHTML5team,

I would try with a LineSeries. You should bind it with two data items. A start point (x: 0; y: 0) and an end point (x: max x; y: 0). You should be able to determine "max x" on server side.

PriceRightHTML5team
Apr 21, 2014, 6:33 AM
Hi @PriceRightHTML5team,

I would try with a LineSeries. You should bind it with two data items. A start point (x: 0; y: 0) and an end point (x: max x; y: 0). You should be able to determine "max x" on server side.

Thanks @Daniil,

I tried with following code:


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

@(X.Panel()
.Title("Column Chart")
.Layout(LayoutType.Fit)
.Width(800)
.Height(600)
.Items(
X.Chart()
.ID("Chart1")
.Shadow(true)
.StyleSpec("background:#fff;")
.Animate(true)
.StandardTheme(StandardChartTheme.Category1)
.LegendConfig(X.ChartLegend().Position(LegendPosit ion.Right))
.Store(X.Store()
.Data(Model)
.Model(X.Model()
.Fields(
X.ModelField().Name("Name"),
X.ModelField().Name("Data1"),
X.ModelField().Name("Data2")
)
)
.Proxy(X.AjaxProxy()
.Url(Url.Action("GetColumnData"))
.Reader(X.JsonReader().Root("data"))
)
)
.Axes(
X.NumericAxis()
.Fields("Data1")
.Grid(false)
.Title("Number of Hits")
.Minimum(-20)
.Maximum(25)
.GridConfig(X.AxisGrid()
.Odd(new SpriteAttributes { Opacity = 1, Stroke = "#bbb", StrokeWidth = 0.5 })
)
.Label(X.AxisLabel()
.Renderer(r => r.Handler = "return Ext.util.Format.number(value, '0,0');")
),

X.CategoryAxis()
.Position(Position.Bottom)
.Fields("Name")
.Title("Name of Country")
)
.Series(

X.ColumnSeries()
.Axis(Position.Left)
.Highlight(true)
.XField("Name")
.YField("Data1")
.Tips(X.ChartTip()
.TrackMouse(true)
.Width(140)
.Height(28)
.Renderer(r => r.Handler = "this.setTitle(storeItem.get('Name') + ': ' + storeItem.get('Data1'));")
)
.Label(X.SeriesLabel()
.Display(SeriesLabelDisplay.Outside)
.Field(new[] { "Data1" })
.Orientation(Orientation.Horizontal)
.Color("#333")
.TextAnchor("middle")
.Renderer(r => r.Handler = "return Ext.util.Format.number(value, '0');")
),

X.LineSeries()
.Axis(Position.Left)
.XField("Name")
.YField("Data2")
.ShowInLegend(false)
.ShowMarkers(false)
.Style(new SpriteAttributes() { StrokeWidth = 3 })
)
)
)


Controller and model are the same as provided in first post.

In above example line is not one which I would like. Line should touch the left and right sides boundaries. Here, country names are plotted on X-axis, so how would I get min & max x? Can you please tell me how that line would touch left and right sides boundaries?

geoffrey.mcgill
Apr 21, 2014, 7:24 AM
so how would I get min & max x?

This would be derived from your data and is not some Ext.NET can determine. Seems like the suggestion @daniil provided is still the best option.

There is no dedicated functionality within the Charts for drawing a Horizontal line, but we can create an official Feature Request if you would like to see it added to a future release of Ext.NET.

PriceRightHTML5team
Apr 21, 2014, 8:05 AM
This would be derived from your data and is not some Ext.NET can determine. Seems like the suggestion @daniil provided is still the best option.

There is no dedicated functionality within the Charts for drawing a Horizontal line, but we can create an official Feature Request if you would like to see it added to a future release of Ext.NET.

Thanks @geoffrey for your quick reply. Yes, I would definitely like this feature to be added in future release, I think this is a nice feature to have.

I followed the @daniil suggestion, but now the issue is on X-Axis I am showing country names which is string field, and I want that line should start from Y-Axis line (at 0). Currently it is shown from first country plotted on X-Axis, in which there is some distance in Y-Axis vertical line and line series start point.

Any work around possible to implement this?

PriceRightHTML5team
Apr 22, 2014, 6:21 AM
Any solution is there on this?

Vladimir
Apr 22, 2014, 8:11 AM
There is no built in functionality, you can try like in the following example

In this sample, we demonstrate how to draw horizontal line for y value equals 50


<%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>


<!DOCTYPE html>


<html>
<head runat="server">
<title>Line Chart - Ext.NET Examples</title>


<script>
function alignMarker(chart) {
var bbox = chart.bbox || chart.chartBBox,
x = bbox.x,
y = bbox.y,
height = Math.floor(y + bbox.height),
width = Math.floor(x + bbox.width),
surfaceExt = Ext.get(chart.surface.getId()),
surfacePosition = surfaceExt.getXY(),
sprite = chart.get("BaseMarker"),
inflections = chart.axes.items[0].inflections,
ends = chart.axes.items[0].calcEnds(),
scale = (inflections[inflections.length - 1][1] - inflections[0][1]) / (ends.to - ends.from),
yValue,
y;


// draw marker for y value equals 50
yValue = 50;
yValue = yValue - ends.from;
y = inflections[0][1] + yValue*scale;


sprite.setAttributes({
path: ['M', x, y, 'L', width, y]
}, true);
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />


<ext:Panel
runat="server"
Title="Line Chart"
Width="800"
Height="600"
Layout="FitLayout">
<Items>
<ext:Chart
ID="Chart1"
runat="server"
StyleSpec="background:#fff;"
Shadow="true"
StandardTheme="Category1"
Animate="true">
<LegendConfig Position="Right" />
<Store>
<ext:Store
runat="server"
AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
<ext:ModelField Name="Data2" />
<ext:ModelField Name="Data3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Items>
<ext:Sprite SpriteID="BaseMarker" Type="Path" Path="M,0,0" ZIndex="1001" Stroke="#00f" StrokeWidth="2" />
</Items>
<Axes>
<ext:NumericAxis
Fields="Data1,Data2,Data3"
Title="Number of Hits"
MinorTickSteps="1"
Minimum="0" Maximum="100">
<GridConfig>
<Odd Opacity="1" Fill="#ddd" Stroke="#bbb" StrokeWidth="0.5" />
</GridConfig>
</ext:NumericAxis>


<ext:CategoryAxis
Position="Bottom"
Fields="Name"
Title="Month of the Year"
/>
</Axes>
<Listeners>
<Refresh Fn="alignMarker" />
<BoxReady Fn="alignMarker" />
</Listeners>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>

PriceRightHTML5team
Apr 22, 2014, 10:24 AM
Thanks @Vladimir. This is exactly what I wanted to do.

Please close the thread.