public void BasicSetUp_WithoutXAxisTitle_Should_Cause_Bug()
{
//This exposes a bug in the AxisX method - it accepts a string for the title and a params string[] of categories,
//but can't differentiate between title and categories, so even if title was not intentially set, it gets set to the
//first category.
var chart = new HighchartsChart("myChart")
.AxisX("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 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 BasicSetUp_WithTypedSeries()
{
var actual = new HighchartsChart("myChart")
.Series(
new ColumnSerie("Open", new int[] { 10, 15, 61 }),
new LineSerie("Closed", new int[] { 461, 473, 985 }),
new LineSerie("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', type: 'column', data: [10, 15, 61] },
{ name: 'Closed', type: 'line' ,data: [461, 473, 985] },
{ name: 'Pending', type: 'line', data: [722, 526, 224] }
]
});
});
</script>");
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 Chart_WithTwoPlotOptions()
{
var actual = new HighchartsChart("myChart")
.Options(
PlotOptions.Line.HideInLegend(),
PlotOptions.Column.ShowDataLabels()
).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: {
dataLabels: {
enabled: true
}
}
}
});
});
</script>");
HtmlAssert.AreEqual(expected, actual);
}
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 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 BasicSetUp_Type()
{
var chart = new HighchartsChart("myChart")
.WithSerieType(ChartSerieType.Bar);
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: 'bar'
}
});
});
</script>");
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 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 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 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_WithYAxisTitle()
{
var chart = new HighchartsChart("myChart")
.AxisY("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("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: { title: { text: 'Jan' },
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
});
});
</script>");
HtmlAssert.AreEqual(expected, actual);
}
