ChartDirector Ver 4.1 (Ruby Edition)

Multi-Symbol Line Chart




This example demonstrates a line with different symbols for different data points. It also demonstrates irregularly spaced data points on an auto-scaled true date/time axis.

This chart is created by using a line layer for the line, and using multiple scatter layers for different types of symbols. The scatter layers are created first using XYChart.addScatterLayer first, followed by the line layer using XYChart.addLineLayer. This ensures the symbols stays on top of the line.

In this example, the ArrayMath utility, through the ArrayMath.selectEQZ and ArrayMath.sub methods, is used to select the subset of data to be used for various symbols.

Note that in this example, the data points are irregularly spaced, and the x coordinates are real date/time. The x coordinates are set into the scatter layer as the first parameter of XYChart.addScatterLayer, and into the line layer using Layer.setXData. As the x-axis scale is not configured, ChartDirector auto-scales the x-axis to fit the data in the x-coordinates.

Source Code Listing

[Ruby On Rails Version - Controller] app/controllers/multisymbolline_controller.rb
require("chartdirector")

class MultisymbollineController < ApplicationController

    def index()
        @title = "Multi-Symbol Line Chart"
        @ctrl_file = File.expand_path(__FILE__)
        @noOfCharts = 1
        render :template => "templates/chartview"
    end

    #
    # Render and deliver the chart
    #
    def getchart()
        # In this example, the data points are unevenly spaced on the x-axis
        dataY = [4.7, 4.7, 6.6, 2.2, 4.7, 4.0, 4.0, 5.1, 4.5, 4.5, 6.8, 4.5, 4, 2.1, 3,
            2.5, 2.5, 3.1]
        dataX = [Time.mktime(1999, 7, 1), Time.mktime(2000, 1, 1), Time.mktime(2000, 2, 1
            ), Time.mktime(2000, 4, 1), Time.mktime(2000, 5, 8), Time.mktime(2000, 7, 5),
            Time.mktime(2001, 3, 5), Time.mktime(2001, 4, 7), Time.mktime(2001, 5, 9),
            Time.mktime(2002, 2, 4), Time.mktime(2002, 4, 4), Time.mktime(2002, 5, 8),
            Time.mktime(2002, 7, 7), Time.mktime(2002, 8, 30), Time.mktime(2003, 1, 2),
            Time.mktime(2003, 2, 16), Time.mktime(2003, 11, 6), Time.mktime(2004, 1, 4)]

        # Data points are assigned different symbols based on point type
        pointType = [0, 1, 0, 1, 2, 1, 0, 0, 1, 1, 2, 2, 1, 0, 2, 1, 2, 0]

        # Create a XYChart object of size 600 x 300 pixels, with a light purple (ffccff)
        # background, black border, 1 pixel 3D border effect and rounded corners.
        c = ChartDirector::XYChart.new(600, 300, 0xffccff, 0x000000, 1)
        c.setRoundedFrame()

        # Set the plotarea at (55, 58) and of size 520 x 195 pixels, with white (ffffff)
        # background. Set horizontal and vertical grid lines to grey (cccccc).
        c.setPlotArea(55, 58, 520, 195, 0xffffff, -1, -1, 0xcccccc, 0xcccccc)

        # Add a legend box at (55, 30) (top of the chart) with horizontal layout. Use 10
        # pts Arial Bold Italic font. Set the background and border color to Transparent.
        c.addLegend(55, 30, false, "arialbi.ttf", 10).setBackground(
            ChartDirector::Transparent)

        # Add a title box to the chart using 15 pts Times Bold Italic font. The text is
        # white (ffffff) on a purple (400040) background, with soft lighting effect from
        # the right side.
        c.addTitle("Multi-Symbol Line Chart Demo", "timesbi.ttf", 15, 0xffffff
            ).setBackground(0x400040, -1, ChartDirector::softLighting(ChartDirector::Right
            ))

        # Set the y axis label format to display a percentage sign
        c.yAxis().setLabelFormat("{value}%")

        # Set axis titles to use 9pt Arial Bold Italic font
        c.yAxis().setTitle("Axis Title Placeholder", "arialbi.ttf", 9)
        c.xAxis().setTitle("Axis Title Placeholder", "arialbi.ttf", 9)

        # Set axis labels to use Arial Bold font
        c.yAxis().setLabelStyle("arialbd.ttf")
        c.xAxis().setLabelStyle("arialbd.ttf")

        # We add the different data symbols using scatter layers. The scatter layers are
        # added before the line layer to make sure the data symbols stay on top of the
        # line layer.

        # We select the points with pointType = 0 (the non-selected points will be set to
        # NoValue), and use yellow (ffff00) 15 pixels high 5 pointed star shape symbols
        # for the points. (This example uses both x and y coordinates. For charts that
        # have no x explicitly coordinates, use an empty array as dataX.)
        c.addScatterLayer(dataX, ChartDirector::ArrayMath.new(dataY).selectEQZ(pointType,
            ChartDirector::NoValue).result(), "Point Type 0", ChartDirector::StarShape(5),
            15, 0xffff00)

        # Similar to above, we select the points with pointType - 1 = 0 and use green
        # (ff00) 13 pixels high six-sided polygon as symbols.
        c.addScatterLayer(dataX, ChartDirector::ArrayMath.new(dataY).selectEQZ(
            ChartDirector::ArrayMath.new(pointType).sub(1).result(),
            ChartDirector::NoValue).result(), "Point Type 1", ChartDirector::PolygonShape(
            6), 13, 0x00ff00)

        # Similar to above, we select the points with pointType - 2 = 0 and use red
        # (ff0000) 13 pixels high X shape as symbols.
        c.addScatterLayer(dataX, ChartDirector::ArrayMath.new(dataY).selectEQZ(
            ChartDirector::ArrayMath.new(pointType).sub(2).result(),
            ChartDirector::NoValue).result(), "Point Type 2", ChartDirector::Cross2Shape(
            ), 13, 0xff0000)

        # Finally, add a blue (0000ff) line layer with line width of 2 pixels
        layer = c.addLineLayer(dataY, 0x0000ff)
        layer.setXData(dataX)
        layer.setLineWidth(2)

        # output the chart
        send_data(c.makeChart2(ChartDirector::PNG), :type => "image/png",
            :disposition => "inline")
    end

end

[Ruby On Rails Version - View] app/views/templates/chartview.rhtml
<html>
<body style="margin:5px 0px 0px 5px">

<!-- Title -->
<div style="font-size:18pt; font-family:verdana; font-weight:bold">
    <%= @title %>
</div>
<hr style="border:solid 1px #000080" />

<!-- Source Code Listing Link -->
<div style="font-size:9pt; font-family:verdana; margin-bottom:1.5em">
    <%= link_to "Source Code Listing", 
        :controller => "cddemo", :action => "viewsource",
        :ctrl_file => @ctrl_file, :view_file => File.expand_path(__FILE__) %>
</div>

<!-- Create one or more IMG tags to display the demo chart(s) -->
<% 0.upto(@noOfCharts - 1) do |i| %>
    <img src="<%= url_for(:action => "getchart", :img => i) %>">
<% end %>

</body>
</html>

[Command Line Version] rubydemo/multisymbolline.rb
#!/usr/bin/env ruby
require("chartdirector")

# In this example, the data points are unevenly spaced on the x-axis
dataY = [4.7, 4.7, 6.6, 2.2, 4.7, 4.0, 4.0, 5.1, 4.5, 4.5, 6.8, 4.5, 4, 2.1, 3, 2.5,
    2.5, 3.1]
dataX = [Time.mktime(1999, 7, 1), Time.mktime(2000, 1, 1), Time.mktime(2000, 2, 1),
    Time.mktime(2000, 4, 1), Time.mktime(2000, 5, 8), Time.mktime(2000, 7, 5),
    Time.mktime(2001, 3, 5), Time.mktime(2001, 4, 7), Time.mktime(2001, 5, 9),
    Time.mktime(2002, 2, 4), Time.mktime(2002, 4, 4), Time.mktime(2002, 5, 8),
    Time.mktime(2002, 7, 7), Time.mktime(2002, 8, 30), Time.mktime(2003, 1, 2),
    Time.mktime(2003, 2, 16), Time.mktime(2003, 11, 6), Time.mktime(2004, 1, 4)]

# Data points are assigned different symbols based on point type
pointType = [0, 1, 0, 1, 2, 1, 0, 0, 1, 1, 2, 2, 1, 0, 2, 1, 2, 0]

# Create a XYChart object of size 600 x 300 pixels, with a light purple (ffccff)
# background, black border, 1 pixel 3D border effect and rounded corners.
c = ChartDirector::XYChart.new(600, 300, 0xffccff, 0x000000, 1)
c.setRoundedFrame()

# Set the plotarea at (55, 58) and of size 520 x 195 pixels, with white (ffffff)
# background. Set horizontal and vertical grid lines to grey (cccccc).
c.setPlotArea(55, 58, 520, 195, 0xffffff, -1, -1, 0xcccccc, 0xcccccc)

# Add a legend box at (55, 30) (top of the chart) with horizontal layout. Use 10 pts
# Arial Bold Italic font. Set the background and border color to Transparent.
c.addLegend(55, 30, false, "arialbi.ttf", 10).setBackground(
    ChartDirector::Transparent)

# Add a title box to the chart using 15 pts Times Bold Italic font. The text is white
# (ffffff) on a purple (400040) background, with soft lighting effect from the right
# side.
c.addTitle("Multi-Symbol Line Chart Demo", "timesbi.ttf", 15, 0xffffff
    ).setBackground(0x400040, -1, ChartDirector::softLighting(ChartDirector::Right))

# Set the y axis label format to display a percentage sign
c.yAxis().setLabelFormat("{value}%")

# Set axis titles to use 9pt Arial Bold Italic font
c.yAxis().setTitle("Axis Title Placeholder", "arialbi.ttf", 9)
c.xAxis().setTitle("Axis Title Placeholder", "arialbi.ttf", 9)

# Set axis labels to use Arial Bold font
c.yAxis().setLabelStyle("arialbd.ttf")
c.xAxis().setLabelStyle("arialbd.ttf")

# We add the different data symbols using scatter layers. The scatter layers are
# added before the line layer to make sure the data symbols stay on top of the line
# layer.

# We select the points with pointType = 0 (the non-selected points will be set to
# NoValue), and use yellow (ffff00) 15 pixels high 5 pointed star shape symbols for
# the points. (This example uses both x and y coordinates. For charts that have no x
# explicitly coordinates, use an empty array as dataX.)
c.addScatterLayer(dataX, ChartDirector::ArrayMath.new(dataY).selectEQZ(pointType,
    ChartDirector::NoValue).result(), "Point Type 0", ChartDirector::StarShape(5),
    15, 0xffff00)

# Similar to above, we select the points with pointType - 1 = 0 and use green (ff00)
# 13 pixels high six-sided polygon as symbols.
c.addScatterLayer(dataX, ChartDirector::ArrayMath.new(dataY).selectEQZ(
    ChartDirector::ArrayMath.new(pointType).sub(1).result(), ChartDirector::NoValue
    ).result(), "Point Type 1", ChartDirector::PolygonShape(6), 13, 0x00ff00)

# Similar to above, we select the points with pointType - 2 = 0 and use red (ff0000)
# 13 pixels high X shape as symbols.
c.addScatterLayer(dataX, ChartDirector::ArrayMath.new(dataY).selectEQZ(
    ChartDirector::ArrayMath.new(pointType).sub(2).result(), ChartDirector::NoValue
    ).result(), "Point Type 2", ChartDirector::Cross2Shape(), 13, 0xff0000)

# Finally, add a blue (0000ff) line layer with line width of 2 pixels
layer = c.addLineLayer(dataY, 0x0000ff)
layer.setXData(dataX)
layer.setLineWidth(2)

# output the chart
c.makeChart("multisymbolline.png")