This is a migrated thread and some comments may be shown as answers.

PHP Line Chart: Issues with Series and Grouping.

3 Answers 38 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 19 Apr 2013, 08:12 PM
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
}
]

3 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 23 Apr 2013, 11:59 AM
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!
0
Mark
Top achievements
Rank 1
answered on 23 Apr 2013, 02:00 PM
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"
}
]
0
Accepted
Mark
Top achievements
Rank 1
answered on 24 Apr 2013, 07:06 PM
I solved this by changing the data structure to something easier to manage.
Tags
Chart
Asked by
Mark
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Mark
Top achievements
Rank 1
Share this question
or