<%@ 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)
{
// Demonstrates how to create an interactive diverging stacked bar chart.
// Set the chart size.
Chart.Width = 560;
Chart.Height = 920;

Chart.Debug = false;
Chart.Type = ChartType.ComboHorizontal;
Chart.ChartArea.ClearColors();
Chart.LegendBox.Template = "%icon %name";
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.TopRight;
Chart.Palette = new Color[] { ColorTranslator.FromHtml("#67c0b8"), ColorTranslator.FromHtml("#26A69A"), ColorTranslator.FromHtml("#f38684"), ColorTranslator.FromHtml("#EF5350") };
// Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp";
Chart.JS.RenderCallback = "callbackFunc";

// Enable JSCharting
Chart.JS.Enabled = true;
Chart.YAxis.Crosshair = new AxisTick();
Chart.DefaultElement.ToolTip = "js:tooltipFormatter";
Chart.JS.Settings.Add("zAxis.scale_type", "stacked");
Chart.DefaultElement.FocusGlow.Width = 0;
Chart.XAxis.DefaultTick.Label.Color = ColorTranslator.FromHtml("#424242");

Chart.ZAxis.Scale = Scale.Stacked;
Chart.XAxis.DefaultTick.GridLine.Visible = false;
Chart.YAxis.Line.Width = 0;
Chart.XAxis.DefaultTick.Label.Text = "";
Chart.YAxis.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/us-governors-ranking.csv";
de.DataFields = "name=governors,yValueStart=neutral,yValue=approve,party,state";//cvs must have header
SeriesCollection sc = de.GetSeries();
Series approve = new Series("Approve");
approve.JsID = "ap";
approve.DefaultElement.Color = ColorTranslator.FromHtml("#40c057");
Series neutral = new Series("Neutral");
neutral.JsID = "ne";
neutral.DefaultElement.Color = ColorTranslator.FromHtml("#c2b2ad");
Series disapprove = new Series("Disapprove");
disapprove.JsID = "di";
disapprove.DefaultElement.Color = ColorTranslator.FromHtml("#fd7e14");
for (int i = 0; i < sc.Count; i++)
{
for (int j = 0; j < sc[i].Elements.Count; j++)
{
string partyColor = "#ff8787";
if (sc[i].Elements[j].CustomAttributes["party"].ToString() == "Democrat")
partyColor = "#74c0fc";
Element el = new Element();
el.Name = sc[i].Elements[j].Name + " (" + sc[i].Elements[j].CustomAttributes["state"].ToString() + ") " + "<icon name=system/default/circle size=8 verticalAlign=middle color=" + partyColor + ">";
el.JsID = sc[i].Elements[j].Name + "ap";
el.CustomAttributes.Add("percent", sc[i].Elements[j].YValue.ToString());
el.CustomAttributes.Add("icon", "<icon name=material/action/thumb-up margin=2 verticalAlign=middle size=18 color=%color>");
el.CustomAttributes.Add("party", sc[i].Elements[j].CustomAttributes["party"].ToString());
el.YValueStart = sc[i].Elements[j].YValueStart / 2;
el.YValue = sc[i].Elements[j].YValue + el.YValueStart;
approve.Elements.Add(el);

el = new Element();
el.Name = sc[i].Elements[j].Name + " (" + sc[i].Elements[j].CustomAttributes["state"].ToString() + ") " + "<icon name=system/default/circle size=8 verticalAlign=middle color=" + partyColor + ">";
el.JsID = sc[i].Elements[j].Name + "ne";
el.CustomAttributes.Add("percent", sc[i].Elements[j].YValueStart.ToString());
el.CustomAttributes.Add("icon", "<icon name=material/action/thumb-up rotate=-90 margin=2 verticalAlign=middle size=18 color=%color>");
el.CustomAttributes.Add("party", sc[i].Elements[j].CustomAttributes["party"].ToString());
el.YValueStart = -(sc[i].Elements[j].YValueStart / 2);
el.YValue = (sc[i].Elements[j].YValueStart / 2);
neutral.Elements.Add(el);

el = new Element();
el.Name = sc[i].Elements[j].Name + " (" + sc[i].Elements[j].CustomAttributes["state"].ToString() + ") " + "<icon name=system/default/circle size=8 verticalAlign=middle color=" + partyColor + ">";
el.JsID = sc[i].Elements[j].Name + "di";
el.CustomAttributes.Add("percent", (100 - (sc[i].Elements[j].YValue + sc[i].Elements[j].YValueStart)).ToString());
el.CustomAttributes.Add("icon", "<icon name=material/action/thumb-down margin=2 verticalAlign=middle size=18 color=%color>");
el.CustomAttributes.Add("party", sc[i].Elements[j].CustomAttributes["party"].ToString());
el.YValueStart = -(100 - (sc[i].Elements[j].YValue + sc[i].Elements[j].YValueStart / 2));
el.YValue = -(sc[i].Elements[j].YValueStart / 2);
disapprove.Elements.Add(el);

}
}
Chart.SeriesCollection.Add(approve);
Chart.SeriesCollection.Add(neutral);
Chart.SeriesCollection.Add(disapprove);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery Sample</title>
<script type="text/javascript">
var seriesData;
function tooltipFormatter() {
return '%icon <span style="color:%color"><b>%percent%</b></span>';
}
var myJSC;
function callbackFunc(chart) {
myJSC = chart;
}
function filterParty(val) {

// If filtering first time, store a copy series data
if (!seriesData) {
seriesData = JSC.merge([], myJSC.options('series'));
}

// Filter series data by checkbox options
var showReps = document.getElementById('republicans').checked;
var showDems = document.getElementById('democrats').checked;

var filtered = [];
seriesData.forEach(function (series) {
var newSeries = JSC.merge({}, series);
newSeries.points = newSeries.points.filter(function (p) {
return (p.attributes.PARTY === 'Democrat' && showDems) || (p.attributes.PARTY === 'Republican' && showReps)
});
filtered.push(newSeries);
});

myJSC.options({ series: filtered });

}
</script>
<style>
/* The container */
.container {
height: 18px;
font-family: Tahoma;
display: block;
position: relative;
padding-left: 22px;
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 ~ .republicans {
background-color: #ff8787;
border: 1px solid #ff8787;
}

.container input ~ .republicans {
border: 2px solid #ff8787;
}

.container input:checked ~ .democrats {
background-color: #74c0fc;
border: 1px solid #74c0fc;
}

.container input ~ .democrats {
border: 2px solid #74c0fc;
}

.container input:checked ~ .domestic {
background-color: #4595A4;
border: 1px solid #4595A4;
}
.container input ~ .domestic {
border: 2px solid #4595A4;
}
.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);
}
#headerWrapper {
max-width: 350px;
margin: 0px auto;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div style="width: 780px; height: 450px; margin: auto;">
<div id="headerWrapper">
<label style=" font-family:Arial; font-size:small; margin-right:20px;">US Governors Ranking</label>
<label class="container">
Republicans
<input type="checkbox" id="republicans" class="republicans" checked="checked" onchange="filterParty(this)">
<span class="checkmark republicans"></span>
</label>
<label class="container">
Democrats
<input type="checkbox" id="democrats" class="democrats" checked="checked" onchange="filterParty(this)">
<span class="checkmark democrats"></span>
</label>
<dotnet:Chart ID="Chart" runat="server" />
</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)
' Demonstrates how to create an interactive diverging stacked bar chart.
' Set the chart size.
Chart.Width = 560
Chart.Height = 920

Chart.Debug = False
Chart.Type = ChartType.ComboHorizontal
Chart.ChartArea.ClearColors()
Chart.LegendBox.Template = "%icon %name"
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.TopRight
Chart.Palette = New Color() { ColorTranslator.FromHtml("#67c0b8"), ColorTranslator.FromHtml("#26A69A"), ColorTranslator.FromHtml("#f38684"), ColorTranslator.FromHtml("#EF5350") }
' Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp"
Chart.JS.RenderCallback = "callbackFunc"

' Enable JSCharting
Chart.JS.Enabled = True
Chart.YAxis.Crosshair = New AxisTick()
Chart.DefaultElement.ToolTip = "js:tooltipFormatter"
Chart.JS.Settings.Add("zAxis.scale_type", "stacked")
Chart.DefaultElement.FocusGlow.Width = 0
Chart.XAxis.DefaultTick.Label.Color = ColorTranslator.FromHtml("#424242")

Chart.ZAxis.Scale = Scale.Stacked
Chart.XAxis.DefaultTick.GridLine.Visible = False
Chart.YAxis.Line.Width = 0
Chart.XAxis.DefaultTick.Label.Text = ""
Chart.YAxis.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/us-governors-ranking.csv"
de.DataFields = "name=governors,yValueStart=neutral,yValue=approve,party,state" 'cvs must have header
Dim sc As SeriesCollection = de.GetSeries()
Dim approve As Series = New Series("Approve")
approve.JsID = "ap"
approve.DefaultElement.Color = ColorTranslator.FromHtml("#40c057")
Dim neutral As Series = New Series("Neutral")
neutral.JsID = "ne"
neutral.DefaultElement.Color = ColorTranslator.FromHtml("#c2b2ad")
Dim disapprove As Series = New Series("Disapprove")
disapprove.JsID = "di"
disapprove.DefaultElement.Color = ColorTranslator.FromHtml("#fd7e14")
For i As Integer = 0 To sc.Count - 1
For j As Integer = 0 To sc(i).Elements.Count - 1
Dim partyColor As String = "#ff8787"
If sc(i).Elements(j).CustomAttributes("party").ToString() = "Democrat" Then
partyColor = "#74c0fc"
End If
Dim el As Element = New Element()
el.Name = sc(i).Elements(j).Name & " (" & sc(i).Elements(j).CustomAttributes("state").ToString() & ") " & "<icon name=system/default/circle size=8 verticalAlign=middle color=" & partyColor & ">"
el.JsID = sc(i).Elements(j).Name & "ap"
el.CustomAttributes.Add("percent", sc(i).Elements(j).YValue.ToString())
el.CustomAttributes.Add("icon", "<icon name=material/action/thumb-up margin=2 verticalAlign=middle size=18 color=%color>")
el.CustomAttributes.Add("party", sc(i).Elements(j).CustomAttributes("party").ToString())
el.YValueStart = sc(i).Elements(j).YValueStart / 2
el.YValue = sc(i).Elements(j).YValue + el.YValueStart
approve.Elements.Add(el)

el = New Element()
el.Name = sc(i).Elements(j).Name & " (" & sc(i).Elements(j).CustomAttributes("state").ToString() & ") " & "<icon name=system/default/circle size=8 verticalAlign=middle color=" & partyColor & ">"
el.JsID = sc(i).Elements(j).Name & "ne"
el.CustomAttributes.Add("percent", sc(i).Elements(j).YValueStart.ToString())
el.CustomAttributes.Add("icon", "<icon name=material/action/thumb-up rotate=-90 margin=2 verticalAlign=middle size=18 color=%color>")
el.CustomAttributes.Add("party", sc(i).Elements(j).CustomAttributes("party").ToString())
el.YValueStart = -(sc(i).Elements(j).YValueStart / 2)
el.YValue = (sc(i).Elements(j).YValueStart / 2)
neutral.Elements.Add(el)

el = New Element()
el.Name = sc(i).Elements(j).Name & " (" & sc(i).Elements(j).CustomAttributes("state").ToString() & ") " & "<icon name=system/default/circle size=8 verticalAlign=middle color=" & partyColor & ">"
el.JsID = sc(i).Elements(j).Name & "di"
el.CustomAttributes.Add("percent", (100 - (sc(i).Elements(j).YValue + sc(i).Elements(j).YValueStart)).ToString())
el.CustomAttributes.Add("icon", "<icon name=material/action/thumb-down margin=2 verticalAlign=middle size=18 color=%color>")
el.CustomAttributes.Add("party", sc(i).Elements(j).CustomAttributes("party").ToString())
el.YValueStart = -(100 - (sc(i).Elements(j).YValue + sc(i).Elements(j).YValueStart / 2))
el.YValue = -(sc(i).Elements(j).YValueStart / 2)
disapprove.Elements.Add(el)

Next j
Next i
Chart.SeriesCollection.Add(approve)
Chart.SeriesCollection.Add(neutral)
Chart.SeriesCollection.Add(disapprove)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery Sample</title>
<script type="text/javascript">
var seriesData;
function tooltipFormatter() {
return '%icon <span style="color:%color"><b>%percent%</b></span>';
}
var myJSC;
function callbackFunc(chart) {
myJSC = chart;
}
function filterParty(val) {

// If filtering first time, store a copy series data
if (!seriesData) {
seriesData = JSC.merge([], myJSC.options('series'));
}

// Filter series data by checkbox options
var showReps = document.getElementById('republicans').checked;
var showDems = document.getElementById('democrats').checked;

var filtered = [];
seriesData.forEach(function (series) {
var newSeries = JSC.merge({}, series);
newSeries.points = newSeries.points.filter(function (p) {
return (p.attributes.PARTY === 'Democrat' && showDems) || (p.attributes.PARTY === 'Republican' && showReps)
});
filtered.push(newSeries);
});

myJSC.options({ series: filtered });

}
</script>
<style>
/* The container */
.container {
height: 18px;
font-family: Tahoma;
display: block;
position: relative;
padding-left: 22px;
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 ~ .republicans {
background-color: #ff8787;
border: 1px solid #ff8787;
}

.container input ~ .republicans {
border: 2px solid #ff8787;
}

.container input:checked ~ .democrats {
background-color: #74c0fc;
border: 1px solid #74c0fc;
}

.container input ~ .democrats {
border: 2px solid #74c0fc;
}

.container input:checked ~ .domestic {
background-color: #4595A4;
border: 1px solid #4595A4;
}
.container input ~ .domestic {
border: 2px solid #4595A4;
}
.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);
}
#headerWrapper {
max-width: 350px;
margin: 0px auto;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div style="width: 780px; height: 450px; margin: auto;">
<div id="headerWrapper">
<label style=" font-family:Arial; font-size:small; margin-right:20px;">US Governors Ranking</label>
<label class="container">
Republicans
<input type="checkbox" id="republicans" class="republicans" checked="checked" onchange="filterParty(this)">
<span class="checkmark republicans"></span>
</label>
<label class="container">
Democrats
<input type="checkbox" id="democrats" class="democrats" checked="checked" onchange="filterParty(this)">
<span class="checkmark democrats"></span>
</label>
<dotnet:Chart ID="Chart" runat="server" />
</div>
</div>
</body>
</html>