Gallery
Js Tool Tip Chart
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript ToolTip Chart</title>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates using a dynamic chart inside tooltips.
Chart.Type = ChartType.Combo;
Chart.Width = 600;
Chart.Height = 300;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.Title = "Hover your mouse over a column to reveal the months breakdown.";
Chart.ShowDateInTitle = false;
Chart.DefaultElement.DefaultSubValue.Visible = false;
//Disable the legend box, we will use the tooltips to view information typically shown there.
Chart.LegendBox.Visible = false;
//Add a shading effect to give the columns some more visual polish.
Chart.ShadingEffect = true;
Chart.ShadingEffectMode = ShadingEffectMode.Three;
//This is the bulk of the work for this sample
Chart.DefaultElement.ToolTip = "%Name %YValue\n<Chart:Pie values='%SubValueList' Colors='Red,Yellow,Green' Shading='4' width='100' height='100'>";
// y axis label.
Chart.YAxis.Label.Text = "GDP (Millions)";
Chart.YAxis.SmartScaleBreak = true;
Chart.SeriesCollection.Add(getLiveData());
}
SeriesCollection getLiveData()
{
DataEngine de = new DataEngine(ConfigurationManager.AppSettings["DNCConnectionString"]);
de.ChartObject = Chart;
de.StartDate=new System.DateTime(2022,1,1,0,0,0);
de.EndDate = new System.DateTime(2022,12,31,23,59,59);
de.SqlStatement = @"SELECT OrderDate,Sum(Quantity) FROM Orders WHERE OrderDate >= #STARTDATE# AND OrderDate <= #ENDDATE# GROUP BY Orders.OrderDate ORDER BY Orders.OrderDate";
de.DateGrouping = TimeInterval.Quarter;
de.SubValueDateGrouping = TimeInterval.Months;
return de.GetSeries();
}
</script>
</head>
<body>
<br/>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript ToolTip Chart</title>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates using a dynamic chart inside tooltips.
Chart.Type = ChartType.Combo
Chart.Width = 600
Chart.Height = 300
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.Title = "Hover your mouse over a column to reveal the months breakdown."
Chart.ShowDateInTitle = False
Chart.DefaultElement.DefaultSubValue.Visible = False
'Disable the legend box, we will use the tooltips to view information typically shown there.
Chart.LegendBox.Visible = False
'Add a shading effect to give the columns some more visual polish.
Chart.ShadingEffect = True
Chart.ShadingEffectMode = ShadingEffectMode.Three
'This is the bulk of the work for this sample
Chart.DefaultElement.ToolTip = "%Name %YValue" & Constants.vbLf & "<Chart:Pie values='%SubValueList' Colors='Red,Yellow,Green' Shading='4' width='100' height='100'>"
' y axis label.
Chart.YAxis.Label.Text = "GDP (Millions)"
Chart.YAxis.SmartScaleBreak = True
Chart.SeriesCollection.Add(getLiveData())
End Sub
Function getLiveData() As SeriesCollection
Dim de As DataEngine = New DataEngine(ConfigurationManager.AppSettings("DNCConnectionString"))
de.ChartObject = Chart
de.StartDate = New System.DateTime(2022,1,1,0,0,0)
de.EndDate = New System.DateTime(2022,12,31,23,59,59)
de.SqlStatement = "SELECT OrderDate,Sum(Quantity) FROM Orders WHERE OrderDate >= #STARTDATE# AND OrderDate <= #ENDDATE# GROUP BY Orders.OrderDate ORDER BY Orders.OrderDate"
de.DateGrouping = TimeInterval.Quarter
de.SubValueDateGrouping = TimeInterval.Months
Return de.GetSeries()
End Function
</script>
</head>
<body>
<br/>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>
- Sample FilenameJsToolTipChart.aspx
- Version5.1
- Uses DatabaseYes