AxisTick year = new AxisTick(); year.Label.Text = "%min"; Chart.XAxis.ExtraTicks.Add(year); Chart.JS.Settings.Add("xAxis.customTicks.1.value.pattern.year", "'*'"); Chart.JS.Settings.Add("xAxis.customTicks.1.value.pattern.offset.unit", "day"); Chart.JS.Settings.Add("xAxis.customTicks.1.value.pattern.offset.multiplier", "-45");
// *DYNAMIC DATA NOTE* // This sample uses random data to populate the chart. To populate // a chart with database data see the following resources: // - Classic samples folder // - Help File > Data Tutorials // - Sample: features/DataEngine.aspx SeriesCollection mySC = getRandomData(); // Add the random data. Chart.SeriesCollection.Add(mySC);
} SeriesCollection getRandomData() { SeriesCollection SC = new SeriesCollection(); Random myR = new Random(1); DateTime dt = new DateTime(2019,10,1); for(int a = 1; a < 2; a++) { Series s = new Series(); s.Name = "Occurences"; for(int b = 1; b <9; b++) { Element e = new Element(); e.YValue = myR.Next(40, 80); e.XDateTime = dt = dt.AddMonths(3);
s.Elements.Add(e); } SC.Add(s); } return SC; } </script> <script type="text/javascript"> function qTickText(v){ return dateToQuarter(v[0]);} function dateToQuarter(d) { d = new Date(d); d = d.setDate(d.getDate() + 47); d = new Date(d); return 'Q'+(Math.floor(d.getMonth() / 3)+1); } </script> </head> <body> <div align="center"> <dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px"> </dotnet:Chart> </div> </body> </html>
Chart.XAxis.ClearValues = True Chart.XAxis.Scale = Scale.Time Dim quarter As AxisTick = New AxisTick() quarter.Label.Text = "js:qTickText" Chart.XAxis.ExtraTicks.Add(quarter) Chart.JS.Settings.Add("xAxis.customTicks.0.value.pattern.quarter", "'*'") Chart.JS.Settings.Add("xAxis.customTicks.0.value.pattern.offset.unit", "day") Chart.JS.Settings.Add("xAxis.customTicks.0.value.pattern.offset.multiplier", "-45")
Dim year As AxisTick = New AxisTick() year.Label.Text = "%min" Chart.XAxis.ExtraTicks.Add(year) Chart.JS.Settings.Add("xAxis.customTicks.1.value.pattern.year", "'*'") Chart.JS.Settings.Add("xAxis.customTicks.1.value.pattern.offset.unit", "day") Chart.JS.Settings.Add("xAxis.customTicks.1.value.pattern.offset.multiplier", "-45")
' *DYNAMIC DATA NOTE* ' This sample uses random data to populate the chart. To populate ' a chart with database data see the following resources: ' - Classic samples folder ' - Help File > Data Tutorials ' - Sample: features/DataEngine.aspx Dim mySC As SeriesCollection = getRandomData() ' Add the random data. Chart.SeriesCollection.Add(mySC)
End Sub Function getRandomData() As SeriesCollection Dim SC As SeriesCollection = New SeriesCollection() Dim myR As Random = New Random(1) Dim dt As DateTime = New DateTime(2019,10,1) For a As Integer = 1 To 1 Dim s As Series = New Series() s.Name = "Occurences" For b As Integer = 1 To 8 Dim e As Element = New Element() e.YValue = myR.Next(40, 80) dt = dt.AddMonths(3) e.XDateTime = dt
s.Elements.Add(e) Next b SC.Add(s) Next a Return SC End Function </script> <script type="text/javascript"> function qTickText(v){ return dateToQuarter(v[0]);} function dateToQuarter(d) { d = new Date(d); d = d.setDate(d.getDate() + 47); d = new Date(d); return 'Q'+(Math.floor(d.getMonth() / 3)+1); } </script> </head> <body> <div align="center"> <dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px"> </dotnet:Chart> </div> </body> </html>
Previous