ChartDirector Support - View Thread 1490252967

ChartDirector Support

Forum Home

Search

Message List Post Message

[Mar-23-2017 15:09] X axis disply time values (tony)
- [Mar-24-2017 02:53] Re: X axis disply time values (Peter Kwan)
  - [Mar-24-2017 10:25] Re: X axis disply time values (tony)

X axis disply time values

Posted by tony on Mar-23-2017 15:09

<%@page import="ChartDirector.*" %>
<%@ page import="java.util.*" %>
<%!
//
// Initialize the WebChartViewer when the page is first loaded
//
private void initViewer(WebChartViewer viewer)
{

    // The full x-axis range is from Jan 1, 2007 to Jan 1, 2012
    String[] labels = {"15:20", "15:21", "15:22", "15:23", "15:24", "15:25", "15:26", "15:27",
    "15:28", "15:29", "15:30", "15:31", "15:32", "15:33", "15:34", "15:35", "15:36",
    "15:37", "15:38", "15:39", "15:40", "15:41", "15:42", "15:43", "15:44", "15:45", "15:46", "15:47", "15:48", "15:49", "15:50", "15:51",
    "15:51", "15:52", "15:52", "15:53", "15:54", "15:55", "15:56", "15:57", "15:58",
    "16:00", "16:01", "16:02", "16:03", "16:04", "16:05", "16:06"};

double labelslength = (double)labels.length;
double labelslength2 = (double)(labels.length/10);
    //viewer.setFullRange("x", 0.0, labelslength);

    // Initialize the view port to show the last 366 days (out of 1826 days)
    //viewer.setViewPortWidth(10);
    //viewer.setViewPortLeft(1 - 0.5);

    // Set the maximum zoom to 10 days (out of 1826 days)
    viewer.setZoomInWidthLimit(labelslength2 / labelslength);
}

//
// Draw the chart
//
private void drawChart(WebChartViewer viewer)
{

//チャートに表示するデータ　「Y軸」になります。
double[] data0 = {50, 55, 47, 36, 42, 49, 63, 62, 73, 59, 56, 50, 64, 60, 67, 67, 58, 59, 73, 77,
    84, 82, 80, 84, 50, 55, 47, 36, 42, 49, 63, 62, 73, 59, 56, 50, 64, 60, 67, 67, 58, 59, 73, 77,
    84, 82, 80, 84};
double[] data1 = {36, 28, 25, 33, 90, 20, 22, 30, 25, 33, 30, 24, 28, 36, 30, 45, 90, 42, 48, 45,
    43, 52, 64, 70, 36, 28, 25, 33, 90, 20, 22, 30, 25, 33, 30, 24, 28, 36, 30, 45, 90, 42, 48, 45,
    43, 52, 64, 70};

//チャートに表示するデータ　「X軸」になります。「Y軸」のデータとマッピングします。
String[] labels = {"15:20", "15:21", "15:22", "15:23", "15:24", "15:25", "15:26", "15:27",
    "15:28", "15:29", "15:30", "15:31", "15:32", "15:33", "15:34", "15:35", "15:36",
    "15:37", "15:38", "15:39", "15:40", "15:41", "15:42", "15:43", "15:44", "15:45", "15:46", "15:47", "15:48", "15:49", "15:50", "15:51",
    "15:51", "15:52", "15:52", "15:53", "15:54", "15:55", "15:56", "15:57", "15:58",
    "16:00", "16:01", "16:02", "16:03", "16:04", "16:05", "16:06"};

//チャートの全体サイズ、背景色などを設定します。
XYChart c = new XYChart(1300, 300, 0xeeeeff, 0x000000, 1);
//角を丸めます。指摘しなかった場合は直角になります。
c.setRoundedFrame();

//グラフのサイズ、背景色などを設定します。
c.setPlotArea(55, 60, 1200, 180, 0xffffff, -1, -1, 0xcccccc, 0xcccccc);
// As the data can lie outside the plotarea in a zoomed chart, we need to enable clipping.
//c.setClipping();

//凡例を作成します。凡例の位置、フォント、フォントサイズを設定します。
LegendBox legendBox = c.addLegend(55, 58, false, "Arial Bold", 9);
//凡例ボックスの背景　Chart.Transparentを指定すると背景は透明になります。
legendBox.setBackground(Chart.Transparent);

//Y軸の幅を指定します。自動でOKだと思います。
c.yAxis().setAutoScale(0.1);
//X軸にデータを設定します。幅は自動で表示されます。
c.xAxis().setLabels(labels).setFontAngle(90);

//チャートのタイトルを設定します。
ChartDirector.TextBox title = c.addTitle("TEST", "Consolas Bold ", 15, 0xffffff);
title.setBackground(0x0000cc, 0x000000, Chart.glassEffect(Chart.ReducedGlare));

//X,Y軸のタイトルを設定します。
c.xAxis().setTitle("Time");
c.yAxis().setTitle("Value");

//マーキング線を設定する。
//Mark mark = c.xAxis2().addMark(17, 0x809933ff, "MARK TITLE", "Arial Bold");
//マーキング線の太さ
//mark.setLineWidth(2);
//マーキング線の色
//mark.setFontColor(0x9933ff);

// 波形方（Line）グラフを生成する。
BarLayer layer = c.addBarLayer();

// 波形線の太さ
layer.setLineWidth(3);
// --->here

// 波形にデータを設定します。
//layer.setXData(labels);
layer.addDataSet(data0, -1, "TEST1");

//c.xAxis().setFormatCondition("align", 60);
//c.xAxis().setLabelFormat("{value|hh:nn}");

    //================================================================================
    // Configure axis scale and labelling
    //================================================================================

    // Set the x-axis as a date/time axis with the scale according to the view port x range.
    viewer.syncDateAxisWithViewPort("x", c.xAxis());
    //viewer.syncLinearAxisWithViewPort("x", c.xAxis());

    // In this demo, we rely on ChartDirector to auto-label the axis. We ask ChartDirector to ensure
    // the x-axis labels are at least 75 pixels apart to avoid too many labels.
    c.xAxis().setTickDensity(75);

    //================================================================================
    // Output the chart
    //================================================================================

// チャートのセッション情報を取得。
String chartQuery = c.makeSession(viewer.getRequest(), viewer.getId());

// イメージマップの作成。グラフに値を表示したり、押下時のイベント設定が可能。
String chartImageMap = c.getHTMLImageMap("javascript:popMsgView('{dataSetName}','{xLabel}','{value|0}');", " ",
    "title='{dataSetName} @ {xLabel} = {value|0} '");

//チャートイメージを生成。
viewer.setImageUrl("/seat/resource/jspdemo/getchart.jsp?" + chartQuery);

// tracking cursor（マウスカーソルで表示される線・値）をサポートする「JSモデル」をセット
viewer.setChartModel(c.getJsChartModel());
//イメージマップの設定。これによりグラフの押下が可能になる。
viewer.setImageMap(chartImageMap);

viewer.setChartMetrics(c.getChartMetrics());
}
%>

<%

// Create the WebChartViewer object
WebChartViewer viewer = new WebChartViewer(request, "chart1");

if (viewer.isPartialUpdateRequest()) {
    // Is a partial update request. Draw the chart and perform a partial response.
    drawChart(viewer);
    out.clear();
    viewer.partialUpdateChart(response);
    return;
}

//
// If the code reaches here, it is a full page request.
//

// In this exapmle, we just need to initialize the WebChartViewer and draw the chart.
initViewer(viewer);
drawChart(viewer);

%>
<html>
<body style="margin:5px 0px 0px 5px">


<script type="text/javascript" src="/seat/resource/jspdemo/cdjcv.js"></script>
<script type="text/javascript">

//グラフを押下時に動作するファンクション
function popMsgView(legend,xLabel,value) {
    alert("You have clicked on " + legend + "@" + xLabel+ "="+value + ".");
}

//グラフ内でのマウスの動きをキャッチしてくれるイベントハンドラー
JsChartViewer.addEventListener(window, 'load', function() {

//チャートのIDでビューアを生成（TEST）
    var viewer = JsChartViewer.get('<%=viewer.getId()%>');

    viewer.attachHandler("ViewPortChanged", viewer.partialUpdate);

    // Set the initial mouse usage to "scroll"
    viewer.setMouseUsage(JsChartViewer.Scroll);
    document.getElementById("scrollChart").checked = true;

    // track cursor作成。サンプルをそのまま利用しているため、詳細までみていない。
    viewer.attachHandler(["MouseMovePlotArea", "TouchStartPlotArea", "TouchMovePlotArea", "ChartMove"],
    function(e) {
        this.preventDefault(e);   // Prevent the browser from using touch events for other actions
        trackLineLabel(viewer, viewer.getPlotAreaMouseX());
        viewer.setAutoHide("all", ["MouseOutPlotArea", "TouchEndPlotArea"]);
    });

});

//Trackのデータの線を作成するファンクション。これもサンプルをそのまま流用
function trackLineLabel(viewer, mouseX)
{
    // Remove all previously drawn tracking object
    viewer.hideObj("all");

    // The chart and its plot area
    var c = viewer.getChart();
    var plotArea = c.getPlotArea();

    // Get the data x-value that is nearest to the mouse, and find its pixel coordinate.
    var xValue = c.getNearestXValue(mouseX);
    var xCoor = c.getXCoor(xValue);

    // Draw a vertical track line at the x-position
    viewer.drawVLine("trackLine", xCoor, plotArea.getTopY(), plotArea.getBottomY(), "black 1px dotted");

    // Draw a label on the x-axis to show the track line position
    viewer.showTextBox("xAxisLabel", xCoor, plotArea.getBottomY() + 4, JsChartViewer.Top,
        c.xAxis().getFormattedLabel(xValue, "mmm dd, yyyy"),
        "font:bold 11px Arial;color:#FFFFFF;background-color:#000000;padding:0px 3px");

    // Iterate through all layers to draw the data labels
    for (var i = 0; i < c.getLayerCount(); ++i)
    {
        var layer = c.getLayerByZ(i);

        // The data array index of the x-value
        var xIndex = layer.getXIndexOf(xValue);

        // Iterate through all the data sets in the layer
        for (var j = 0; j < layer.getDataSetCount(); ++j)
        {
            var dataSet = layer.getDataSetByZ(j);

            // Get the color and position of the data label
            var color = dataSet.getDataColor();
            var yCoor = c.getYCoor(dataSet.getPosition(xIndex), dataSet.getUseYAxis());

            // Draw a track dot with a label next to it for visible data points in the plot area
            if ((yCoor != null) && (yCoor >= plotArea.getTopY()) && (yCoor <= plotArea.getBottomY()) &&
                (color != null))
            {
                viewer.showTextBox("dataPoint" + i + "_" + j, xCoor, yCoor, JsChartViewer.Center,
                    viewer.htmlRect(7, 7, color));

                viewer.showTextBox("dataLabel" + i + "_" + j, xCoor + 5, yCoor, JsChartViewer.Left,
                    dataSet.getValue(xIndex).toPrecision(4), "padding:0px 3px;font:bold 11px Arial;" +
                    "background-color:" + color + ";color:#FFFFFF;-webkit-text-size-adjust:100%;");
            }
        }
    }
}

</script>

<form method="post">
<table cellspacing="0" cellpadding="0" border="0">
    <tr valign="top">
        <td style="width:127px; background:#c0c0ff; border-right:black 1px solid; border-bottom:black 1px solid;">
        <div style="font:9pt Verdana; padding:10px 0px 0px 3px; line-height:1.5; width:127px">
            
            <input name="mouseUsage" id="scrollChart" type="radio"
                onclick="JsChartViewer.get('<%=viewer.getId()%>').setMouseUsage(JsChartViewer.Scroll)" />
            Scroll<br />
            <input name="mouseUsage" id="zoomInChart" type="radio"
                onclick="JsChartViewer.get('<%=viewer.getId()%>').setMouseUsage(JsChartViewer.ZoomIn)" />
            Zoom In<br />
            <input name="mouseUsage" id="zoomOutChart" type="radio"
                onclick="JsChartViewer.get('<%=viewer.getId()%>').setMouseUsage(JsChartViewer.ZoomOut)" />
            Zoom Out<br />
        </div>
        </td>
        <td>
            <div style="font-weight:bold; font-size:20pt; margin:5px 0px 0px 5px; font-family:Arial">

            </div>
            <hr style="border:solid 1px #000080" />
            <div style="padding:0px 5px 5px 10px">
                
                <%=viewer.renderHTML(response)%>
            </div>
        </td>
    </tr>
</table>
</form>
</body>
</html>

Re: X axis disply time values

Posted by Peter Kwan on Mar-24-2017 02:53

Hi tony,

For your case, the x-axis is a label based x-axis. The labels are just "text strings", and not Date or numbers. For this type of axis, instead of using "syncLinearAxisWithViewPort" or "syncDateAxisWithViewPort", you would need to configure the x-axis labels using the following code:

// Set the axis to the view port range, but without labels
viewer.setFullRange("x", labels.length - 1);
double leftX = viewer.getValueAtViewPort("x", viewer.getViewPortLeft());
double rightX = viewer.getValueAtViewPort("x", viewer.getViewPortLeft() + viewer.getViewPortWidth());
c.xAxis().setLinearScale(leftX, rightX, Chart.NoValue);

// Add custom labels to the axis
for (int i = (int)(leftX + 0.9999); i < rightX; ++i)
   c.xAxis().addLabel(i, labels[i]);

The modified code would be like the followings:

Regards
Peter Kwan

<%@page import="ChartDirector.*" %>
<%@ page import="java.util.*" %>
<%!

//チャートに表示するデータ　「X軸」になります。「Y軸」のデータとマッピングします。
String[] labels = {"15:20", "15:21", "15:22", "15:23", "15:24", "15:25", "15:26", "15:27",
"15:28", "15:29", "15:30", "15:31", "15:32", "15:33", "15:34", "15:35", "15:36",
"15:37", "15:38", "15:39", "15:40", "15:41", "15:42", "15:43", "15:44", "15:45", "15:46", "15:47", "15:48", "15:49", "15:50", "15:51",
"15:51", "15:52", "15:52", "15:53", "15:54", "15:55", "15:56", "15:57", "15:58",
"16:00", "16:01", "16:02", "16:03", "16:04", "16:05", "16:06"};

//
// Initialize the WebChartViewer when the page is first loaded
//
private void initViewer(WebChartViewer viewer)
{
    viewer.setFullRange("x", 0.0, labels.length - 1);

    // Initialize the view port to show the last 366 days (out of 1826 days)
    //viewer.setViewPortWidth(10);
    //viewer.setViewPortLeft(1 - 0.5);

    // Set the maximum zoom to 10x
    viewer.setZoomInWidthLimit(1.0 / 10.0);
}

//
// Draw the chart
//
private void drawChart(WebChartViewer viewer)
{

//チャートに表示するデータ　「Y軸」になります。
double[] data0 = {50, 55, 47, 36, 42, 49, 63, 62, 73, 59, 56, 50, 64, 60, 67, 67, 58, 59, 73, 77,
    84, 82, 80, 84, 50, 55, 47, 36, 42, 49, 63, 62, 73, 59, 56, 50, 64, 60, 67, 67, 58, 59, 73, 77,
    84, 82, 80, 84};
double[] data1 = {36, 28, 25, 33, 90, 20, 22, 30, 25, 33, 30, 24, 28, 36, 30, 45, 90, 42, 48, 45,
    43, 52, 64, 70, 36, 28, 25, 33, 90, 20, 22, 30, 25, 33, 30, 24, 28, 36, 30, 45, 90, 42, 48, 45,
    43, 52, 64, 70};

//チャートの全体サイズ、背景色などを設定します。
XYChart c = new XYChart(1300, 300, 0xeeeeff, 0x000000, 1);
//角を丸めます。指摘しなかった場合は直角になります。
c.setRoundedFrame();

//グラフのサイズ、背景色などを設定します。
c.setPlotArea(55, 60, 1200, 180, 0xffffff, -1, -1, 0xcccccc, 0xcccccc);
// As the data can lie outside the plotarea in a zoomed chart, we need to enable clipping.
//c.setClipping();

//凡例を作成します。凡例の位置、フォント、フォントサイズを設定します。
LegendBox legendBox = c.addLegend(55, 58, false, "Arial Bold", 9);
//凡例ボックスの背景　Chart.Transparentを指定すると背景は透明になります。
legendBox.setBackground(Chart.Transparent);

//Y軸の幅を指定します。自動でOKだと思います。
c.yAxis().setAutoScale(0.1);
//X軸にデータを設定します。幅は自動で表示されます。
c.xAxis().setLabels(labels).setFontAngle(90);

//チャートのタイトルを設定します。
ChartDirector.TextBox title = c.addTitle("TEST", "Consolas Bold ", 15, 0xffffff);
title.setBackground(0x0000cc, 0x000000, Chart.glassEffect(Chart.ReducedGlare));

//X,Y軸のタイトルを設定します。
c.xAxis().setTitle("Time");
c.yAxis().setTitle("Value");

//マーキング線を設定する。
//Mark mark = c.xAxis2().addMark(17, 0x809933ff, "MARK TITLE", "Arial Bold");
//マーキング線の太さ
//mark.setLineWidth(2);
//マーキング線の色
//mark.setFontColor(0x9933ff);

// 波形方（Line）グラフを生成する。
BarLayer layer = c.addBarLayer();

// 波形線の太さ
layer.setLineWidth(3);
// --->here

// 波形にデータを設定します。
//layer.setXData(labels);
layer.addDataSet(data0, -1, "TEST1");

//c.xAxis().setFormatCondition("align", 60);
//c.xAxis().setLabelFormat("{value|hh:nn}");

    //================================================================================
    // Configure axis scale and labelling
    //================================================================================

    // Set the x-axis as a linear axis
double leftX = viewer.getValueAtViewPort("x", viewer.getViewPortLeft());
double rightX = viewer.getValueAtViewPort("x", viewer.getViewPortLeft() + viewer.getViewPortWidth());
c.xAxis().setLinearScale(leftX, rightX, Chart.NoValue);

// Add custom labels to the axis
for (int i = (int)(leftX + 0.9999); i < rightX; ++i)
c.xAxis().addLabel(i, labels[i]);

    //================================================================================
    // Output the chart
    //================================================================================

// チャートのセッション情報を取得。
String chartQuery = c.makeSession(viewer.getRequest(), viewer.getId());

// イメージマップの作成。グラフに値を表示したり、押下時のイベント設定が可能。
String chartImageMap = c.getHTMLImageMap("javascript:popMsgView('{dataSetName}','{xLabel}','{value|0}');", " ",
    "title='{dataSetName} @ {xLabel} = {value|0} '");

//チャートイメージを生成。
viewer.setImageUrl("/seat/resource/jspdemo/getchart.jsp?" + chartQuery);

// tracking cursor（マウスカーソルで表示される線・値）をサポートする「JSモデル」をセット
viewer.setChartModel(c.getJsChartModel());
//イメージマップの設定。これによりグラフの押下が可能になる。
viewer.setImageMap(chartImageMap);

viewer.setChartMetrics(c.getChartMetrics());
}
%>

<%

// Create the WebChartViewer object
WebChartViewer viewer = new WebChartViewer(request, "chart1");

if (viewer.isPartialUpdateRequest()) {
    // Is a partial update request. Draw the chart and perform a partial response.
    drawChart(viewer);
    out.clear();
    viewer.partialUpdateChart(response);
    return;
}

//
// If the code reaches here, it is a full page request.
//

// In this exapmle, we just need to initialize the WebChartViewer and draw the chart.
initViewer(viewer);
drawChart(viewer);

%>
<html>
<body style="margin:5px 0px 0px 5px">


<script type="text/javascript" src="/seat/resource/jspdemo/cdjcv.js"></script>
<script type="text/javascript">

//グラフを押下時に動作するファンクション
function popMsgView(legend,xLabel,value) {
    alert("You have clicked on " + legend + "@" + xLabel+ "="+value + ".");
}

//グラフ内でのマウスの動きをキャッチしてくれるイベントハンドラー
JsChartViewer.addEventListener(window, 'load', function() {

//チャートのIDでビューアを生成（TEST）
    var viewer = JsChartViewer.get('<%=viewer.getId()%>');

    viewer.attachHandler("ViewPortChanged", viewer.partialUpdate);

    // Set the initial mouse usage to "scroll"
    viewer.setMouseUsage(JsChartViewer.Scroll);
    document.getElementById("scrollChart").checked = true;

    // track cursor作成。サンプルをそのまま利用しているため、詳細までみていない。
    viewer.attachHandler(["MouseMovePlotArea", "TouchStartPlotArea", "TouchMovePlotArea", "ChartMove"],
    function(e) {
        this.preventDefault(e);   // Prevent the browser from using touch events for other actions
        trackLineLabel(viewer, viewer.getPlotAreaMouseX());
        viewer.setAutoHide("all", ["MouseOutPlotArea", "TouchEndPlotArea"]);
    });
});

//Trackのデータの線を作成するファンクション。これもサンプルをそのまま流用
function trackLineLabel(viewer, mouseX)
{
    // Remove all previously drawn tracking object
    viewer.hideObj("all");

    // The chart and its plot area
    var c = viewer.getChart();
    var plotArea = c.getPlotArea();

    // Get the data x-value that is nearest to the mouse, and find its pixel coordinate.
    var xValue = c.getNearestXValue(mouseX);
    var xCoor = c.getXCoor(xValue);

    // Draw a vertical track line at the x-position
    viewer.drawVLine("trackLine", xCoor, plotArea.getTopY(), plotArea.getBottomY(), "black 1px dotted");

    // Draw a label on the x-axis to show the track line position
    viewer.showTextBox("xAxisLabel", xCoor, plotArea.getBottomY() + 4, JsChartViewer.Top,
        c.xAxis().getFormattedLabel(xValue, "mmm dd, yyyy"),
        "font:bold 11px Arial;color:#FFFFFF;background-color:#000000;padding:0px 3px");

    // Iterate through all layers to draw the data labels
    for (var i = 0; i < c.getLayerCount(); ++i)
    {
        var layer = c.getLayerByZ(i);

        // The data array index of the x-value
        var xIndex = layer.getXIndexOf(xValue);

        // Iterate through all the data sets in the layer
        for (var j = 0; j < layer.getDataSetCount(); ++j)
        {
            var dataSet = layer.getDataSetByZ(j);

            // Get the color and position of the data label
            var color = dataSet.getDataColor();
            var yCoor = c.getYCoor(dataSet.getPosition(xIndex), dataSet.getUseYAxis());

            // Draw a track dot with a label next to it for visible data points in the plot area
            if ((yCoor != null) && (yCoor >= plotArea.getTopY()) && (yCoor <= plotArea.getBottomY()) &&
                (color != null))
            {
                viewer.showTextBox("dataPoint" + i + "_" + j, xCoor, yCoor, JsChartViewer.Center,
                    viewer.htmlRect(7, 7, color));

                viewer.showTextBox("dataLabel" + i + "_" + j, xCoor + 5, yCoor, JsChartViewer.Left,
                    dataSet.getValue(xIndex).toPrecision(4), "padding:0px 3px;font:bold 11px Arial;" +
                    "background-color:" + color + ";color:#FFFFFF;-webkit-text-size-adjust:100%;");
            }
        }
    }
}

</script>

<form method="post">
<table cellspacing="0" cellpadding="0" border="0">
    <tr valign="top">
        <td style="width:127px; background:#c0c0ff; border-right:black 1px solid; border-bottom:black 1px solid;">
        <div style="font:9pt Verdana; padding:10px 0px 0px 3px; line-height:1.5; width:127px">
            
            <input name="mouseUsage" id="scrollChart" type="radio"
                onclick="JsChartViewer.get('<%=viewer.getId()%>').setMouseUsage(JsChartViewer.Scroll)" />
            Scroll<br />
            <input name="mouseUsage" id="zoomInChart" type="radio"
                onclick="JsChartViewer.get('<%=viewer.getId()%>').setMouseUsage(JsChartViewer.ZoomIn)" />
            Zoom In<br />
            <input name="mouseUsage" id="zoomOutChart" type="radio"
                onclick="JsChartViewer.get('<%=viewer.getId()%>').setMouseUsage(JsChartViewer.ZoomOut)" />
            Zoom Out<br />
        </div>
        </td>
        <td>
            <div style="font-weight:bold; font-size:20pt; margin:5px 0px 0px 5px; font-family:Arial">

            </div>
            <hr style="border:solid 1px #000080" />
            <div style="padding:0px 5px 5px 10px">
                
                <%=viewer.renderHTML(response)%>
            </div>
        </td>
    </tr>
</table>
</form>
</body>
</html>

Re: X axis disply time values
Posted by tony on Mar-24-2017 10:25	\| Reply \| Monitor
Hi,Peter Thank you for your Answer. worked perfectly!