Latest revision as of 02:57, 18 January 2022

In this section, we will show how to create your first ZK Charts component step by step.

A Very Basic Chart

First, declare a chart component in a ZUML document. Specify type and title properties.

chart.zul

<charts id="chart" type="line" title="Season Average Temperature" 
    apply="org.zkoss.zkcharts.essentials.FirstChartComposer"/>

Use model to handle chart data, and set model to chart in a Controller which extends SelectorComposer

First ChartComposer.java

public class FirstChartComposer extends SelectorComposer<Component> {
    @Wire
    Charts chart;

    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        // Create a predefined implementation category model
        CategoryModel model = new DefaultCategoryModel();

        // Set value to the model
        model.setValue("Tokyo", "Spring", new Integer(11));
        model.setValue("Tokyo", "Summer", new Integer(20));
        model.setValue("Tokyo", "Fall", new Integer(16));
        model.setValue("Tokyo", "Winter", new Integer(-2));
        model.setValue("New York", "Spring", new Integer(6));
        model.setValue("New York", "Summer", new Integer(12));
        model.setValue("New York", "Fall", new Integer(10));
        model.setValue("New York", "Winter", new Integer(2));

        // Set model to the chart
        chart.setModel(model);
    }
}

After that, you can easily obtain an amazing chart to visualize your data.

Change Configuration

Moreover, if you want to change the configuration, you can add additional declarations in the composer:

    // Get the legend option in chart
    Legend legend = chart.getLegend();

    // Chage lengend's layout to vertical
    legend.setLayout("vertical");

    // Change lengend's alignment
    legend.setAlign("right");
    legend.setVerticalAlign("middle");

    // Remove lenged's border
    legend.setBorderWidth(0);

The Legend of chart will be moved to the right of the chart without border.

< Get Complete Source Code of This Book >

Last Update : 2022/01/18

Anonymous

Create your first ZK Charts"

Namespaces

More

Page actions

Latest revision as of 02:57, 18 January 2022

Contents

A Very Basic Chart

chart.zul

First ChartComposer.java

Change Configuration

@@ Line 1: / Line 1: @@
 {{ZKChartsEssentialsPageHeader}}
-{{Template:UnderConstruction}}
+In this section, we will show how to create your first ZK Charts component step by step.
-In the section we will show how to create your first ZK Charts component step by step.
+= A Very Basic Chart =
-First, declare a chart component in a ZUML document. Assign <tt>type</tt> and <tt>title</tt> properties to it.
+First, declare a chart component in a ZUML document. Specify <code>type</code> and <code>title</code> properties.
+== chart.zul==
 <source lang="xml">
-<window apply="ChartComposer">
+<charts id="chart" type="line" title="Season Average Temperature"
-    <charts id="chart" type="line" title="Season Average Temperature" />
+    apply="org.zkoss.zkcharts.essentials.FirstChartComposer"/>
-</window>
 </source>
-Then give some additional settings in composer:
+Use model to handle chart data, and set model to chart in a Controller which extends <javadoc>org.zkoss.zk.ui.select.SelectorComposer</javadoc>
+== First ChartComposer.java ==
 <source lang="java">
-     // Add "°C" to value in tooltip
+public class FirstChartComposer extends SelectorComposer<Component> {
-    chart.getTooltip().setValueSuffix("°C");
+     @Wire
+    Charts chart;
+    public void doAfterCompose(Component comp) throws Exception {
+        super.doAfterCompose(comp);
+        // Create a predefined implementation category model
+        CategoryModel model = new DefaultCategoryModel();
+        // Set value to the model
+        model.setValue("Tokyo", "Spring", new Integer(11));
+        model.setValue("Tokyo", "Summer", new Integer(20));
+        model.setValue("Tokyo", "Fall", new Integer(16));
+        model.setValue("Tokyo", "Winter", new Integer(-2));
+        model.setValue("New York", "Spring", new Integer(6));
+        model.setValue("New York", "Summer", new Integer(12));
+        model.setValue("New York", "Fall", new Integer(10));
+        model.setValue("New York", "Winter", new Integer(2));
+        // Set model to the chart
+        chart.setModel(model);
+    }
+}
+</source>
+After that, you can easily obtain an amazing chart to visualize your data.
+[[File:FirstChart.png]]
+== Change Configuration ==
+Moreover, if you want to change the configuration, you can add additional declarations in the composer:
+<source lang="java">
+    // Get the legend option in chart
      Legend legend = chart.getLegend();
-     // Set lengend's layout and alignment
+     // Chage lengend's layout to vertical
      legend.setLayout("vertical");
+    // Change lengend's alignment
      legend.setAlign("right");
      legend.setVerticalAlign("middle");
-     // Set lenged's border width to 0
+     // Remove lenged's border
      legend.setBorderWidth(0);
 </source>
-There has many ways to
-And we can specify chart data with model:
-<source lang="java">
-    CategoryModel model = new SimpleCategoryModel();
-    model.setValue("Tokyo", "Spring", new Integer(11));
+The <javadoc directory="zkcharts">org.zkoss.chart.Legend</javadoc>  of chart will be moved to the right of the chart without border.
-    model.setValue("Tokyo", "Summer", new Integer(20));
-    model.setValue("Tokyo", "Fall", new Integer(16));
-    model.setValue("Tokyo", "Winter", new Integer(9));
-    model.setValue("New York", "Spring", new Integer(6));
-    model.setValue("New York", "Summer", new Integer(14));
-    model.setValue("New York", "Fall", new Integer(8));
-    model.setValue("New York", "Winter", new Integer(2));
-    chart.setModel(model);
+[[File:FirstChartSettings.png]]
-</source>
 {{ZKChartsEssentialsPageFooter}}