Gallery

Gallery > Interactivity

JS Icon Chart Types

Demonstrates UI dropdown control with morphing svg icons.

Download Show C# Code Show VB Code

<%@ 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>.netCHARTING Sample</title>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates UI dropdown control with morphing svg icons.

Chart.Type = ChartType.Combo;//Horizontal;
Chart.Width = 600;
Chart.Height = 350;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.XAxis.Scale = Scale.Time;
Chart.YAxis.Label.Text = "Applicants";
Chart.JS.Enabled = true;
Chart.JS.ControlID = "chart";
Chart.LegendBox.Visible = false;

// *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();

Chart.JS.Settings.Add("toolbar_items_changecharttype_type", "select");
Chart.JS.Settings.Add("toolbar_items_changecharttype_position", "inside top left");
Chart.JS.Settings.Add("toolbar_items_changecharttype_value", "<icon name=linear/ecommerce/graph-column color=#333 animation={} size=40>");
Chart.JS.Settings.Add("toolbar_items_changecharttype_icon_visible", "false");
Chart.JS.Settings.Add("toolbar_items_changecharttype_width", "72");
Chart.JS.Settings.Add("toolbar_items_changecharttype_height", "54");
Chart.JS.Settings.Add("toolbar_items_changecharttype_label_align", "center");
Chart.JS.Settings.Add("toolbar_items_changecharttype_outline_width", "0");
Chart.JS.Settings.Add("toolbar_items_changecharttype_fill", "lightgray");
Chart.JS.Settings.Add("toolbar_items_changecharttype_itemsBox_outline_width", "0");
Chart.JS.Settings.Add("toolbar_items_changecharttype_states_hover_fill", "gray");
Chart.JS.Settings.Add("toolbar_items_changecharttype_states_hover_outline_width", "0");
Chart.JS.Settings.Add("toolbar_items_changecharttype_defaultItem_width", "72");
Chart.JS.Settings.Add("toolbar_items_changecharttype_defaultItem_height", "54");
Chart.JS.Settings.Add("toolbar_items_changecharttype_defaultItem_icon_visible", "false");
Chart.JS.Settings.Add("toolbar_items_changecharttype_defaultItem_label_align", "center");
Chart.JS.Settings.Add("toolbar_items_changecharttype_defaultItem_states_select_fill", "lightgray");

Chart.JS.Settings.Add("toolbar_items_changecharttype_items", "js:icons.map(function(ic){return '<icon name='+ic+' color=#333 animation={} size=40>';})");
Chart.JS.Settings.Add("toolbar_items_changecharttype_events_change", "js:function(path){for(var i=0;i<types.length;i++){if(path.indexOf(icons[i])!=-1){chart.options({defaultSeries:{type:types[i]}});}}}");

// Add the random data.
Chart.SeriesCollection.Add(mySC);
}
SeriesCollection getRandomData()
{
SeriesCollection SC = new SeriesCollection();
Series applicants = new Series();
applicants.Name = "Applicants";
applicants.Elements.Add(new Element("",new DateTime(2019, 1, 1),29));
applicants.Elements.Add(new Element("",new DateTime(2019, 2, 1),71));
applicants.Elements.Add(new Element("",new DateTime(2019, 3, 1),106));
applicants.Elements.Add(new Element("",new DateTime(2019, 4, 1),66));
applicants.Elements.Add(new Element("",new DateTime(2019, 5, 1),169));
applicants.Elements.Add(new Element("",new DateTime(2019, 6, 1),144));

SC.Add(applicants);

return SC;
}
</script>
<script type="text/javascript">
var types = ['column', 'line'];
var icons = ['linear/ecommerce/graph-column', 'material/editor/show-chart'];
</script>
</head>
<body>
<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>.netCHARTING Sample</title>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates UI dropdown control with morphing svg icons.

Chart.Type = ChartType.Combo 'Horizontal;
Chart.Width = 600
Chart.Height = 350
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.XAxis.Scale = Scale.Time
Chart.YAxis.Label.Text = "Applicants"
Chart.JS.Enabled = True
Chart.JS.ControlID = "chart"
Chart.LegendBox.Visible = False

' *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()

Chart.JS.Settings.Add("toolbar_items_changecharttype_type", "select")
Chart.JS.Settings.Add("toolbar_items_changecharttype_position", "inside top left")
Chart.JS.Settings.Add("toolbar_items_changecharttype_value", "<icon name=linear/ecommerce/graph-column color=#333 animation={} size=40>")
Chart.JS.Settings.Add("toolbar_items_changecharttype_icon_visible", "false")
Chart.JS.Settings.Add("toolbar_items_changecharttype_width", "72")
Chart.JS.Settings.Add("toolbar_items_changecharttype_height", "54")
Chart.JS.Settings.Add("toolbar_items_changecharttype_label_align", "center")
Chart.JS.Settings.Add("toolbar_items_changecharttype_outline_width", "0")
Chart.JS.Settings.Add("toolbar_items_changecharttype_fill", "lightgray")
Chart.JS.Settings.Add("toolbar_items_changecharttype_itemsBox_outline_width", "0")
Chart.JS.Settings.Add("toolbar_items_changecharttype_states_hover_fill", "gray")
Chart.JS.Settings.Add("toolbar_items_changecharttype_states_hover_outline_width", "0")
Chart.JS.Settings.Add("toolbar_items_changecharttype_defaultItem_width", "72")
Chart.JS.Settings.Add("toolbar_items_changecharttype_defaultItem_height", "54")
Chart.JS.Settings.Add("toolbar_items_changecharttype_defaultItem_icon_visible", "false")
Chart.JS.Settings.Add("toolbar_items_changecharttype_defaultItem_label_align", "center")
Chart.JS.Settings.Add("toolbar_items_changecharttype_defaultItem_states_select_fill", "lightgray")

Chart.JS.Settings.Add("toolbar_items_changecharttype_items", "js:icons.map(function(ic){return '<icon name='+ic+' color=#333 animation={} size=40>';})")
Chart.JS.Settings.Add("toolbar_items_changecharttype_events_change", "js:function(path){for(var i=0;i<types.length;i++){if(path.indexOf(icons[i])!=-1){chart.options({defaultSeries:{type:types[i]}});}}}")

' Add the random data.
Chart.SeriesCollection.Add(mySC)
End Sub
Function getRandomData() As SeriesCollection
Dim SC As SeriesCollection = New SeriesCollection()
Dim applicants As Series = New Series()
applicants.Name = "Applicants"
applicants.Elements.Add(New Element("",New DateTime(2019, 1, 1),29))
applicants.Elements.Add(New Element("",New DateTime(2019, 2, 1),71))
applicants.Elements.Add(New Element("",New DateTime(2019, 3, 1),106))
applicants.Elements.Add(New Element("",New DateTime(2019, 4, 1),66))
applicants.Elements.Add(New Element("",New DateTime(2019, 5, 1),169))
applicants.Elements.Add(New Element("",New DateTime(2019, 6, 1),144))

SC.Add(applicants)

Return SC
End Function
</script>
<script type="text/javascript">
var types = ['column', 'line'];
var icons = ['linear/ecommerce/graph-column', 'material/editor/show-chart'];
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>

Sample FilenameJsIconChartTypes.aspx
Version9.3
Uses DatabaseNo

JS Charting

Gallery

JS Icon Chart Types