[Windows Forms - C# version] NetWinCharts\CSharpWinCharts\multicolorline.cs
using System;
using ChartDirector;
namespace CSharpChartExplorer
{
public class multicolorline : DemoModule
{
//Name of demo module
public string getName() { return "Multi-Color Line Chart"; }
//Number of charts produced in this demo module
public int getNoOfCharts() { return 1; }
//Main code for creating chart.
//Note: the argument chartIndex is unused because this demo only has 1 chart.
public void createChart(WinChartViewer viewer, int chartIndex)
{
// Data points for the line chart
double[] dataX = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
20, 21, 22, 23, 24, 25};
double[] dataY = {30, 28, 40, 55, 75, 68, 54, 60, 50, 62, 75, 65, 75, 89, 60, 55, 53,
35, 50, 66, 56, 48, 52, 65, 62, 70};
// The data point type. The color of the line segment will be based on the starting
// point type of the segment. In this example, we have 4 point types for 4 different
// colors. Note that for a line with N points, there will be (N - 1) line segments, so
// we only need (N - 1) values in the point type array.
int[] pointType = {0, 0, 0, 1, 1, 0, 2, 3, 1, 1, 0, 0, 1, 1, 2, 2, 2, 3, 3, 2, 0, 1, 2,
3, 3};
int[] colors = {0xff0000, 0x0066ff, 0xcc00cc, 0x00cc00};
string[] pointTypeLabels = {"Alpha", "Beta", "Gamma", "Delta"};
// Create a XYChart object of size 600 x 430 pixels
XYChart c = new XYChart(600, 430);
// Set default text color to dark grey (0x333333)
c.setColor(Chart.TextColor, 0x333333);
// Add a title box using grey (0x555555) 20pt Arial font
c.addTitle(" Multi-Color Line Chart", "Arial", 20, 0x555555);
// Set the plotarea at (70, 70) and of size 500 x 300 pixels, with transparent
// background and border and light grey (0xcccccc) horizontal grid lines
c.setPlotArea(70, 70, 500, 300, Chart.Transparent, -1, Chart.Transparent, 0xcccccc);
// Add a legend box with horizontal layout above the plot area at (70, 35). Use 12pt
// Arial font, transparent background and border, and line style legend icon.
LegendBox b = c.addLegend(70, 35, false, "Arial", 12);
b.setBackground(Chart.Transparent, Chart.Transparent);
b.setLineStyleKey();
// Set axis label font to 12pt Arial
c.xAxis().setLabelStyle("Arial", 12);
c.yAxis().setLabelStyle("Arial", 12);
// Set the x and y axis stems to transparent, and the x-axis tick color to grey
// (0xaaaaaa)
c.xAxis().setColors(Chart.Transparent, Chart.TextColor, Chart.TextColor, 0xaaaaaa);
c.yAxis().setColors(Chart.Transparent);
// Set the major/minor tick lengths for the x-axis to 10 and 0.
c.xAxis().setTickLength(10, 0);
// For the automatic axis labels, set the minimum spacing to 80/40 pixels for the x/y
// axis.
c.xAxis().setTickDensity(80);
c.yAxis().setTickDensity(40);
// Add a title to the y axis using dark grey (0x555555) 14pt Arial font
c.xAxis().setTitle("X-Axis Title Placeholder", "Arial", 14, 0x555555);
c.yAxis().setTitle("Y-Axis Title Placeholder", "Arial", 14, 0x555555);
// In ChartDirector, each line layer can only have one line color, so we use 4 line
// layers to draw the 4 different colors of line segments.
// In general, the line segments for each color will not be continuous. In
// ChartDirector, non-continuous line segments can be achieved by inserting NoValue
// points. To allow for these extra points, we use a buffer twice the size of the
// original data arrays.
double[] lineX = new double[dataX.Length * 2];
double[] lineY = new double[dataY.Length * 2];
// Use a loop to create a line layer for each color
for(int i = 0; i < colors.Length; ++i) {
int n = 0;
for(int j = 0; j < dataX.Length; ++j) {
// We include data points of the target type in the line layer.
if ((j < pointType.Length) && (pointType[j] == i)) {
lineX[n] = dataX[j];
lineY[n] = dataY[j];
n = n + 1;
} else if ((j > 0) && (pointType[j - 1] == i)) {
// If the current point is not of the target, but the previous point is of
// the target type, we still need to include the current point in the line
// layer, as it takes two points to draw a line segment. We also need an
// extra NoValue point so that the current point will not join with the next
// point.
lineX[n] = dataX[j];
lineY[n] = dataY[j];
n = n + 1;
lineX[n] = dataX[j];
lineY[n] = Chart.NoValue;
n = n + 1;
}
}
// Draw the layer that contains all segments of the target color
LineLayer layer = c.addLineLayer(Chart.arraySlice(lineY, 0, n), colors[i],
pointTypeLabels[i]);
layer.setXData(Chart.arraySlice(lineX, 0, n));
layer.setLineWidth(2);
}
// Output the chart
viewer.Chart = c;
}
}
}
[Windows Forms - VB Version] NetWinCharts\VBNetWinCharts\multicolorline.vb
Imports System
Imports Microsoft.VisualBasic
Imports ChartDirector
Public Class multicolorline
Implements DemoModule
'Name of demo module
Public Function getName() As String Implements DemoModule.getName
Return "Multi-Color Line Chart"
End Function
'Number of charts produced in this demo module
Public Function getNoOfCharts() As Integer Implements DemoModule.getNoOfCharts
Return 1
End Function
'Main code for creating chart.
'Note: the argument chartIndex is unused because this demo only has 1 chart.
Public Sub createChart(viewer As WinChartViewer, chartIndex As Integer) _
Implements DemoModule.createChart
' Data points for the line chart
Dim dataX() As Double = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, _
19, 20, 21, 22, 23, 24, 25}
Dim dataY() As Double = {30, 28, 40, 55, 75, 68, 54, 60, 50, 62, 75, 65, 75, 89, 60, 55, _
53, 35, 50, 66, 56, 48, 52, 65, 62, 70}
' The data point type. The color of the line segment will be based on the starting point
' type of the segment. In this example, we have 4 point types for 4 different colors. Note
' that for a line with N points, there will be (N - 1) line segments, so we only need (N -
' 1) values in the point type array.
Dim pointType() As Integer = {0, 0, 0, 1, 1, 0, 2, 3, 1, 1, 0, 0, 1, 1, 2, 2, 2, 3, 3, 2, _
0, 1, 2, 3, 3}
Dim colors() As Integer = {&Hff0000, &H0066ff, &Hcc00cc, &H00cc00}
Dim pointTypeLabels() As String = {"Alpha", "Beta", "Gamma", "Delta"}
' Create a XYChart object of size 600 x 430 pixels
Dim c As XYChart = New XYChart(600, 430)
' Set default text color to dark grey (0x333333)
c.setColor(Chart.TextColor, &H333333)
' Add a title box using grey (0x555555) 20pt Arial font
c.addTitle(" Multi-Color Line Chart", "Arial", 20, &H555555)
' Set the plotarea at (70, 70) and of size 500 x 300 pixels, with transparent background and
' border and light grey (0xcccccc) horizontal grid lines
c.setPlotArea(70, 70, 500, 300, Chart.Transparent, -1, Chart.Transparent, &Hcccccc)
' Add a legend box with horizontal layout above the plot area at (70, 35). Use 12pt Arial
' font, transparent background and border, and line style legend icon.
Dim b As LegendBox = c.addLegend(70, 35, False, "Arial", 12)
b.setBackground(Chart.Transparent, Chart.Transparent)
b.setLineStyleKey()
' Set axis label font to 12pt Arial
c.xAxis().setLabelStyle("Arial", 12)
c.yAxis().setLabelStyle("Arial", 12)
' Set the x and y axis stems to transparent, and the x-axis tick color to grey (0xaaaaaa)
c.xAxis().setColors(Chart.Transparent, Chart.TextColor, Chart.TextColor, &Haaaaaa)
c.yAxis().setColors(Chart.Transparent)
' Set the major/minor tick lengths for the x-axis to 10 and 0.
c.xAxis().setTickLength(10, 0)
' For the automatic axis labels, set the minimum spacing to 80/40 pixels for the x/y axis.
c.xAxis().setTickDensity(80)
c.yAxis().setTickDensity(40)
' Add a title to the y axis using dark grey (0x555555) 14pt Arial font
c.xAxis().setTitle("X-Axis Title Placeholder", "Arial", 14, &H555555)
c.yAxis().setTitle("Y-Axis Title Placeholder", "Arial", 14, &H555555)
' In ChartDirector, each line layer can only have one line color, so we use 4 line layers to
' draw the 4 different colors of line segments.
' In general, the line segments for each color will not be continuous. In ChartDirector,
' non-continuous line segments can be achieved by inserting NoValue points. To allow for
' these extra points, we use a buffer twice the size of the original data arrays.
Dim lineX((UBound(dataX) + 1) * 2 - 1) As Double
Dim lineY((UBound(dataY) + 1) * 2 - 1) As Double
' Use a loop to create a line layer for each color
For i As Integer = 0 To UBound(colors)
Dim n As Integer = 0
For j As Integer = 0 To UBound(dataX)
' We include data points of the target type in the line layer.
If (j < UBound(pointType) + 1) AndAlso (pointType(j) = i) Then
lineX(n) = dataX(j)
lineY(n) = dataY(j)
n = n + 1
ElseIf (j > 0) AndAlso (pointType(j - 1) = i) Then
' If the current point is not of the target, but the previous point is of the
' target type, we still need to include the current point in the line layer, as
' it takes two points to draw a line segment. We also need an extra NoValue
' point so that the current point will not join with the next point.
lineX(n) = dataX(j)
lineY(n) = dataY(j)
n = n + 1
lineX(n) = dataX(j)
lineY(n) = Chart.NoValue
n = n + 1
End If
Next
' Draw the layer that contains all segments of the target color
Dim layer As LineLayer = c.addLineLayer(Chart.arraySlice(lineY, 0, n), colors(i), _
pointTypeLabels(i))
layer.setXData(Chart.arraySlice(lineX, 0, n))
layer.setLineWidth(2)
Next
' Output the chart
viewer.Chart = c
End Sub
End Class
[WPF - C#] NetWPFCharts\CSharpWPFCharts\multicolorline.cs
using System;
using ChartDirector;
namespace CSharpWPFCharts
{
public class multicolorline : DemoModule
{
//Name of demo module
public string getName() { return "Multi-Color Line Chart"; }
//Number of charts produced in this demo module
public int getNoOfCharts() { return 1; }
//Main code for creating chart.
//Note: the argument chartIndex is unused because this demo only has 1 chart.
public void createChart(WPFChartViewer viewer, int chartIndex)
{
// Data points for the line chart
double[] dataX = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
20, 21, 22, 23, 24, 25};
double[] dataY = {30, 28, 40, 55, 75, 68, 54, 60, 50, 62, 75, 65, 75, 89, 60, 55, 53,
35, 50, 66, 56, 48, 52, 65, 62, 70};
// The data point type. The color of the line segment will be based on the starting
// point type of the segment. In this example, we have 4 point types for 4 different
// colors. Note that for a line with N points, there will be (N - 1) line segments, so
// we only need (N - 1) values in the point type array.
int[] pointType = {0, 0, 0, 1, 1, 0, 2, 3, 1, 1, 0, 0, 1, 1, 2, 2, 2, 3, 3, 2, 0, 1, 2,
3, 3};
int[] colors = {0xff0000, 0x0066ff, 0xcc00cc, 0x00cc00};
string[] pointTypeLabels = {"Alpha", "Beta", "Gamma", "Delta"};
// Create a XYChart object of size 600 x 430 pixels
XYChart c = new XYChart(600, 430);
// Set default text color to dark grey (0x333333)
c.setColor(Chart.TextColor, 0x333333);
// Add a title box using grey (0x555555) 20pt Arial font
c.addTitle(" Multi-Color Line Chart", "Arial", 20, 0x555555);
// Set the plotarea at (70, 70) and of size 500 x 300 pixels, with transparent
// background and border and light grey (0xcccccc) horizontal grid lines
c.setPlotArea(70, 70, 500, 300, Chart.Transparent, -1, Chart.Transparent, 0xcccccc);
// Add a legend box with horizontal layout above the plot area at (70, 35). Use 12pt
// Arial font, transparent background and border, and line style legend icon.
LegendBox b = c.addLegend(70, 35, false, "Arial", 12);
b.setBackground(Chart.Transparent, Chart.Transparent);
b.setLineStyleKey();
// Set axis label font to 12pt Arial
c.xAxis().setLabelStyle("Arial", 12);
c.yAxis().setLabelStyle("Arial", 12);
// Set the x and y axis stems to transparent, and the x-axis tick color to grey
// (0xaaaaaa)
c.xAxis().setColors(Chart.Transparent, Chart.TextColor, Chart.TextColor, 0xaaaaaa);
c.yAxis().setColors(Chart.Transparent);
// Set the major/minor tick lengths for the x-axis to 10 and 0.
c.xAxis().setTickLength(10, 0);
// For the automatic axis labels, set the minimum spacing to 80/40 pixels for the x/y
// axis.
c.xAxis().setTickDensity(80);
c.yAxis().setTickDensity(40);
// Add a title to the y axis using dark grey (0x555555) 14pt Arial font
c.xAxis().setTitle("X-Axis Title Placeholder", "Arial", 14, 0x555555);
c.yAxis().setTitle("Y-Axis Title Placeholder", "Arial", 14, 0x555555);
// In ChartDirector, each line layer can only have one line color, so we use 4 line
// layers to draw the 4 different colors of line segments.
// In general, the line segments for each color will not be continuous. In
// ChartDirector, non-continuous line segments can be achieved by inserting NoValue
// points. To allow for these extra points, we use a buffer twice the size of the
// original data arrays.
double[] lineX = new double[dataX.Length * 2];
double[] lineY = new double[dataY.Length * 2];
// Use a loop to create a line layer for each color
for(int i = 0; i < colors.Length; ++i) {
int n = 0;
for(int j = 0; j < dataX.Length; ++j) {
// We include data points of the target type in the line layer.
if ((j < pointType.Length) && (pointType[j] == i)) {
lineX[n] = dataX[j];
lineY[n] = dataY[j];
n = n + 1;
} else if ((j > 0) && (pointType[j - 1] == i)) {
// If the current point is not of the target, but the previous point is of
// the target type, we still need to include the current point in the line
// layer, as it takes two points to draw a line segment. We also need an
// extra NoValue point so that the current point will not join with the next
// point.
lineX[n] = dataX[j];
lineY[n] = dataY[j];
n = n + 1;
lineX[n] = dataX[j];
lineY[n] = Chart.NoValue;
n = n + 1;
}
}
// Draw the layer that contains all segments of the target color
LineLayer layer = c.addLineLayer(Chart.arraySlice(lineY, 0, n), colors[i],
pointTypeLabels[i]);
layer.setXData(Chart.arraySlice(lineX, 0, n));
layer.setLineWidth(2);
}
// Output the chart
viewer.Chart = c;
}
}
}
[ASP.NET Web Forms - C# version] NetWebCharts\CSharpASP\multicolorline.aspx
(Click here on how to convert this code to code-behind style.)<%@ Page Language="C#" Debug="true" %>
<%@ Import Namespace="ChartDirector" %>
<%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %>
<!DOCTYPE html>
<script runat="server">
//
// Page Load event handler
//
protected void Page_Load(object sender, EventArgs e)
{
// Data points for the line chart
double[] dataX = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
22, 23, 24, 25};
double[] dataY = {30, 28, 40, 55, 75, 68, 54, 60, 50, 62, 75, 65, 75, 89, 60, 55, 53, 35, 50,
66, 56, 48, 52, 65, 62, 70};
// The data point type. The color of the line segment will be based on the starting point type
// of the segment. In this example, we have 4 point types for 4 different colors. Note that for
// a line with N points, there will be (N - 1) line segments, so we only need (N - 1) values in
// the point type array.
int[] pointType = {0, 0, 0, 1, 1, 0, 2, 3, 1, 1, 0, 0, 1, 1, 2, 2, 2, 3, 3, 2, 0, 1, 2, 3, 3};
int[] colors = {0xff0000, 0x0066ff, 0xcc00cc, 0x00cc00};
string[] pointTypeLabels = {"Alpha", "Beta", "Gamma", "Delta"};
// Create a XYChart object of size 600 x 430 pixels
XYChart c = new XYChart(600, 430);
// Set default text color to dark grey (0x333333)
c.setColor(Chart.TextColor, 0x333333);
// Add a title box using grey (0x555555) 20pt Arial font
c.addTitle(" Multi-Color Line Chart", "Arial", 20, 0x555555);
// Set the plotarea at (70, 70) and of size 500 x 300 pixels, with transparent background and
// border and light grey (0xcccccc) horizontal grid lines
c.setPlotArea(70, 70, 500, 300, Chart.Transparent, -1, Chart.Transparent, 0xcccccc);
// Add a legend box with horizontal layout above the plot area at (70, 35). Use 12pt Arial font,
// transparent background and border, and line style legend icon.
LegendBox b = c.addLegend(70, 35, false, "Arial", 12);
b.setBackground(Chart.Transparent, Chart.Transparent);
b.setLineStyleKey();
// Set axis label font to 12pt Arial
c.xAxis().setLabelStyle("Arial", 12);
c.yAxis().setLabelStyle("Arial", 12);
// Set the x and y axis stems to transparent, and the x-axis tick color to grey (0xaaaaaa)
c.xAxis().setColors(Chart.Transparent, Chart.TextColor, Chart.TextColor, 0xaaaaaa);
c.yAxis().setColors(Chart.Transparent);
// Set the major/minor tick lengths for the x-axis to 10 and 0.
c.xAxis().setTickLength(10, 0);
// For the automatic axis labels, set the minimum spacing to 80/40 pixels for the x/y axis.
c.xAxis().setTickDensity(80);
c.yAxis().setTickDensity(40);
// Add a title to the y axis using dark grey (0x555555) 14pt Arial font
c.xAxis().setTitle("X-Axis Title Placeholder", "Arial", 14, 0x555555);
c.yAxis().setTitle("Y-Axis Title Placeholder", "Arial", 14, 0x555555);
// In ChartDirector, each line layer can only have one line color, so we use 4 line layers to
// draw the 4 different colors of line segments.
// In general, the line segments for each color will not be continuous. In ChartDirector,
// non-continuous line segments can be achieved by inserting NoValue points. To allow for these
// extra points, we use a buffer twice the size of the original data arrays.
double[] lineX = new double[dataX.Length * 2];
double[] lineY = new double[dataY.Length * 2];
// Use a loop to create a line layer for each color
for(int i = 0; i < colors.Length; ++i) {
int n = 0;
for(int j = 0; j < dataX.Length; ++j) {
// We include data points of the target type in the line layer.
if ((j < pointType.Length) && (pointType[j] == i)) {
lineX[n] = dataX[j];
lineY[n] = dataY[j];
n = n + 1;
} else if ((j > 0) && (pointType[j - 1] == i)) {
// If the current point is not of the target, but the previous point is of the
// target type, we still need to include the current point in the line layer, as it
// takes two points to draw a line segment. We also need an extra NoValue point so
// that the current point will not join with the next point.
lineX[n] = dataX[j];
lineY[n] = dataY[j];
n = n + 1;
lineX[n] = dataX[j];
lineY[n] = Chart.NoValue;
n = n + 1;
}
}
// Draw the layer that contains all segments of the target color
LineLayer layer = c.addLineLayer(Chart.arraySlice(lineY, 0, n), colors[i], pointTypeLabels[i
]);
layer.setXData(Chart.arraySlice(lineX, 0, n));
layer.setLineWidth(2);
}
// Output the chart
WebChartViewer1.Image = c.makeWebImage(Chart.SVG);
}
</script>
<html>
<head>
<script type="text/javascript" src="cdjcv.js"></script>
</head>
<body>
<chart:WebChartViewer id="WebChartViewer1" runat="server" />
</body>
</html>
[ASP.NET Web Forms - VB Version] NetWebCharts\VBNetASP\multicolorline.aspx
(Click here on how to convert this code to code-behind style.)<%@ Page Language="VB" Debug="true" %>
<%@ Import Namespace="ChartDirector" %>
<%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %>
<!DOCTYPE html>
<script runat="server">
'
' Page Load event handler
'
Protected Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
' Data points for the line chart
Dim dataX() As Double = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, _
20, 21, 22, 23, 24, 25}
Dim dataY() As Double = {30, 28, 40, 55, 75, 68, 54, 60, 50, 62, 75, 65, 75, 89, 60, 55, 53, _
35, 50, 66, 56, 48, 52, 65, 62, 70}
' The data point type. The color of the line segment will be based on the starting point type of
' the segment. In this example, we have 4 point types for 4 different colors. Note that for a
' line with N points, there will be (N - 1) line segments, so we only need (N - 1) values in the
' point type array.
Dim pointType() As Integer = {0, 0, 0, 1, 1, 0, 2, 3, 1, 1, 0, 0, 1, 1, 2, 2, 2, 3, 3, 2, 0, _
1, 2, 3, 3}
Dim colors() As Integer = {&Hff0000, &H0066ff, &Hcc00cc, &H00cc00}
Dim pointTypeLabels() As String = {"Alpha", "Beta", "Gamma", "Delta"}
' Create a XYChart object of size 600 x 430 pixels
Dim c As XYChart = New XYChart(600, 430)
' Set default text color to dark grey (0x333333)
c.setColor(Chart.TextColor, &H333333)
' Add a title box using grey (0x555555) 20pt Arial font
c.addTitle(" Multi-Color Line Chart", "Arial", 20, &H555555)
' Set the plotarea at (70, 70) and of size 500 x 300 pixels, with transparent background and
' border and light grey (0xcccccc) horizontal grid lines
c.setPlotArea(70, 70, 500, 300, Chart.Transparent, -1, Chart.Transparent, &Hcccccc)
' Add a legend box with horizontal layout above the plot area at (70, 35). Use 12pt Arial font,
' transparent background and border, and line style legend icon.
Dim b As LegendBox = c.addLegend(70, 35, False, "Arial", 12)
b.setBackground(Chart.Transparent, Chart.Transparent)
b.setLineStyleKey()
' Set axis label font to 12pt Arial
c.xAxis().setLabelStyle("Arial", 12)
c.yAxis().setLabelStyle("Arial", 12)
' Set the x and y axis stems to transparent, and the x-axis tick color to grey (0xaaaaaa)
c.xAxis().setColors(Chart.Transparent, Chart.TextColor, Chart.TextColor, &Haaaaaa)
c.yAxis().setColors(Chart.Transparent)
' Set the major/minor tick lengths for the x-axis to 10 and 0.
c.xAxis().setTickLength(10, 0)
' For the automatic axis labels, set the minimum spacing to 80/40 pixels for the x/y axis.
c.xAxis().setTickDensity(80)
c.yAxis().setTickDensity(40)
' Add a title to the y axis using dark grey (0x555555) 14pt Arial font
c.xAxis().setTitle("X-Axis Title Placeholder", "Arial", 14, &H555555)
c.yAxis().setTitle("Y-Axis Title Placeholder", "Arial", 14, &H555555)
' In ChartDirector, each line layer can only have one line color, so we use 4 line layers to
' draw the 4 different colors of line segments.
' In general, the line segments for each color will not be continuous. In ChartDirector,
' non-continuous line segments can be achieved by inserting NoValue points. To allow for these
' extra points, we use a buffer twice the size of the original data arrays.
Dim lineX((UBound(dataX) + 1) * 2 - 1) As Double
Dim lineY((UBound(dataY) + 1) * 2 - 1) As Double
' Use a loop to create a line layer for each color
For i As Integer = 0 To UBound(colors)
Dim n As Integer = 0
For j As Integer = 0 To UBound(dataX)
' We include data points of the target type in the line layer.
If (j < UBound(pointType) + 1) AndAlso (pointType(j) = i) Then
lineX(n) = dataX(j)
lineY(n) = dataY(j)
n = n + 1
ElseIf (j > 0) AndAlso (pointType(j - 1) = i) Then
' If the current point is not of the target, but the previous point is of the target
' type, we still need to include the current point in the line layer, as it takes
' two points to draw a line segment. We also need an extra NoValue point so that the
' current point will not join with the next point.
lineX(n) = dataX(j)
lineY(n) = dataY(j)
n = n + 1
lineX(n) = dataX(j)
lineY(n) = Chart.NoValue
n = n + 1
End If
Next
' Draw the layer that contains all segments of the target color
Dim layer As LineLayer = c.addLineLayer(Chart.arraySlice(lineY, 0, n), colors(i), _
pointTypeLabels(i))
layer.setXData(Chart.arraySlice(lineX, 0, n))
layer.setLineWidth(2)
Next
' Output the chart
WebChartViewer1.Image = c.makeWebImage(Chart.SVG)
End Sub
</script>
<html>
<head>
<script type="text/javascript" src="cdjcv.js"></script>
</head>
<body>
<chart:WebChartViewer id="WebChartViewer1" runat="server" />
</body>
</html>
[ASP.NET MVC - Controller] NetMvcCharts\Controllers\MulticolorlineController.cs
using System;
using System.Web.Mvc;
using ChartDirector;
namespace NetMvcCharts.Controllers
{
public class MulticolorlineController : Controller
{
//
// Default Action
//
public ActionResult Index()
{
ViewBag.Title = "Multi-Color Line Chart";
createChart(ViewBag.Viewer = new RazorChartViewer(HttpContext, "chart1"));
return View("~/Views/Shared/ChartView.cshtml");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// Data points for the line chart
double[] dataX = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
21, 22, 23, 24, 25};
double[] dataY = {30, 28, 40, 55, 75, 68, 54, 60, 50, 62, 75, 65, 75, 89, 60, 55, 53, 35, 50,
66, 56, 48, 52, 65, 62, 70};
// The data point type. The color of the line segment will be based on the starting point
// type of the segment. In this example, we have 4 point types for 4 different colors. Note
// that for a line with N points, there will be (N - 1) line segments, so we only need (N -
// 1) values in the point type array.
int[] pointType = {0, 0, 0, 1, 1, 0, 2, 3, 1, 1, 0, 0, 1, 1, 2, 2, 2, 3, 3, 2, 0, 1, 2, 3, 3}
;
int[] colors = {0xff0000, 0x0066ff, 0xcc00cc, 0x00cc00};
string[] pointTypeLabels = {"Alpha", "Beta", "Gamma", "Delta"};
// Create a XYChart object of size 600 x 430 pixels
XYChart c = new XYChart(600, 430);
// Set default text color to dark grey (0x333333)
c.setColor(Chart.TextColor, 0x333333);
// Add a title box using grey (0x555555) 20pt Arial font
c.addTitle(" Multi-Color Line Chart", "Arial", 20, 0x555555);
// Set the plotarea at (70, 70) and of size 500 x 300 pixels, with transparent background and
// border and light grey (0xcccccc) horizontal grid lines
c.setPlotArea(70, 70, 500, 300, Chart.Transparent, -1, Chart.Transparent, 0xcccccc);
// Add a legend box with horizontal layout above the plot area at (70, 35). Use 12pt Arial
// font, transparent background and border, and line style legend icon.
LegendBox b = c.addLegend(70, 35, false, "Arial", 12);
b.setBackground(Chart.Transparent, Chart.Transparent);
b.setLineStyleKey();
// Set axis label font to 12pt Arial
c.xAxis().setLabelStyle("Arial", 12);
c.yAxis().setLabelStyle("Arial", 12);
// Set the x and y axis stems to transparent, and the x-axis tick color to grey (0xaaaaaa)
c.xAxis().setColors(Chart.Transparent, Chart.TextColor, Chart.TextColor, 0xaaaaaa);
c.yAxis().setColors(Chart.Transparent);
// Set the major/minor tick lengths for the x-axis to 10 and 0.
c.xAxis().setTickLength(10, 0);
// For the automatic axis labels, set the minimum spacing to 80/40 pixels for the x/y axis.
c.xAxis().setTickDensity(80);
c.yAxis().setTickDensity(40);
// Add a title to the y axis using dark grey (0x555555) 14pt Arial font
c.xAxis().setTitle("X-Axis Title Placeholder", "Arial", 14, 0x555555);
c.yAxis().setTitle("Y-Axis Title Placeholder", "Arial", 14, 0x555555);
// In ChartDirector, each line layer can only have one line color, so we use 4 line layers to
// draw the 4 different colors of line segments.
// In general, the line segments for each color will not be continuous. In ChartDirector,
// non-continuous line segments can be achieved by inserting NoValue points. To allow for
// these extra points, we use a buffer twice the size of the original data arrays.
double[] lineX = new double[dataX.Length * 2];
double[] lineY = new double[dataY.Length * 2];
// Use a loop to create a line layer for each color
for(int i = 0; i < colors.Length; ++i) {
int n = 0;
for(int j = 0; j < dataX.Length; ++j) {
// We include data points of the target type in the line layer.
if ((j < pointType.Length) && (pointType[j] == i)) {
lineX[n] = dataX[j];
lineY[n] = dataY[j];
n = n + 1;
} else if ((j > 0) && (pointType[j - 1] == i)) {
// If the current point is not of the target, but the previous point is of the
// target type, we still need to include the current point in the line layer, as
// it takes two points to draw a line segment. We also need an extra NoValue
// point so that the current point will not join with the next point.
lineX[n] = dataX[j];
lineY[n] = dataY[j];
n = n + 1;
lineX[n] = dataX[j];
lineY[n] = Chart.NoValue;
n = n + 1;
}
}
// Draw the layer that contains all segments of the target color
LineLayer layer = c.addLineLayer(Chart.arraySlice(lineY, 0, n), colors[i],
pointTypeLabels[i]);
layer.setXData(Chart.arraySlice(lineX, 0, n));
layer.setLineWidth(2);
}
// Output the chart
viewer.Image = c.makeWebImage(Chart.SVG);
}
}
}
[ASP.NET MVC - View] NetMvcCharts\Views\Shared\ChartView.cshtml
@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<style>
@ViewBag.Style
</style>
@Scripts.Render("~/Scripts/cdjcv.js")
</head>
<body style="margin:5px 0px 0px 5px">
<div style="font:bold 18pt verdana;">
@ViewBag.Title
</div>
<hr style="border:solid 1px #000080; background:#000080" />
<div>
@{
if (ViewBag.Viewer is Array)
{
// Display multiple charts
for (int i = 0; i < ViewBag.Viewer.Length; ++i)
{
@:@Html.Raw(ViewBag.Viewer[i].RenderHTML())
}
}
else
{
// Display one chart only
@:@Html.Raw(ViewBag.Viewer.RenderHTML())
}
}
</div>
</body>
</html>
© 2023 Advanced Software Engineering Limited. All rights reserved.
