[CLOSED] How to change ToolTip background color ,font zize for line chart
HI
We are using ext.net line chart, can you please tell me how to change the font size ,background color in tooltip for line chart
Please find the code
Code:
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Xml" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="Ext.Net" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
try
{
DataTable dtSpiCpi = new DataTable();
dtSpiCpi.Locale = System.Globalization.CultureInfo.InvariantCulture;
dtSpiCpi.Columns.Add("DateName", typeof(string));
dtSpiCpi.Columns.Add("Column1", typeof(decimal));
dtSpiCpi.Columns.Add("Column2", typeof(decimal));
dtSpiCpi.Columns.Add("Column3", typeof(decimal));
dtSpiCpi.Columns.Add("Column4", typeof(decimal));
DataRow objRow = null;
for (int index = 1; index <= 12; index++)
{
objRow = dtSpiCpi.NewRow();
objRow["DateName"] = index + "Jan15";
if (index < 3)
{
objRow["Column1"] = Convert.ToDecimal("4.00");
objRow["Column3"] = Convert.ToDecimal("3.00");
objRow["Column4"] = Convert.ToDecimal("2.00");
objRow["Column2"] = Convert.ToDecimal("1.0");
}
else if (index < 5)
{
objRow["Column1"] = Convert.ToDecimal("1.0");
objRow["Column2"] = Convert.ToDecimal("2.0");
objRow["Column3"] = Convert.ToDecimal("3.0");
objRow["Column4"] = Convert.ToDecimal("4.0");
}
else if (index < 7)
{
objRow["Column1"] = Convert.ToDecimal("2.0");
objRow["Column2"] = Convert.ToDecimal("3.0");
objRow["Column3"] = Convert.ToDecimal("2.0");
objRow["Column4"] = Convert.ToDecimal("3.0");
}
else
{
objRow["Column1"] = Convert.ToDecimal("4.0");
objRow["Column2"] = Convert.ToDecimal("3.0");
objRow["Column3"] = Convert.ToDecimal("2.0");
objRow["Column4"] = Convert.ToDecimal("1.0");
}
dtSpiCpi.Rows.Add(objRow);
}
storeSpiCpi.RemoveAll();
storeSpiCpi.DataSource = dtSpiCpi;
storeSpiCpi.DataBind();
}
catch (System.Data.SqlClient.SqlException ex)
{
string strin = ex.ToString();
}
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Submit MultiSelect Values - Ext.NET Examples</title>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.x-ie8m .my-marker {
cursor: pointer;
}
</style>
<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript">
</script>
</ext:XScript>
<script type="text/javascript" language="javascript">
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="" />
<table border="1">
<tr>
<td>
<ext:Panel ID="PanelYtd" runat="server" Width="1000" Height="500" Layout="FitLayout">
<Items>
<ext:Chart ID="chartSpiCpi" runat="server" Shadow="true" StandardTheme="Blue"
Animate="true" Width="850" Height="425">
<Store>
<ext:Store ID="storeSpiCpi" runat="server">
<Model>
<ext:Model ID="Model16" runat="server">
<Fields>
<ext:ModelField Name="DateName" Type="String" />
<ext:ModelField Name="Column1">
</ext:ModelField>
<ext:ModelField Name="Column2">
</ext:ModelField>
<ext:ModelField Name="Column3">
</ext:ModelField>
<ext:ModelField Name="Column4">
</ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis Position="Left" Fields="Column1,Column2,Column3,Column4" Title="Y" Grid="true" AdjustEnd="true">
<LabelTitle Font="normal 11px Arial;" Fill="Black" />
<Label Font="normal 11px Arial;" Fill="Black" />
<GridConfig>
<Odd Stroke="#000000" />
<Even Stroke="#000000" />
</GridConfig>
</ext:NumericAxis>
<ext:CategoryAxis Position="Bottom" Fields="DateName" Title="x">
<Label Font="normal 11px Arial;" Fill="Black" />
</ext:CategoryAxis>
</Axes>
<LegendConfig Position="Bottom" BoxStroke="false" BoxStrokeWidth="2" Padding="2" LabelFont="normal 11px Arial;">
</LegendConfig>
<Series>
<ext:LineSeries Axis="Left" XField="DateName" YField="Column1" Title="Column1" Smooth="10">
<Tips ID="Tips2" runat="server" TrackMouse="true" Width="330">
<Renderer Handler="this.setTitle('Column 1: ' + item.value[1] + ' (Click here to see drill down report)');" />
</Tips>
<MarkerConfig Fill="#6A8829" Stroke="#6A8829" Type="Circle" Radius="2" StrokeWidth="2" Cursor="pointer" />
<Style Stroke="#6A8829" StrokeWidth="2" />
<Label Font="normal 11px Arial;" />
</ext:LineSeries>
<ext:LineSeries Axis="Left" XField="DateName" YField="Column2" Title="Column2" Smooth="10">
<Tips ID="Tips3" runat="server" TrackMouse="true" Width="330">
<Renderer Handler="this.setTitle('Column 2: ' + item.value[1] + ' (Click here to see drill down report)');" />
</Tips>
<MarkerConfig Fill="#E15E00" Stroke="#E15E00" Type="Circle" Radius="2" StrokeWidth="2" Cursor="pointer" />
<Style Stroke="#E15E00" StrokeWidth="2" />
<Label Font="normal 11px Arial;" />
</ext:LineSeries>
<ext:LineSeries Axis="Left" XField="DateName" YField="Column3" Title="Column3" Smooth="10">
<Tips ID="Tips4" runat="server" TrackMouse="true" Width="330">
<Renderer Handler="this.setTitle('Column 3: ' + item.value[1] + ' (Click here to see drill down report)');" />
</Tips>
<MarkerConfig Fill="#1E7A93" Stroke="#1E7A93" Type="Diamond" Radius="2" StrokeWidth="2" Cursor="pointer" />
<Style Stroke="#1E7A93" StrokeWidth="2" />
<Label Font="normal 11px Arial;" />
</ext:LineSeries>
<ext:LineSeries Axis="Left" XField="DateName" YField="Column4" Title="Column4" Smooth="10">
<Tips ID="Tips5" runat="server" TrackMouse="true" Width="330">
<Renderer Handler="this.setTitle('Column 4: ' + item.value[1] + ' (Click here to see drill down report)');" />
</Tips>
<MarkerConfig Fill="#50386E" Stroke="#50386E" Type="Diamond" Radius="2" StrokeWidth="2" Cursor="pointer" />
<Style Stroke="#50386E" StrokeWidth="2" />
<Label Font="normal 11px Arial;" />
</ext:LineSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</td>
</tr>
</table>
</form>
</body>
</html>
REgards
PRaveen
