PHP Line Chart: Issues with Series and Grouping.

4 posts, 1 answers
  1. Mark
    Mark avatar
    3 posts
    Member since:
    Apr 2013

    Posted 19 Apr 2013 Link to this post

    I'm having some trouble getting my series points to separate by 'Category'. Visual view is attached, code and data example is below.

    It looks like the last category in the list overwrites the one before it. (in this case 'comments' overwrites 'views')

    Thanks for your help.
    $transport = new \Kendo\Data\DataSourceTransport();
                $transport->read( array(
                    'url' => '/projects/stats/data/' . $id,
                    'type' => 'POST',
                    'dataType' => 'json',
                    'data' => array( 'datelow' => $dateLow, 'datehigh' => $dateHigh, 'category' => $category ),
                ));
                 
                 
                $series = new \Kendo\Dataviz\UI\ChartSeriesItem();
                $series->type('line')
                       ->field('count')
                       ->name('count');
                      //->aggregate('count');
                       //->groupNameTemplate('#= group.value #')
                       
                 
                $valueAxis = new \Kendo\Dataviz\UI\ChartValueAxisItem();
                $valueAxis->labels(array(
                                'format' => '{0}',
                                'skip' => 0,
                                'step' => 2
                          ));
                $valueAxis->min(0);
                //$valueAxis->max(100);
                //$valueAxis->majorUnit(10);
                 
                $categoryAxis = new \Kendo\Dataviz\UI\ChartCategoryAxisItem();
                $categoryAxis->field('timestamp');
                //$categoryAxis->type('date');
                  
                 
                $tooltip = new \Kendo\Dataviz\UI\ChartTooltip();
                $tooltip->visible(true)
                        ->format('{0}%')
                        ->color('#fff')
                        ->template('#= series.name # : #= value #');
                 
                 
                // Configure the model
                $model = new \Kendo\Data\DataSourceSchemaModel();
                $model->addField(array('field' => 'timestamp', 'type' => 'date'));
                 
                $schema = new \Kendo\Data\DataSourceSchema();
                $schema->model($model);
             
                $dataSource = new \Kendo\Data\DataSource();
                 
                $dataSource->error('function(e) { console.log(e); }');
                $dataSource->transport($transport)
                           ->schema($schema)
                           ->addGroupItem(array('field' => 'category'));
                                                
                $chart = new \Kendo\Dataviz\UI\Chart('chart');          
                 
                     
                $chart->title(array('text' => 'Episode Statistics'))
                      ->dataSource($dataSource)
                      ->legend(array('position' => 'bottom'))
                      ->addSeriesItem($series)
                      ->addValueAxisItem($valueAxis)
                      ->addCategoryAxisItem($categoryAxis)
                      ->seriesDefaults(array('type' => 'area'))
                      ->tooltip($tooltip)
                      ->transitions(false);
    [
    {
    id: "72",
    episode: "9",
    user: "7",
    timestamp: "2013-04-19",
    category: "views",
    count: 1
    },
    {
    id: "71",
    episode: "9",
    user: "7",
    timestamp: "2013-04-19",
    category: "views",
    count: 1
    },
    {
    id: "73",
    episode: "9",
    user: "8",
    timestamp: "2013-04-19",
    category: "views",
    count: 1
    },
    {
    id: "74",
    episode: "9",
    user: "7",
    timestamp: "2013-04-19",
    category: "views",
    count: 1
    },
    {
    id: "78",
    episode: "9",
    user: "9",
    timestamp: "2013-04-19",
    category: "views",
    count: 1
    },
    {
    id: "75",
    episode: "9",
    user: "9",
    timestamp: "2013-04-19",
    category: "views",
    count: 1
    },
    {
    id: "70",
    episode: "9",
    user: "8",
    timestamp: "2013-04-19",
    category: "views",
    count: 1
    },
    {
    id: "69",
    episode: "9",
    user: "7",
    timestamp: "2013-04-19",
    category: "views",
    count: 1
    },
    {
    id: "64",
    episode: "9",
    user: "7",
    timestamp: "2013-04-19",
    category: "views",
    count: 1
    },
    {
    id: "3",
    episode: "9",
    user: "7",
    parent: "0",
    comment: "Writing another comment",
    editcount: "0",
    timestamp: "2013-04-19",
    flagged: "0",
    category: "comments",
    count: 1
    },
    {
    id: "65",
    episode: "9",
    user: "7",
    timestamp: "2013-04-19",
    category: "views",
    count: 1
    },
    {
    id: "66",
    episode: "9",
    user: "7",
    timestamp: "2013-04-19",
    category: "views",
    count: 1
    },
    {
    id: "68",
    episode: "9",
    user: "7",
    timestamp: "2013-04-19",
    category: "views",
    count: 1
    },
    {
    id: "67",
    episode: "9",
    user: "7",
    timestamp: "2013-04-19",
    category: "views",
    count: 1
    },
    {
    id: "2",
    episode: "9",
    user: "7",
    parent: "0",
    comment: "A really insightful piece.",
    editcount: "0",
    timestamp: "2013-04-19",
    flagged: "0",
    category: "comments",
    count: 1
    }
    ]
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 23 Apr 2013 Link to this post

    Hello,

    The category axis will automatically group points by date if the field actually contains a Date instance. The field is converted to date according to the specified schema.

    As all points have the same date they're aggregated into a single point. The default aggregate is "max".

    You can set the axis type to "category" to disable this behavior. Then each category will be plotted separately.

    All the best,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET AJAX banner
  4. Mark
    Mark avatar
    3 posts
    Member since:
    Apr 2013

    Posted 23 Apr 2013 Link to this post

    Sorry should have been a bit more specific, my field names probably led to some confusion.

    I want to group the SeriesAxis by the field 'Category' so I have different lines depending on what different categories are in the date . Having the CategoryAxis group by date is fine.

    Here's a better example of content that has a mix of dates and categories. ('views' and 'categories')

    [
    {
    id: "2",
    episode: "9",
    user: "7",
    parent: "0",
    comment: "A really insightful piece.",
    editcount: "0",
    timestamp: "2013-04-19 00:00:00",
    flagged: "0",
    category: "comments",
    count: "1"
    },
    {
    id: "3",
    episode: "9",
    user: "7",
    parent: "0",
    comment: "Writing another comment",
    editcount: "0",
    timestamp: "2013-04-19 00:00:00",
    flagged: "0",
    category: "comments",
    count: "1"
    },
    {
    id: "64",
    episode: "9",
    user: "7",
    timestamp: "2013-04-19 11:04:57",
    category: "views",
    count: "1"
    },
    {
    id: "65",
    episode: "9",
    user: "7",
    timestamp: "2013-04-19 11:10:57",
    category: "views",
    count: "1"
    },
    {
    id: "66",
    episode: "9",
    user: "7",
    timestamp: "2013-04-19 11:13:21",
    category: "views",
    count: "1"
    },
    {
    id: "67",
    episode: "9",
    user: "7",
    timestamp: "2013-04-19 11:14:05",
    category: "views",
    count: "1"
    },
    {
    id: "68",
    episode: "9",
    user: "7",
    timestamp: "2013-04-19 11:20:04",
    category: "views",
    count: "1"
    },
    {
    id: "69",
    episode: "9",
    user: "7",
    timestamp: "2013-04-19 11:20:43",
    category: "views",
    count: "1"
    },
    {
    id: "70",
    episode: "9",
    user: "8",
    timestamp: "2013-04-19 11:21:20",
    category: "views",
    count: "1"
    },
    {
    id: "71",
    episode: "9",
    user: "7",
    timestamp: "2013-04-19 11:21:25",
    category: "views",
    count: "1"
    },
    {
    id: "72",
    episode: "9",
    user: "7",
    timestamp: "2013-04-19 11:31:15",
    category: "views",
    count: "1"
    },
    {
    id: "73",
    episode: "9",
    user: "8",
    timestamp: "2013-04-19 11:36:34",
    category: "views",
    count: "1"
    },
    {
    id: "74",
    episode: "9",
    user: "7",
    timestamp: "2013-04-19 11:37:54",
    category: "views",
    count: "1"
    },
    {
    id: "75",
    episode: "9",
    user: "9",
    timestamp: "2013-04-19 12:14:55",
    category: "views",
    count: "1"
    },
    {
    id: "78",
    episode: "9",
    user: "9",
    timestamp: "2013-04-19 12:23:29",
    category: "views",
    count: "1"
    },
    {
    id: "225",
    episode: "9",
    user: "3",
    timestamp: "2013-04-22 18:40:24",
    category: "views",
    count: "1"
    }
    ]
  5. Answer
    Mark
    Mark avatar
    3 posts
    Member since:
    Apr 2013

    Posted 24 Apr 2013 Link to this post

    I solved this by changing the data structure to something easier to manage.
Back to Top
UI for ASP.NET AJAX banner