PHP Line Chart: Issues with Series and Grouping.

[Mark]

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
}
]

[T. Tsonev]

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

[Mark]

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"
}
]

[Mark]

I solved this by changing the data structure to something easier to manage.