Hitachi Vantara Pentaho Community Forums
Results 1 to 4 of 4

Thread: [CDF] LineChart with 1 Category and several Series

  1. #1

    Default [CDF] LineChart with 1 Category and several Series


    I am trying to plot several series on a single LineChart. This is my chart definition:
    var chart2 = {
        name: "chart2",
        type: "jFreeChartComponent",
        listeners: ["listener1", "listener2"],
        chartDefinition: chart2Definition,
        htmlObject: "chart2Object",
        executeAtStart: true
    with this chartDefinition:
    var chart2Definition = {
        width: 500,
        height: 250,
        chartType: 'LineChart',
        byRow: 'false',
        datasetType: 'CategoryDataset',
        is3d: 'false',
        isStacked: 'false',
        includeLegend: 'true',
        foregroundAlpha: 0.7,
        queryType: 'sql',
        jndi: 'myJNDI',
        query: function() {
            var q = 'SELECT 2007 as category, 1 as series1, 2 as series2, 3 as series3 ' +
                    'UNION   ' +
                    'SELECT 2008, 2, 3, 4 ' +
                    'UNION ' +
                    'SELECT 2009, 5, 6, 7 ' +
                    'UNION ' +
                    'SELECT 2010, 8, 9, 10;';
            return q;
    So this is the chart I am getting:
    Name:  chart1.png
Views: 87
Size:  5.5 KB

    while i was hoping to obtain something similar to:
    Name:  chart2.png
Views: 88
Size:  19.8 KB

    ¿how to tell to the chart that the first column is the category and the following columns are series? I have been trying to achieve this by changing the datasetType from 'CategoryDataset' to a 'XYDataset' or even change 'byRow' default 'false' to 'true'... but i am unable to get this chart to behave as i want.

    Any ideas will be appreciated. Regards.

  2. #2
    Join Date
    Nov 2011


    Is it an option to move to CCC 2 charts ?
    It would be much easier...
    Pedro Vale
    CTools Product Development

  3. #3


    Yes, in deed my next step digging into Pentaho will be combine CCC2 & CDF. I'm going to starting by follow this instructions.

    Taking advantage of your kindness, could you suggest me any online reference in order to know how to format data input to CCC2 charts? I'm consulting this JsDoc but i am getting lost.

    do all chart types expect the same format?

    Thank you for your reply. Regards.

  4. #4


    Hello again,

    i think i got this working using CCC2, this is what i've made (I share this just in case anyone is interested):

    Assuming this div in your html:
    HTML Code:
        <div class="chartWrapper">
            <div class="chart chart4">
                <h3>Example<span class="ui-icon ui-icon-triangle-1-n" onclick="toggleChart(this)"></span></h3>
            <div id="chart4Object"></div>
    Let's create the chart and link it to the Dashboard:

        var chart4 = {
            name: 'chart4',
            type: 'cccLineChart',
            listeners: ['lis1', 'lis2', 'lis3'],
            parameters: [['param1Name', 'param1VariableName'],['param2Name','param2VariableName'],['param3Name','param3VariableName']],
            chartDefinition: chart4Definition,
            htmlObject: 'chart4Object',
            executeAtStart: true
        // The components to be loaded into the dashboard withing the [] separated by ,
        var components = [chart4];
        // The initial dashboard load function definition
        function load() {
         // The initial dashboard load function execution
    and this is the 'chart4Definition':

        var chart4Definition = {
            width: 500,
            height: 300,
            dataAccessId: '1',
            path: '/myDashboard/example.cda',
            legend: true
    In this case i am using CDA in order to retrieve data. Here it's the 'example.cda':
    <?xml version="1.0" encoding="utf-8"?>
        <!-- DataSource definition. 
        Type controls what the datasource type is.
        The connection and query controls how the data is fetched. These values
        are specific to each access type
            <Connection id="1" type="sql.jdbc">
        <DataAccess id="1" connection="1" type="sql" access="public" cache="true" cacheDuration="3600">
            <Name>Forum Example</Name>
                SELECT 2007 as category, 1 as series1, 2 as series2, 3 as series3
                SELECT 2008, 2, 3, 4
                SELECT 2009, 5, 6, 7
                SELECT 2010, 8, 9, 10

    Working with CDA is plenty of advantages: your code gets more modular, easier to touch and mantain. Also it's safer as it is server side executed.

    Finally, this is the chart:

    Name:  chart.png
Views: 78
Size:  17.0 KB

    And that's all folks.

    Although this is finally working the point here is that by using CCC2 the input data format the chart is expecting is just what i'm getting from cda/sql.

    How to know input data format for each cccChart? Im my case this is done by 'trial and error' + 'great amount of luck' (like in this example, and as you clearly can imagine this is far away from optimal developing :/).

    Do you know any online reference to consult input data format in CCC2 charts? any other information about the 1000 CCC2 charts properties not used on this example will be also quite appreciated

    Thanks again for your time dealing with CTools newbies like me, bb

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
Privacy Policy | Legal Notices | Safe Harbor Privacy Policy

Copyright © 2005 - 2019 Hitachi Vantara Corporation. All Rights Reserved.