public void BasicSetUp_WithTitle_AndSubtitle()
{
var chart = new HighchartsChart("myChart")
.Title("This is my chart with a title!")
.Subtitle("And this is my subtitle!");
var actual = chart.ToHtmlString();
var expected = MvcHtmlString.Create(@"<div id=""myChart""></div>
<script type=""text/javascript"">
$(document).ready(function () {
hCharts['myChart'] = new Highcharts.Chart({
chart: {
renderTo: 'myChart'
},
title: {
text: 'This is my chart with a title!'
},
subtitle: {
text: 'And this is my subtitle!'
}
});
});
</script>");
HtmlAssert.AreEqual(expected, actual);
}
public void ChartColors()
{
var setup = new HighchartsSetUp("myChart").Colors("#4572A7", "#AA4643", "#89A54E", "#80699B", "#3D96AE", "#DB843D", "#92A8CD", "#A47D7C", "#B5CA92");
var actual = setup.ToHtmlString();
var expected = MvcHtmlString.Create(@"$(document).ready(function () {
hCharts['myChart'] = new Highcharts.Chart({
chart: {
renderTo: 'myChart'
},
colors: [
'#4572A7',
'#AA4643',
'#89A54E',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'
]
});
});");
HtmlAssert.AreEqual(expected, actual);
}
public void BasicSetUp_WithSeries()
{
var actual = new HighchartsChart("myChart")
.Series(
new Serie("Open", new int[] { 10, 15, 61 }),
new Serie("Closed", new int[] { 461, 473, 985 }),
new Serie("Pending", new int[] { 722, 526, 224 })
)
.ToHtmlString();
var expected = MvcHtmlString.Create(@"<div id=""myChart""></div>
<script type=""text/javascript"">
$(document).ready(function () {
hCharts['myChart'] = new Highcharts.Chart({
chart: {
renderTo: 'myChart'
},
series: [
{ name: 'Open', data: [10, 15, 61] },
{ name: 'Closed', data: [461, 473, 985] },
{ name: 'Pending', data: [722, 526, 224] }
]
});
});
</script>");
HtmlAssert.AreEqual(expected, actual);
}
public void Chart_WithBasicPlotOptions()
{
var actual = new HighchartsChart("myChart")
.Options(x => {
x.Line.ShowDataLabels().HideInLegend().Color("#00FF00");
}).ToHtmlString();
var expected = MvcHtmlString.Create(@"<div id=""myChart""></div>
<script type=""text/javascript"">
$(document).ready(function () {
hCharts['myChart'] = new Highcharts.Chart({
chart: {
renderTo: 'myChart'
},
plotOptions: {
line: {
showInLegend: false,
dataLabels: {
enabled: true
},
color: '#00FF00'
}
}
});
});
</script>");
HtmlAssert.AreEqual(expected, actual);
}
public void Chart_WithThreePlotOptions()
{
var actual = new HighchartsChart("myChart")
.Options(x => {
x.Line.HideInLegend();
x.Series.HideInLegend();
x.Column.HideInLegend();
}).ToHtmlString();
var expected = MvcHtmlString.Create(@"<div id=""myChart""></div>
<script type=""text/javascript"">
$(document).ready(function () {
hCharts['myChart'] = new Highcharts.Chart({
chart: {
renderTo: 'myChart'
},
plotOptions: {
line: {
showInLegend: false
},
column: {
showInLegend: false
},
series: {
showInLegend: false
}
}
});
});
</script>");
HtmlAssert.AreEqual(expected, actual);
}
public void BasicAjaxSource()
{
var actual = AjaxConfig.LoadFrom("/Ajax/LoadData").ToHtmlString("myChart");
var expected = MvcHtmlString.Create(@"loadChartAjax({
url: '/Ajax/LoadData',
chartId: 'myChart'
});");
HtmlAssert.AreEqual(expected, actual);
}
public void AjaxSourceWithoutAnimation()
{
var actual = AjaxConfig.LoadFrom("/Ajax/LoadData").NoAnimation().ToHtmlString("myChart");
var expected = MvcHtmlString.Create(@"loadChartAjax({
url: '/Ajax/LoadData',
chartId: 'myChart',
animation: false
});");
HtmlAssert.AreEqual(expected, actual);
}
public void EmptySetUp()
{
HighchartsSetUp setup = new HighchartsSetUp("myChart");
var actual = setup.ToHtmlString();
var expected = MvcHtmlString.Create(@"$(document).ready(function () {
hCharts['myChart'] = new Highcharts.Chart({
chart: {
renderTo: 'myChart'
}
});
});");
HtmlAssert.AreEqual(expected, actual);
}
public void ChartSettingsTest()
{
var setup = new HighchartsSetUp("myChart")
.Settings(x => x.BackgroundColor("#000"));
var actual = setup.ToHtmlString();
var expected = MvcHtmlString.Create(@"$(document).ready(function () {
hCharts['myChart'] = new Highcharts.Chart({
chart: {
renderTo: 'myChart',
backgroundColor: '#000'
}
});
});");
HtmlAssert.AreEqual(expected, actual);
}
public void EmptySetUp()
{
var chart = new HighchartsChart("myChart");
var actual = chart.ToHtmlString();
var expected = MvcHtmlString.Create(@"<div id=""myChart""></div>
<script type=""text/javascript"">
$(document).ready(function () {
hCharts['myChart'] = new Highcharts.Chart({
chart: {
renderTo: 'myChart'
}
});
});
</script>");
HtmlAssert.AreEqual(expected, actual);
}
public void AjaxSourceWithAllOptions()
{
var actual = AjaxConfig.LoadFrom("/Ajax/LoadData")
.AsGet()
.Reload(100)
.Animation(x => x.Duration(2000).Easing(ChartEasing.Swing))
.ToHtmlString("myChart");
var expected = MvcHtmlString.Create(@"loadChartAjax({
url: '/Ajax/LoadData',
chartId: 'myChart',
interval: 100,
method: 'GET',
animation: {
duration: 2000,
easing: 'swing'
}
});");
HtmlAssert.AreEqual(expected, actual);
}
public void BasicPieChartTest()
{
var chart = new HighchartsChart("myChart")
.WithSerieType(ChartSerieType.Pie)
.Series(
new PieSerie("Browser share", new PieData[] {
new PieData("Firefox", 45.0f),
new PieData("Chrome", 12.8f),
new PieData("IE", 26.8f),
new PieData("Safari", 8.5f),
new PieData("Opera", 6.2f),
new PieData("Others", 0.7f),
})
);
var actual = chart.ToHtmlString();
var expected = MvcHtmlString.Create(@"<div id=""myChart""></div>
<script type=""text/javascript"">
$(document).ready(function () {
hCharts['myChart'] = new Highcharts.Chart({
chart: {
renderTo: 'myChart',
type: 'pie'
},
series: [{
name: 'Browser share',
type: 'pie',
data: [
['Firefox', 45],
['Chrome', 12.8],
['IE', 26.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
</script>");
HtmlAssert.AreEqual(expected, actual);
}
public void PrintDisabled()
{
var setup = new HighchartsSetUp("myChart").Exporting(ex => ex.Buttons(b => b.PrintButton(pb => pb.Hide())));
var actual = setup.ToHtmlString();
var expected = MvcHtmlString.Create(@"$(document).ready(function () {
hCharts['myChart'] = new Highcharts.Chart({
chart: {
renderTo: 'myChart'
},
exporting: {
buttons: {
printButton: {
enabled: false
}
}
}
});
});");
HtmlAssert.AreEqual(expected, actual);
}
public void BasicSetUp_WithYAxisTitle()
{
var chart = new HighchartsChart("myChart").AxisY(x => x.Title("Tickets"));
var actual = chart.ToHtmlString();
var expected = MvcHtmlString.Create(@"<div id=""myChart""></div>
<script type=""text/javascript"">
$(document).ready(function () {
hCharts['myChart'] = new Highcharts.Chart({
chart: {
renderTo: 'myChart'
},
yAxis: {
title: {
text: 'Tickets'
}
}
});
});
</script>");
HtmlAssert.AreEqual(expected, actual);
}
public void BasicSetUp_WithXAxisCategories()
{
var chart = new HighchartsChart("myChart")
.AxisX(x => x.Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"));
var actual = chart.ToHtmlString();
var expected = MvcHtmlString.Create(@"<div id=""myChart""></div>
<script type=""text/javascript"">
$(document).ready(function () {
hCharts['myChart'] = new Highcharts.Chart({
chart: {
renderTo: 'myChart'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
});
});
</script>");
HtmlAssert.AreEqual(expected, actual);
}
public void FullSetUp()
{
HighchartsSetUp setup = new HighchartsSetUp("myChart")
.WithSerieType(ChartSerieType.Line)
.Title("The title")
.Subtitle("This is the subtitle")
.Settings(x =>
x.BackgroundColor("#eee")
)
.AxisY(x =>
x.Title("Months", y =>
y.Align(AxisTitleAlignment.High)
)
)
.AxisX(x =>
x.Title("Months", y =>
y.Rotation(180)
)
)
.Credits(x => x.Hide())
.Legend(x => x.Position(y => y.Center()))
.Options(x =>
{
x.Series.NoAnimation();
})
.Series(
new PieSerie("Tickets", new int[] { 2, 5 })
)
.Tooltip(x =>
x.Crosshairs()
.Formatter("return 'Hello'")
);
var actual = setup.ToHtmlString();
var expected = MvcHtmlString.Create(@"$(document).ready(function () {
hCharts['myChart'] = new Highcharts.Chart({
chart: {
renderTo: 'myChart',
type: 'line',
backgroundColor: '#eee'
},
title: { text: 'The title' },
subtitle: { text: 'This is the subtitle' },
xAxis: {
title: {
text: 'Months',
rotation: 180
}
},
yAxis: {
title: {
text: 'Months',
align: 'high'
}
},
plotOptions: {
series: { animation: false }
},
credits: { enabled: false },
tooltip: {
formatter: function() { return 'Hello' },
crosshairs: true
},
legend: { align: 'center' },
series: [
{ name: 'Tickets', type: 'pie', data: [ 2, 5 ] }
]
});
});");
HtmlAssert.AreEqual(expected, actual);
}
public static void AreEqual(IHtmlString expected, IHtmlString actual)
{
HtmlAssert.AreEqual(expected.ToString(), actual.ToString());
}
