Gallery
PreviousJS Star Wars History
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// This sample demonstrates an interactive bar chart with custom legend entry checkbox.
// Set he chart size.
Chart.Width = 600;
Chart.Height = 580;
Chart.Debug = false;
Chart.Type = ChartType.ComboHorizontal;
Chart.ChartArea.ClearColors();
Chart.LegendBox.Visible = false;
Chart.Palette = new Color[] { };
// Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp";
// Set the title.
Chart.TitleBox.Label.Text = "Star Wars Movies in Numbers";
Chart.TitleBox.Label.Font = new Font("Raleway", 22, FontStyle.Bold);
Chart.YAxis.Crosshair = new AxisTick();
Chart.DefaultElement.ToolTip = "%category: {%yValue:c0}";
Chart.ToolTipTemplate = "js:myTTCallback";
// Enable JSCharting
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
Chart.JS.RenderCallback = "callbackFunc";
Chart.XAxis.ReverseSeries = true;
Chart.XAxis.DefaultTick.GridLine.Color = Color.LightGray;
DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/star-wars-history.csv";
de.DataFields = "name=short_name,yAxis=Budget,yAxis=Opening Weekend,yAxis=Domestic Box Office,yAxis=Worldwide Box Office,movie,release_date,adjusted_for_inflation,imdb,rotten_tomatoes";//cvs must have header
SeriesCollection sc = de.GetSeries();
//Budget
Series starWarsBudget = new Series();
Series starWarsBudgetAdjusted = new Series();
for (int j = sc[0].Elements.Count - 1; j > -1; j--)
{
DateTime dt = DateTime.Parse(sc[0].Elements[j].CustomAttributes["release_date"].ToString());
sc[0].Elements[j].Name = sc[0].Elements[j].Name + " (" + dt.Year.ToString() + ")";
if (bool.Parse(sc[0].Elements[j].CustomAttributes["adjusted_for_inflation"].ToString()))
starWarsBudgetAdjusted.Elements.Add(sc[0].Elements[j]);
else
starWarsBudget.Elements.Add(sc[0].Elements[j]);
}
starWarsBudget.Name = "Budget";
starWarsBudgetAdjusted.Name = "BudgetA";
starWarsBudget.DefaultElement.CustomAttributes.Add("category", "Budget");
starWarsBudgetAdjusted.DefaultElement.CustomAttributes.Add("category", "Budget");
starWarsBudgetAdjusted.DefaultElement.Color = starWarsBudget.DefaultElement.Color = ColorTranslator.FromHtml("#FFD600");
Chart.SeriesCollection.Add(starWarsBudget);
Chart.SeriesCollection.Add(starWarsBudgetAdjusted);
//Opening Weekend
Series starWarsOpeningWeekend = new Series();
Series starWarsOpeningWeekendAdjusted = new Series();
for (int j = sc[1].Elements.Count - 1; j > -1; j--)
{
sc[1].Elements[j].Name = sc[0].Elements[j].Name;
if (bool.Parse(sc[1].Elements[j].CustomAttributes["adjusted_for_inflation"].ToString()))
starWarsOpeningWeekendAdjusted.Elements.Add(sc[1].Elements[j]);
else
starWarsOpeningWeekend.Elements.Add(sc[1].Elements[j]);
}
starWarsOpeningWeekendAdjusted.DefaultElement.Color = starWarsOpeningWeekend.DefaultElement.Color = ColorTranslator.FromHtml("#6fb98f");
starWarsOpeningWeekend.Name = "Opening";
starWarsOpeningWeekendAdjusted.Name = "OpeningA";
starWarsOpeningWeekend.DefaultElement.CustomAttributes.Add("category", "Opening Weekend");
starWarsOpeningWeekendAdjusted.DefaultElement.CustomAttributes.Add("category", "Opening Weekend");
Chart.SeriesCollection.Add(starWarsOpeningWeekend);
Chart.SeriesCollection.Add(starWarsOpeningWeekendAdjusted);
//Domestic Box Office
Series starWarsDomesticBoxOffice = new Series();
Series starWarsDomesticBoxOfficeAdjusted = new Series();
for (int j = sc[2].Elements.Count - 1; j > -1; j--)
{
sc[2].Elements[j].Name = sc[0].Elements[j].Name;
if (bool.Parse(sc[2].Elements[j].CustomAttributes["adjusted_for_inflation"].ToString()))
starWarsDomesticBoxOfficeAdjusted.Elements.Add(sc[2].Elements[j]);
else
starWarsDomesticBoxOffice.Elements.Add(sc[2].Elements[j]);
}
starWarsDomesticBoxOfficeAdjusted.DefaultElement.Color = starWarsDomesticBoxOffice.DefaultElement.Color = ColorTranslator.FromHtml("#4595a4");
starWarsDomesticBoxOffice.Name = "Domestic";
starWarsDomesticBoxOfficeAdjusted.Name = "DomesticA";
starWarsDomesticBoxOffice.DefaultElement.CustomAttributes.Add("category", "Domestic Box Office");
starWarsDomesticBoxOfficeAdjusted.DefaultElement.CustomAttributes.Add("category", "Domestic Box Office");
Chart.SeriesCollection.Add(starWarsDomesticBoxOffice);
Chart.SeriesCollection.Add(starWarsDomesticBoxOfficeAdjusted);
//Worldwide Box Office
Series starWarsWorldwideBoxOffice = new Series();
Series starWarsWorldwideBoxOfficeAdjusted = new Series();
for (int j = sc[3].Elements.Count - 1; j > -1; j--)
{
sc[3].Elements[j].Name = sc[0].Elements[j].Name;
if (bool.Parse(sc[3].Elements[j].CustomAttributes["adjusted_for_inflation"].ToString()))
starWarsWorldwideBoxOfficeAdjusted.Elements.Add(sc[3].Elements[j]);
else
starWarsWorldwideBoxOffice.Elements.Add(sc[3].Elements[j]);
}
starWarsWorldwideBoxOfficeAdjusted.DefaultElement.Color = starWarsWorldwideBoxOffice.DefaultElement.Color = ColorTranslator.FromHtml("#3e4e6d");
starWarsWorldwideBoxOffice.Name = "Worldwide";
starWarsWorldwideBoxOfficeAdjusted.Name = "WorldwideA";
starWarsWorldwideBoxOffice.DefaultElement.CustomAttributes.Add("category", "Worldwide Box Office");
starWarsWorldwideBoxOfficeAdjusted.DefaultElement.CustomAttributes.Add("category", "Worldwide Box Office");
Chart.SeriesCollection.Add(starWarsWorldwideBoxOffice);
Chart.SeriesCollection.Add(starWarsWorldwideBoxOfficeAdjusted);
Chart.XAxis.ReverseSeries = false;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery Sample</title>
<style>
/* The container */
.container {
height: 18px;
font-family: Tahoma;
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 15px;
width: 15px;
background-color: white;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: white;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
.container input:checked ~ .budget {
background-color: #FFD600;
border: 1px solid #FFD600;
}
.container input ~ .budget {
border: 2px solid #FFD600;
}
.container input:checked ~ .opening {
background-color: #6FB98F;
border: 1px solid #6FB98F;
}
.container input ~ .opening {
border: 2px solid #6FB98F;
}
.container input:checked ~ .domestic {
background-color: #4595A4;
border: 1px solid #4595A4;
}
.container input ~ .domestic {
border: 2px solid #4595A4;
}
.container input:checked ~ .worldwide {
background-color: #3E4E6D;
border: 1px solid #3E4E6D;
}
.container input ~ .worldwide {
border: 2px solid #3E4E6D;
}
.container input:checked ~ .adjusted {
background-color: black;
border: 1px solid black;
}
.container input ~ .adjusted {
border: 2px solid black;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 4px;
top: 0px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<script>
function callbackFunc(chart) {
var seriesA = chart.series('BudgetA');
// toggle series visibility. Passing a bool parameter indicates whether to show or hide without toggling.
seriesA.visible(false);
var series = chart.series('Budget');
series.visible(false);
seriesA = chart.series('OpeningA');
seriesA.visible(false);
series = chart.series('Opening');
series.visible(false);
seriesA = chart.series('DomesticA');
seriesA.visible(false);
seriesA = chart.series('WorldwideA');
seriesA.visible(false);
}
function myTTCallback(points) {
var template = "<b>%xValue</b><br>%points<br><br>IMDB: <b>%IMDB</b><br>Tomatometer: <b>%TOMATOES</b>";
var imdb = "<icon name=material/toggle/star size=15 color=#ffd43b verticalAlign=top> " + points[0].options('attributes.IMDB') + "/10";
template = template.replace("%IMDB", imdb);
var tomato = tomatoIcon(points[0].options('attributes.ROTTEN_TOMATOES'));
template = template.replace("%TOMATOES", tomato);
return template;
}
function tomatoIcon(score) {
var tomatoIconFresh =
'<absolute><icon color=#FA320A margin_top=2 size=14 verticalAlign=bottom path=m78.3 43.3c-0.8-12.4-7.1-21.6-16.5-26.8 0.1 0.3-0.2 0.7-0.5 0.5-6.2-2.7-16.7 6.1-24 1.5 0.1 1.6-0.3 9.7-11.6 10.1-0.3 0-0.4-0.3-0.2-0.5 1.5-1.7 3-6.1 0.8-8.4-4.7 4.2-7.4 5.8-16.5 3.7-5.8 6-9.1 14.3-8.4 24.6 1.3 21 21 33 40.8 31.8 19.9-1.1 37.5-15.5 36.1-36.5>' +
'<icon color=#00912D size=12 margin_top=-3 verticalAlign=bottom path=m42.2 11.5c4.1-1 15.8-0.1 19.6 4.9 0.2 0.3-0.1 0.9-0.5 0.7-6.2-2.7-16.7 6.1-24 1.5 0.1 1.6-0.3 9.7-11.6 10.1-0.3 0-0.4-0.3-0.2-0.5 1.5-1.7 3-6.1 0.8-8.4-5.1 4.6-7.9 6.1-19 3.1-0.4-0.1-0.3-0.7 0.1-0.9 2.1-0.8 6.9-4.3 11.4-5.9 0.9-0.3 1.7-0.5 2.5-0.7-5-0.4-7.2-1.1-10.4-0.7-0.3 0.1-0.6-0.4-0.4-0.6 4.3-5.5 12.1-7.1 16.9-4.2-3-3.7-5.3-6.6-5.3-6.6l5.5-3.1s2.3 5.1 3.9 8.8c4.1-6.1 11.8-6.6 15-2.3 0.2 0.3 0 0.6-0.3 0.6-2.5-0.1-3.9 2.3-4 4.2></absolute>';
var tomatoIconRotten =
'<icon color=#0AC855 size=14 verticalAlign=middle path=m71.5 71.5c-15.1 0.8-18.2-16.5-24.1-16.4-2.5 0.1-4.5 2.7-3.6 5.8 0.5 1.7 1.8 4.2 2.7 5.7 3 5.4-1.4 11.6-6.5 12.1-8.5 0.9-12.1-4.1-11.9-9.1 0.2-5.7 5.1-11.5 0.1-14-5.2-2.6-9.4 7.5-14.3 9.8-4.5 2-10.7 0.5-12.9-4.5-1.8-3.6-1.5-10.3 5.4-12.9 4.3-1.6 14 2.1 14.5-2.6 0.6-5.4-10.1-5.9-13.3-7.2-5.8-2.2-9.1-7.1-6.5-12.4 2-4 7.8-5.6 12.2-3.8 5.3 2.1 6.2 7.6 8.9 9.9 2.3 2 5.6 2.2 7.7 0.9 1.5-1 2.1-3.2 1.5-5.2-0.8-2.7-2.8-4.3-4.8-6-3.6-3-8.7-5.5-5.6-13.4 2.5-6.5 9.8-6.7 9.8-6.7 2.9-0.3 5.5 0.6 7.7 2.5 2.8 2.5 3.4 5.9 2.9 9.6-0.4 3.3-1.6 6.2-2.2 9.5-0.7 3.8 1.3 7.6 5.2 7.8 5.1 0.2 6.6-3.7 7.2-6.2 0.9-3.6 2.1-7 5.5-9.1 4.8-3 11.5-2.4 14.6 3.5 2.5 4.6 1.7 11-2.1 14.5-1.7 1.6-3.7 2.1-5.9 2.1-3.2 0-6.3-0.1-9.2 1.4-2 1-2.9 2.6-2.9 4.8 0 2.1 1.1 3.5 2.9 4.5 3.4 1.7 7.2 2.1 10.8 2.7 5.3 0.9 10 2.8 13 7.8l0.1 0.1c3.5 5.7-0.1 14.1-6.9 14.5>';
return score > 60 ? tomatoIconFresh + ' ' + score + '%' : tomatoIconRotten + ' ' + score + '%';
}
function changeBudget(val) {
var adjustChecked = document.getElementById("InflationAdjusted").checked;
//if (val.checked) {
var seriesA = myJSC.series('BudgetA');
// toggle series visibility. Passing a bool parameter indicates whether to show or hide without toggling.
seriesA.visible(adjustChecked && val.checked);
var series = myJSC.series('Budget');
series.visible(!adjustChecked && val.checked);
//}
//else {
// var seriesA = myJSC.series('BudgetA');
// // toggle series visibility. Passing a bool parameter indicates whether to show or hide without toggling.
// seriesA.visible(val.checked);
// var series = myJSC.series('Budget');
// series.visible(val.checked);
//}
}
function changeOpening(val) {
var adjustChecked = document.getElementById("InflationAdjusted").checked;
var seriesA = myJSC.series('OpeningA');
// toggle series visibility. Passing a bool parameter indicates whether to show or hide without toggling.
seriesA.visible(adjustChecked && val.checked);
var series = myJSC.series('Opening');
series.visible(!adjustChecked && val.checked);
}
function changeDomestic(val) {
var adjustChecked = document.getElementById("InflationAdjusted").checked;
var seriesA = myJSC.series('DomesticA');
// toggle series visibility. Passing a bool parameter indicates whether to show or hide without toggling.
seriesA.visible(adjustChecked && val.checked);
var series = myJSC.series('Domestic');
series.visible(!adjustChecked && val.checked);
}
function changeWorldwide(val) {
var adjustChecked = document.getElementById("InflationAdjusted").checked;
var seriesA = myJSC.series('WorldwideA');
// toggle series visibility. Passing a bool parameter indicates whether to show or hide without toggling.
seriesA.visible(adjustChecked && val.checked);
var series = myJSC.series('Worldwide');
series.visible(!adjustChecked && val.checked);
}
function changeAdjusted(val) {
var adjustChecked = val.checked;
var seriesA = myJSC.series('BudgetA');
// toggle series visibility. Passing a bool parameter indicates whether to show or hide without toggling.
seriesA.visible(adjustChecked && document.getElementById("budget").checked);
var series = myJSC.series('Budget');
series.visible(!adjustChecked && document.getElementById("budget").checked);
seriesA = myJSC.series('OpeningA');
seriesA.visible(adjustChecked && document.getElementById("opening").checked);
series = myJSC.series('Opening');
series.visible(!adjustChecked && document.getElementById("opening").checked);
seriesA = myJSC.series('DomesticA');
seriesA.visible(adjustChecked && document.getElementById("domestic").checked);
series = myJSC.series('Domestic');
series.visible(!adjustChecked && document.getElementById("domestic").checked);
seriesA = myJSC.series('WorldwideA');
seriesA.visible(adjustChecked && document.getElementById("worldwide").checked);
series = myJSC.series('Worldwide');
series.visible(!adjustChecked && document.getElementById("worldwide").checked);
}
</script>
</head>
<body>
<div style="width: 780px; height: 450px; margin: auto;">
<div style="width: 600px; height: 580px; float: left;">
<dotnet:Chart ID="Chart" runat="server" />
</div>
<div style="width: 180px; height: 400px; float: right; background-color: transparent;">
<div style="width: 180px; height: 50px; background-color: transparent;"></div>
<div>
<label class="container">
Budget
<input type="checkbox" id="budget" class="budget" onchange="changeBudget(this)">
<span class="checkmark budget"></span>
</label>
</div>
<div>
<label class="container">
Opening Weekend
<input type="checkbox" id="opening" onchange="changeOpening(this)">
<span class="checkmark opening"></span>
</label>
</div>
<div>
<label class="container">
Domestic Box Office
<input type="checkbox" id="domestic" checked="checked" onchange="changeDomestic(this)">
<span class="checkmark domestic"></span>
</label>
</div>
<div>
<label class="container">
Worldwide Box Office
<input type="checkbox" id="worldwide" checked="checked" onchange="changeWorldwide(this)">
<span class="checkmark worldwide"></span>
</label>
</div>
<div style="border-top: 1px solid gray; margin-bottom: 2px; padding-top: 3px;">
<label class="container">
Inflation Adjusted
<input type="checkbox" id="InflationAdjusted" name="checkbox" onchange="changeAdjusted(this)" value="value">
<span class="checkmark adjusted"></span>
</label>
</div>
</div>
</div>
</body>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' This sample demonstrates an interactive bar chart with custom legend entry checkbox.
' Set he chart size.
Chart.Width = 600
Chart.Height = 580
Chart.Debug = False
Chart.Type = ChartType.ComboHorizontal
Chart.ChartArea.ClearColors()
Chart.LegendBox.Visible = False
Chart.Palette = New Color() { }
' Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp"
' Set the title.
Chart.TitleBox.Label.Text = "Star Wars Movies in Numbers"
Chart.TitleBox.Label.Font = New Font("Raleway", 22, FontStyle.Bold)
Chart.YAxis.Crosshair = New AxisTick()
Chart.DefaultElement.ToolTip = "%category: {%yValue:c0}"
Chart.ToolTipTemplate = "js:myTTCallback"
' Enable JSCharting
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.JS.RenderCallback = "callbackFunc"
Chart.XAxis.ReverseSeries = True
Chart.XAxis.DefaultTick.GridLine.Color = Color.LightGray
Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/star-wars-history.csv"
de.DataFields = "name=short_name,yAxis=Budget,yAxis=Opening Weekend,yAxis=Domestic Box Office,yAxis=Worldwide Box Office,movie,release_date,adjusted_for_inflation,imdb,rotten_tomatoes" 'cvs must have header
Dim sc As SeriesCollection = de.GetSeries()
'Budget
Dim starWarsBudget As Series = New Series()
Dim starWarsBudgetAdjusted As Series = New Series()
For j As Integer = sc(0).Elements.Count - 1 To 0 Step -1
Dim dt As DateTime = DateTime.Parse(sc(0).Elements(j).CustomAttributes("release_date").ToString())
sc(0).Elements(j).Name = sc(0).Elements(j).Name & " (" & dt.Year.ToString() & ")"
If Boolean.Parse(sc(0).Elements(j).CustomAttributes("adjusted_for_inflation").ToString()) Then
starWarsBudgetAdjusted.Elements.Add(sc(0).Elements(j))
Else
starWarsBudget.Elements.Add(sc(0).Elements(j))
End If
Next j
starWarsBudget.Name = "Budget"
starWarsBudgetAdjusted.Name = "BudgetA"
starWarsBudget.DefaultElement.CustomAttributes.Add("category", "Budget")
starWarsBudgetAdjusted.DefaultElement.CustomAttributes.Add("category", "Budget")
starWarsBudget.DefaultElement.Color = ColorTranslator.FromHtml("#FFD600")
starWarsBudgetAdjusted.DefaultElement.Color = starWarsBudget.DefaultElement.Color
Chart.SeriesCollection.Add(starWarsBudget)
Chart.SeriesCollection.Add(starWarsBudgetAdjusted)
'Opening Weekend
Dim starWarsOpeningWeekend As Series = New Series()
Dim starWarsOpeningWeekendAdjusted As Series = New Series()
For j As Integer = sc(1).Elements.Count - 1 To 0 Step -1
sc(1).Elements(j).Name = sc(0).Elements(j).Name
If Boolean.Parse(sc(1).Elements(j).CustomAttributes("adjusted_for_inflation").ToString()) Then
starWarsOpeningWeekendAdjusted.Elements.Add(sc(1).Elements(j))
Else
starWarsOpeningWeekend.Elements.Add(sc(1).Elements(j))
End If
Next j
starWarsOpeningWeekend.DefaultElement.Color = ColorTranslator.FromHtml("#6fb98f")
starWarsOpeningWeekendAdjusted.DefaultElement.Color = starWarsOpeningWeekend.DefaultElement.Color
starWarsOpeningWeekend.Name = "Opening"
starWarsOpeningWeekendAdjusted.Name = "OpeningA"
starWarsOpeningWeekend.DefaultElement.CustomAttributes.Add("category", "Opening Weekend")
starWarsOpeningWeekendAdjusted.DefaultElement.CustomAttributes.Add("category", "Opening Weekend")
Chart.SeriesCollection.Add(starWarsOpeningWeekend)
Chart.SeriesCollection.Add(starWarsOpeningWeekendAdjusted)
'Domestic Box Office
Dim starWarsDomesticBoxOffice As Series = New Series()
Dim starWarsDomesticBoxOfficeAdjusted As Series = New Series()
For j As Integer = sc(2).Elements.Count - 1 To 0 Step -1
sc(2).Elements(j).Name = sc(0).Elements(j).Name
If Boolean.Parse(sc(2).Elements(j).CustomAttributes("adjusted_for_inflation").ToString()) Then
starWarsDomesticBoxOfficeAdjusted.Elements.Add(sc(2).Elements(j))
Else
starWarsDomesticBoxOffice.Elements.Add(sc(2).Elements(j))
End If
Next j
starWarsDomesticBoxOffice.DefaultElement.Color = ColorTranslator.FromHtml("#4595a4")
starWarsDomesticBoxOfficeAdjusted.DefaultElement.Color = starWarsDomesticBoxOffice.DefaultElement.Color
starWarsDomesticBoxOffice.Name = "Domestic"
starWarsDomesticBoxOfficeAdjusted.Name = "DomesticA"
starWarsDomesticBoxOffice.DefaultElement.CustomAttributes.Add("category", "Domestic Box Office")
starWarsDomesticBoxOfficeAdjusted.DefaultElement.CustomAttributes.Add("category", "Domestic Box Office")
Chart.SeriesCollection.Add(starWarsDomesticBoxOffice)
Chart.SeriesCollection.Add(starWarsDomesticBoxOfficeAdjusted)
'Worldwide Box Office
Dim starWarsWorldwideBoxOffice As Series = New Series()
Dim starWarsWorldwideBoxOfficeAdjusted As Series = New Series()
For j As Integer = sc(3).Elements.Count - 1 To 0 Step -1
sc(3).Elements(j).Name = sc(0).Elements(j).Name
If Boolean.Parse(sc(3).Elements(j).CustomAttributes("adjusted_for_inflation").ToString()) Then
starWarsWorldwideBoxOfficeAdjusted.Elements.Add(sc(3).Elements(j))
Else
starWarsWorldwideBoxOffice.Elements.Add(sc(3).Elements(j))
End If
Next j
starWarsWorldwideBoxOffice.DefaultElement.Color = ColorTranslator.FromHtml("#3e4e6d")
starWarsWorldwideBoxOfficeAdjusted.DefaultElement.Color = starWarsWorldwideBoxOffice.DefaultElement.Color
starWarsWorldwideBoxOffice.Name = "Worldwide"
starWarsWorldwideBoxOfficeAdjusted.Name = "WorldwideA"
starWarsWorldwideBoxOffice.DefaultElement.CustomAttributes.Add("category", "Worldwide Box Office")
starWarsWorldwideBoxOfficeAdjusted.DefaultElement.CustomAttributes.Add("category", "Worldwide Box Office")
Chart.SeriesCollection.Add(starWarsWorldwideBoxOffice)
Chart.SeriesCollection.Add(starWarsWorldwideBoxOfficeAdjusted)
Chart.XAxis.ReverseSeries = False
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery Sample</title>
<style>
/* The container */
.container {
height: 18px;
font-family: Tahoma;
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 15px;
width: 15px;
background-color: white;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: white;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
.container input:checked ~ .budget {
background-color: #FFD600;
border: 1px solid #FFD600;
}
.container input ~ .budget {
border: 2px solid #FFD600;
}
.container input:checked ~ .opening {
background-color: #6FB98F;
border: 1px solid #6FB98F;
}
.container input ~ .opening {
border: 2px solid #6FB98F;
}
.container input:checked ~ .domestic {
background-color: #4595A4;
border: 1px solid #4595A4;
}
.container input ~ .domestic {
border: 2px solid #4595A4;
}
.container input:checked ~ .worldwide {
background-color: #3E4E6D;
border: 1px solid #3E4E6D;
}
.container input ~ .worldwide {
border: 2px solid #3E4E6D;
}
.container input:checked ~ .adjusted {
background-color: black;
border: 1px solid black;
}
.container input ~ .adjusted {
border: 2px solid black;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 4px;
top: 0px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<script>
function callbackFunc(chart) {
var seriesA = chart.series('BudgetA');
// toggle series visibility. Passing a bool parameter indicates whether to show or hide without toggling.
seriesA.visible(false);
var series = chart.series('Budget');
series.visible(false);
seriesA = chart.series('OpeningA');
seriesA.visible(false);
series = chart.series('Opening');
series.visible(false);
seriesA = chart.series('DomesticA');
seriesA.visible(false);
seriesA = chart.series('WorldwideA');
seriesA.visible(false);
}
function myTTCallback(points) {
var template = "<b>%xValue</b><br>%points<br><br>IMDB: <b>%IMDB</b><br>Tomatometer: <b>%TOMATOES</b>";
var imdb = "<icon name=material/toggle/star size=15 color=#ffd43b verticalAlign=top> " + points[0].options('attributes.IMDB') + "/10";
template = template.replace("%IMDB", imdb);
var tomato = tomatoIcon(points[0].options('attributes.ROTTEN_TOMATOES'));
template = template.replace("%TOMATOES", tomato);
return template;
}
function tomatoIcon(score) {
var tomatoIconFresh =
'<absolute><icon color=#FA320A margin_top=2 size=14 verticalAlign=bottom path=m78.3 43.3c-0.8-12.4-7.1-21.6-16.5-26.8 0.1 0.3-0.2 0.7-0.5 0.5-6.2-2.7-16.7 6.1-24 1.5 0.1 1.6-0.3 9.7-11.6 10.1-0.3 0-0.4-0.3-0.2-0.5 1.5-1.7 3-6.1 0.8-8.4-4.7 4.2-7.4 5.8-16.5 3.7-5.8 6-9.1 14.3-8.4 24.6 1.3 21 21 33 40.8 31.8 19.9-1.1 37.5-15.5 36.1-36.5>' +
'<icon color=#00912D size=12 margin_top=-3 verticalAlign=bottom path=m42.2 11.5c4.1-1 15.8-0.1 19.6 4.9 0.2 0.3-0.1 0.9-0.5 0.7-6.2-2.7-16.7 6.1-24 1.5 0.1 1.6-0.3 9.7-11.6 10.1-0.3 0-0.4-0.3-0.2-0.5 1.5-1.7 3-6.1 0.8-8.4-5.1 4.6-7.9 6.1-19 3.1-0.4-0.1-0.3-0.7 0.1-0.9 2.1-0.8 6.9-4.3 11.4-5.9 0.9-0.3 1.7-0.5 2.5-0.7-5-0.4-7.2-1.1-10.4-0.7-0.3 0.1-0.6-0.4-0.4-0.6 4.3-5.5 12.1-7.1 16.9-4.2-3-3.7-5.3-6.6-5.3-6.6l5.5-3.1s2.3 5.1 3.9 8.8c4.1-6.1 11.8-6.6 15-2.3 0.2 0.3 0 0.6-0.3 0.6-2.5-0.1-3.9 2.3-4 4.2></absolute>';
var tomatoIconRotten =
'<icon color=#0AC855 size=14 verticalAlign=middle path=m71.5 71.5c-15.1 0.8-18.2-16.5-24.1-16.4-2.5 0.1-4.5 2.7-3.6 5.8 0.5 1.7 1.8 4.2 2.7 5.7 3 5.4-1.4 11.6-6.5 12.1-8.5 0.9-12.1-4.1-11.9-9.1 0.2-5.7 5.1-11.5 0.1-14-5.2-2.6-9.4 7.5-14.3 9.8-4.5 2-10.7 0.5-12.9-4.5-1.8-3.6-1.5-10.3 5.4-12.9 4.3-1.6 14 2.1 14.5-2.6 0.6-5.4-10.1-5.9-13.3-7.2-5.8-2.2-9.1-7.1-6.5-12.4 2-4 7.8-5.6 12.2-3.8 5.3 2.1 6.2 7.6 8.9 9.9 2.3 2 5.6 2.2 7.7 0.9 1.5-1 2.1-3.2 1.5-5.2-0.8-2.7-2.8-4.3-4.8-6-3.6-3-8.7-5.5-5.6-13.4 2.5-6.5 9.8-6.7 9.8-6.7 2.9-0.3 5.5 0.6 7.7 2.5 2.8 2.5 3.4 5.9 2.9 9.6-0.4 3.3-1.6 6.2-2.2 9.5-0.7 3.8 1.3 7.6 5.2 7.8 5.1 0.2 6.6-3.7 7.2-6.2 0.9-3.6 2.1-7 5.5-9.1 4.8-3 11.5-2.4 14.6 3.5 2.5 4.6 1.7 11-2.1 14.5-1.7 1.6-3.7 2.1-5.9 2.1-3.2 0-6.3-0.1-9.2 1.4-2 1-2.9 2.6-2.9 4.8 0 2.1 1.1 3.5 2.9 4.5 3.4 1.7 7.2 2.1 10.8 2.7 5.3 0.9 10 2.8 13 7.8l0.1 0.1c3.5 5.7-0.1 14.1-6.9 14.5>';
return score > 60 ? tomatoIconFresh + ' ' + score + '%' : tomatoIconRotten + ' ' + score + '%';
}
function changeBudget(val) {
var adjustChecked = document.getElementById("InflationAdjusted").checked;
//if (val.checked) {
var seriesA = myJSC.series('BudgetA');
// toggle series visibility. Passing a bool parameter indicates whether to show or hide without toggling.
seriesA.visible(adjustChecked && val.checked);
var series = myJSC.series('Budget');
series.visible(!adjustChecked && val.checked);
//}
//else {
// var seriesA = myJSC.series('BudgetA');
// // toggle series visibility. Passing a bool parameter indicates whether to show or hide without toggling.
// seriesA.visible(val.checked);
// var series = myJSC.series('Budget');
// series.visible(val.checked);
//}
}
function changeOpening(val) {
var adjustChecked = document.getElementById("InflationAdjusted").checked;
var seriesA = myJSC.series('OpeningA');
// toggle series visibility. Passing a bool parameter indicates whether to show or hide without toggling.
seriesA.visible(adjustChecked && val.checked);
var series = myJSC.series('Opening');
series.visible(!adjustChecked && val.checked);
}
function changeDomestic(val) {
var adjustChecked = document.getElementById("InflationAdjusted").checked;
var seriesA = myJSC.series('DomesticA');
// toggle series visibility. Passing a bool parameter indicates whether to show or hide without toggling.
seriesA.visible(adjustChecked && val.checked);
var series = myJSC.series('Domestic');
series.visible(!adjustChecked && val.checked);
}
function changeWorldwide(val) {
var adjustChecked = document.getElementById("InflationAdjusted").checked;
var seriesA = myJSC.series('WorldwideA');
// toggle series visibility. Passing a bool parameter indicates whether to show or hide without toggling.
seriesA.visible(adjustChecked && val.checked);
var series = myJSC.series('Worldwide');
series.visible(!adjustChecked && val.checked);
}
function changeAdjusted(val) {
var adjustChecked = val.checked;
var seriesA = myJSC.series('BudgetA');
// toggle series visibility. Passing a bool parameter indicates whether to show or hide without toggling.
seriesA.visible(adjustChecked && document.getElementById("budget").checked);
var series = myJSC.series('Budget');
series.visible(!adjustChecked && document.getElementById("budget").checked);
seriesA = myJSC.series('OpeningA');
seriesA.visible(adjustChecked && document.getElementById("opening").checked);
series = myJSC.series('Opening');
series.visible(!adjustChecked && document.getElementById("opening").checked);
seriesA = myJSC.series('DomesticA');
seriesA.visible(adjustChecked && document.getElementById("domestic").checked);
series = myJSC.series('Domestic');
series.visible(!adjustChecked && document.getElementById("domestic").checked);
seriesA = myJSC.series('WorldwideA');
seriesA.visible(adjustChecked && document.getElementById("worldwide").checked);
series = myJSC.series('Worldwide');
series.visible(!adjustChecked && document.getElementById("worldwide").checked);
}
</script>
</head>
<body>
<div style="width: 780px; height: 450px; margin: auto;">
<div style="width: 600px; height: 580px; float: left;">
<dotnet:Chart ID="Chart" runat="server" />
</div>
<div style="width: 180px; height: 400px; float: right; background-color: transparent;">
<div style="width: 180px; height: 50px; background-color: transparent;"></div>
<div>
<label class="container">
Budget
<input type="checkbox" id="budget" class="budget" onchange="changeBudget(this)">
<span class="checkmark budget"></span>
</label>
</div>
<div>
<label class="container">
Opening Weekend
<input type="checkbox" id="opening" onchange="changeOpening(this)">
<span class="checkmark opening"></span>
</label>
</div>
<div>
<label class="container">
Domestic Box Office
<input type="checkbox" id="domestic" checked="checked" onchange="changeDomestic(this)">
<span class="checkmark domestic"></span>
</label>
</div>
<div>
<label class="container">
Worldwide Box Office
<input type="checkbox" id="worldwide" checked="checked" onchange="changeWorldwide(this)">
<span class="checkmark worldwide"></span>
</label>
</div>
<div style="border-top: 1px solid gray; margin-bottom: 2px; padding-top: 3px;">
<label class="container">
Inflation Adjusted
<input type="checkbox" id="InflationAdjusted" name="checkbox" onchange="changeAdjusted(this)" value="value">
<span class="checkmark adjusted"></span>
</label>
</div>
</div>
</div>
</body>
</html>
- Sample FilenameJsStarWarsHistory.aspx
- Version10.1
- Uses DatabaseNo