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

[Solved] Line chart join when drill in

5 Answers 136 Views

Charts

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

Luis asked on 26 Sep 2014, 06:45 PM

chartpng.png

Hello everybody.

I have a kendo chart on MVC which is showing some information with a date axis for a year. The maximum number of points allowed is 365 (one for each day of the year).
The default display setting is set to a "complete year view" with just 12 points (each one for each month of the day). However, I have implemented a drill in custom function where on the series click the chart displays the 31 points related to the clicked month.

However, my chart does not always have the full information so I might not have 365 points to show. Therefore, I am using ChartLineStyle.Smooth, to join the existing points. On the full year view, The points join smoothly just as I want. However, when I drill in the data for the month appears to be isolated from the subsequent points in the series (there is no smooth line connecting to the next point). Is there a way to connect the different data points with a smooth line even though they are not being shown?

I have a attached a couple of files to show you what I currently have vs what I want.

Greetings,
Luis.

5 Answers, 1 is accepted

answered on 30 Sep 2014, 08:00 PM

Sure. My chart is being created with the following code:

@model MyModel

@(Html.Kendo().Chart(Model.ChartSourceData)
.Name("Chart")
.Title(Model.Title)
.DataSource(dataSource => dataSource
.Sort(s => s.Add(fc => fc.Date))
)
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
.Labels(labels => labels
.Template("#= series.name #"))
)
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Line().Style(ChartLineStyle.Smooth)
)
.Series(series =>
{
series.Line(value => value.Value, category => category.Date)
.Name(Model.Legend)
.Aggregate("selectLastPoint");
})
.CategoryAxis(axis => axis
.Labels(labels => labels.Rotation(0).Format("MMM 'yy"))
.Date()
.Min(Model.StartDate).Max(Model.EndDate)
.BaseUnit(ChartAxisBaseUnit.Months)
.Justify(true)
)
.ValueAxis(axis => axis.Numeric().MajorUnit(Model.MajorGridLine)
.Labels(labels => labels.Format("{0:c}"))
.Max(Model.MaxValue).Min(0)
)
.Tooltip(t => t
.Visible(true)
.Format("{0:c}")
.Template("#= kendo.format('{0:C}',value) #")
)
.HtmlAttributes(new { style = "margin: 0 15px 0 15px" })
)

My model has the following structure:

public class MyModel{

public List<ChartSourceData> ChartSourceData { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public double MaxValue { get; set; }
public string Title { get; set; }
public double MajorGridLine { get; set; }
public string Legend  { get; set; }
}

where ChartSourceData is defined as follows:

public ChartSourceData()
{
Day = 1;
}
public decimal Value { get; set; }
public int Month { get; set; }
public int Year { get; set; }
public int Day { get; set; }
public DateTime Date {
get
{
return new DateTime(Year, Month, Day);
}
}
public string Notes { get; set; }

Also the programmability of the chart is the following:

$(document).ready(function () {
modelStartDate = '@Model.StartDate';
modelEndDate = '@Model.EndDate';

chart = $('#Chart').data('kendoChart');
chart.bind('dataBound', onChartDataBound);
chart.bind('seriesClick', onSeriesClick);

chart.refresh();

});

function onChartDataBound() {
var pointCount = chart.dataSource.total();

if (pointCount > 0)
displayChart();
}

function displayChart(){
$('#chartPanel').show(); //div where the chart is
}

function onSeriesClick(e) {
var selectedDate = e.category;
var categoryAxis = getCategoryAxis();
var startDate = getStartDateFromChart();
var endDate = getEndDateFromChart();

var diffDays = Math.floor((Date.parse(endDate) - Date.parse(startDate)) / (1000 * 60 * 60 * 24));

//If current displayed span is less than one month we return to whole year view
if (diffDays <= 31) {
renderYearView(categoryAxis);
}
//If current displayed span is more than one month, go to month view
else {
renderMonthView(categoryAxis, selectedDate);
}
chart.refresh();
}

function renderYearView(categoryAxis) {
categoryAxis.min = modelStartDate;
categoryAxis.max = modelEndDate;
categoryAxis.baseUnit = "months";
categoryAxis.labels.format = "MMM 'yy";
categoryAxis.labels.rotation = 0;
}

function renderMonthView(categoryAxis, selectedDate) {
categoryAxis.min = new Date(selectedDate.getFullYear(), selectedDate.getMonth());
categoryAxis.max = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1);
categoryAxis.baseUnit = "days";
categoryAxis.labels.format = "MM/dd";
categoryAxis.labels.rotation = -90;
}

function getEndDateFromChart() {
var categoryAxis = getCategoryAxis();
return categoryAxis.max;
}

function getStartDateFromChart() {
var categoryAxis = getCategoryAxis();
return categoryAxis.min;
}

function getCategoryAxis() {
var categoryAxis = chart.options.categoryAxis;
return categoryAxis;
}

function selectLastPoint(values) {
return values[values.length - 1];
}

answered on 02 Oct 2014, 02:17 PM

I know the chart only connects the data points on my current axis/data range. That is exactly my question, is it possible to make them join even when they are not in the same axis/data range. Maybe it is not a built in kendo chart function, but maybe it is possible to make it a custom one with some kind of trick (but there is just nothin I can think of).
Is it maybe possible to graph a second series Line below the original one with some virtual (with the help of an interpolating algorithm) but to display these data points not as circles but to completely not show the point marker?
Any ideas?