Hello Telerik Community,
I'm encountering an issue with my Kendo Chart implementation where certain data points are not displaying on the line series, despite being present in the dataset. Here's a breakdown of the problem and my current setup:
- Some data points, specifically those corresponding to the dates November 26 and November 28/29, are not showing up on the line chart.
- However, these dates are appearing correctly in the category legend.
- I'm using Kendo Chart to visualize historical pool data.
- Data is fetched from a database and processed in the controller before being passed to the Razor view for rendering.
- Each manufacturer's data is plotted on the chart as separate line series, with the x-axis representing dates and the y-axis representing weight.
- Controller Code: I've provided the relevant controller code responsible for fetching and processing the data.
- Razor View Code: Similarly, I've included the Razor view code where the Kendo Chart is defined and configured.
- I expect the line chart to display all data points, including those for November 27 and November 29, for each manufacturer.
- I've checked the data in the controller, and it seems that all data points are correctly fetched from the database.
- I've inspected the generated HTML for the chart and confirmed that the missing data points are indeed not being rendered.
- Could you please review my setup and help me identify any potential issues causing the missing data points?
- Additionally, if you have any suggestions for troubleshooting or debugging this issue further, I would greatly appreciate it.
- Framework: ASP.NET MVC- Browser: Chrome, Edge
Thank you in advance for your assistance!
public ActionResult ChartTMS(DateTime? fromDate, DateTime? toDate, string unit = "gm")
{
fromDate = fromDate?.Date;
toDate = toDate.HasValue ? toDate.Value.Date.AddDays(1).AddTicks(-1) : DateTime.Today;
if (!fromDate.HasValue || !toDate.HasValue)
{
fromDate = DateTime.Today.AddDays(-6);
toDate = DateTime.Today;
}
var allMeasurements = (
from m in db.Target_Measurement_History.AsNoTracking()
where m.Measurement_Record_Date >= fromDate.Value && m.Measurement_Record_Date <= toDate.Value
&& m.Target_Lot_Profile != null
&& m.Target_Lot_Profile.Target_Item != null
&& m.Target_Lot_Profile.Target_Item.Target_Manufacturer != null
select new MeasurementDataViewModel
{
Measurement_Record_Date = m.Measurement_Record_Date,
Pt_Remaining_Gms = m.Pt_Remaining_Gms,
Ru_Remaining_Gms = m.Ru_Remaining_Gms,
Manufacturer = m.Target_Lot_Profile.Target_Item.Target_Manufacturer,
}).ToList();
var manufacturers = allMeasurements.Select(m => m.Manufacturer).Distinct();
var colorMap = new Dictionary<string, string>();
Random rand = new Random();
foreach (var manufacturer in manufacturers)
{
colorMap[manufacturer] = $"#{rand.Next(0x1000000):X6}";
}
var groupedData = allMeasurements
.GroupBy(m => new { m.Measurement_Record_Date.Date, m.Manufacturer })
.Select(group => new MeasurementDataViewModel
{
Measurement_Record_Date = group.Key.Date,
Pt_Remaining_Gms = group.Sum(item => item.Pt_Remaining_Gms),
Ru_Remaining_Gms = group.Sum(item => item.Ru_Remaining_Gms),
Manufacturer = group.Key.Manufacturer,
Color = colorMap[group.Key.Manufacturer]
})
.OrderBy(g => g.Measurement_Record_Date)
.ThenBy(g => g.Manufacturer)
.ToList();
const float gramsPerTroyOunce = 31.1035f;
if (unit == "t oz")
{
foreach (var item in groupedData)
{
if (item.Pt_Remaining_Gms.HasValue)
item.Pt_Remaining_Gms = item.Pt_Remaining_Gms.Value / gramsPerTroyOunce;
if (item.Ru_Remaining_Gms.HasValue)
item.Ru_Remaining_Gms = item.Ru_Remaining_Gms.Value / gramsPerTroyOunce;
}
}
ViewBag.fromDate = fromDate;
ViewBag.toDate = toDate;
ViewBag.Unit = unit;
return View(groupedData);
}
public class MeasurementDataViewModel
{
public DateTime Measurement_Record_Date { get; set; }
public float? Pt_Remaining_Gms { get; set; }
public float? Ru_Remaining_Gms { get; set; }
public string Manufacturer { get; set; }
public string Color { get; set; }
}
[
{
"Measurement_Record_Date": "/Date(1542823200000)/",
"Pt_Remaining_Gms": 4370,
"Ru_Remaining_Gms": 5621,
"Manufacturer": "JX Nippon"
},
{
"Measurement_Record_Date": "/Date(1542823200000)/",
"Pt_Remaining_Gms": 4571,
"Ru_Remaining_Gms": 4295,
"Manufacturer": "Kojundo/Mitsui"
},
{
"Measurement_Record_Date": "/Date(1543168800000)/",
"Pt_Remaining_Gms": 1785,
"Ru_Remaining_Gms": 7086,
"Manufacturer": "JX Nippon"
},
{
"Measurement_Record_Date": "/Date(1543255200000)/",
"Pt_Remaining_Gms": 36432,
"Ru_Remaining_Gms": 41800,
"Manufacturer": "Kurt J. Lesker"
},
{
"Measurement_Record_Date": "/Date(1543428000000)/",
"Pt_Remaining_Gms": 76360,
"Ru_Remaining_Gms": 74687,
"Manufacturer": "Kurt J. Lesker"
},
{
"Measurement_Record_Date": "/Date(1543428000000)/",
"Pt_Remaining_Gms": 11138,
"Ru_Remaining_Gms": 9686,
"Manufacturer": "Materion"
},
{
"Measurement_Record_Date": "/Date(1543428000000)/",
"Pt_Remaining_Gms": 1329,
"Ru_Remaining_Gms": 4796,
"Manufacturer": "Mitsubishi"
}
]
@using Kendo.Mvc.UI
@using System.Web.Mvc
@using System.Web.Mvc.Html
@using Kendo.Mvc.Extensions
@model IEnumerable<TMS_RND.Controllers.MeasurementDataViewModel>
@using System.Web.Helpers
@{
ViewBag.Title = "Chart";
Layout = "~/Views/Shared/_Layout.cshtml";
DateTime startDate = ViewBag.fromDate ?? DateTime.Today.AddDays(-6);
DateTime endDate = ViewBag.toDate ?? DateTime.Today;
string currentUnit = ViewBag.Unit ?? "gm";
var manufacturers = Model
.GroupBy(m => m.Manufacturer)
.Select(g => new
{
Manufacturer = g.Key,
Color = g.First().Color
})
.ToList();
}
<div class="demo-section wide">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
From: @(Html.Kendo().DatePicker().Name("fromDate").Value(startDate.ToString("yyyy-MM-dd")))
To: @(Html.Kendo().DatePicker().Name("toDate").Value(endDate.ToString("yyyy-MM-dd")))
<button id="refreshChart">Refresh Chart</button>
<button id="clearFilter">Clear</button>
<button id="toggleUnit">@(currentUnit == "gm" ? "Switch to Troy oz" : "Switch to gm")</button>
</div>
<div>
<button class="tab" id="totalPoolTab">Total Pool</button>
<button class="tab" id="tmsTab" style="background-color: lightblue;">TMS</button>
</div>
<div>
@foreach (var manufacturer in manufacturers)
{
<span style="color:@manufacturer.Color">@manufacturer.Manufacturer</span>
}
</div>
</div>
<div id="chartContainer">
@(Html.Kendo().Chart(Model)
.Name("chart")
.Title("Historical Pool Data")
.HtmlAttributes(new { style = "height: 400px;" })
.Legend(legend => legend.Position(ChartLegendPosition.Bottom))
.SeriesDefaults(seriesDefaults => seriesDefaults.Line().Stack(false))
.Series(series => {
foreach (var manufacturer in manufacturers)
{
var manufacturerData = Model.Where(m => m.Manufacturer == manufacturer.Manufacturer).ToList();
series.Line(manufacturerData.Select(m => m.Pt_Remaining_Gms))
.Name("Pt - " + manufacturer.Manufacturer)
.Color(manufacturer.Color)
.Visible(true)
.Labels(labels => labels.Visible(true).Format("{0:N2} " + currentUnit));
series.Line(manufacturerData.Select(m => m.Ru_Remaining_Gms))
.Name("Ru - " + manufacturer.Manufacturer)
.Color(manufacturer.Color)
.Visible(false)
.Labels(labels => labels.Visible(true).Format("{0:N2} " + currentUnit));
}
})
.CategoryAxis(axis => axis.Categories(Model.Select(m => m.Measurement_Record_Date.ToString("dd MMM yyyy")).Distinct()))
.ValueAxis(axis => axis.Numeric()
.Line(line => line.Visible(false))
.Title("Weight (" + currentUnit + ")"))
.Tooltip(tooltip => tooltip.Visible(true).Format("{0:N2} " + currentUnit))
)
</div>
</div>
<script>
$(document).ready(function () {
function toISOStringWithMidday(date) {
var localDate = new Date(date);
localDate.setHours(12, 0, 0, 0);
var offset = localDate.getTimezoneOffset() * 60000;
var localMidday = new Date(localDate.getTime() - offset);
return localMidday.toISOString();
}
$("#refreshChart").click(function () {
refreshChart();
});
$("#toggleUnit").click(function () {
var newUnit = '@currentUnit' == 'gm' ? 't oz' : 'gm';
refreshChart(newUnit);
});
$("#clearFilter").click(function () {
window.location.href = '@Url.Action("ChartTMS", "Target_Measurement_History")';
});
function refreshChart(newUnit) {
var selectedFromDate = $("#fromDate").data("kendoDatePicker").value();
var selectedToDate = $("#toDate").data("kendoDatePicker").value();
var unitParam = newUnit || '@currentUnit';
if (selectedFromDate && selectedToDate) {
var difference = Math.abs(selectedToDate.getTime() - selectedFromDate.getTime());
if (difference > 7 * 24 * 60 * 60 * 1000) {
alert("Please select a date range within 7 days.");
return;
}
var fromDateStr = toISOStringWithMidday(selectedFromDate);
var toDateStr = toISOStringWithMidday(selectedToDate);
window.location.href = '@Url.Action("ChartTMS", "Target_Measurement_History")' + '?fromDate=' + fromDateStr + '&toDate=' + toDateStr + '&unit=' + unitParam;
} else {
alert("Please select both from and to dates.");
}
}
$("#totalPoolTab").click(function() {
window.location.href = '@Url.Action("Chart", "Target_Measurement_History")';
});
$("#tmsTab").click(function() {
window.location.href = '@Url.Action("ChartTMS", "Target_Measurement_History")';
});
$("#tmsTab").css("background-color", "lightblue");
$(".tab").click(function() {
$(".tab").css("background-color", "");
$(this).css("background-color", "lightblue");
});
});
</script>
What I want to achieve is changing the colour of a group on a series based on its category. I have an example below.
So if "Group 1" had a sub group value of "B" the colour is set based on that combination. And that colour might be different to "Group 2" + "B".
Does anyone have any idea on how to create a chart with Axis like this with the Kendu UI for JQuery?
Specifically I'm trying to recreate the Y Axis.
Hi. I have a single JSON Array like this:
[{
"country": "Spain",
"year": "2008",
"unit": "GWh",
"solar": 2578,
"hydro": 26112,
"wind": 32203,
"nuclear": 58973
}];
And, What I want to do is make this single array into a chart. (I hope the name of the series is the same as the axis text.)
Like this.
but, If I write code like this... All series are included in one category. How can I solve this?
var tempData = [{
"country": "Spain",
"year": "2008",
"unit": "GWh",
"solar": 2578,
"hydro": 26112,
"wind": 32203,
"nuclear": 58973
}];
$("#chart").kendoChart({
dataSource: {
data : tempData
},
series:
[{
field: "nuclear",
name: "Nuclear"
}, {
field: "hydro",
name: "Hydro"
}, {
field: "wind",
name: "Wind"
}],
categoryAxis: {
categories: ["Nuclear", "Hydro", "Wind"]
}
});
Hi,
Are there any new properties that have been added in version 2022.3.913 where we can defined the width/height of the labels within the axis.
If the labels are set for 20% and the text is longer than the space defined then it will add ellipses for that section.
Similar to the image below.
Thanks!
Hello , i have an issue with converting the milliseconds to human readable date,
I cannot find the solution for vue, but I have found multiple solutions for jquery.
What am i doing wrong ?
I noticed in the jquery example, the have this : labels: {
template: "#= kendo.toString(new Date(value), 'HH:mm') #"
}
i have tried adding this code :
it does not work, any suggestions would be greatly appreciated. Thank you
I have a line chart and an area chart.
I would like the area chart to be shown inside of the line chart.
How can I control the area chart's height or top margin? To keep it inside the line chart?
Here is what my chart looks like. I would like to keep the green area inside of the red. Is this possible?
https://dojo.telerik.com/@jerry/owIdiWes
So I have data in this format
{
name: health
data:[[1,2],[2,2],[3,4]]
type:"area"
visible:true
},
{
name: health2
data:[[1,2],[2,2],[3,4]]
type:"line"
visible:true
}
I have attached a screenshot of what i want to achieve need guidance to do this I'm new to kendo .
i have controller using java as @RequestMapping("/charts") and it return in Json format but my question this data is not reflected in my Grid why.
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: function(options)
{ return "${pageContext.request.contextPath}/charts";
},
dataType: "json",
type: "GET"
}
},
schema:{
model: {
fields: {
id: { type: "number" },
fullName : { type: "string" },
address: { type: "string" },
email : { type: "string" },
password: { type: "string" },
designation: { type: "string" },
salary: { type: "number" }
}
}
},
aggregate: [ { field: "fullName", aggregate: "count" },
{ field: "salary", aggregate: "sum" }
]
,pageSize: 8 },
sortable: true,
scrollable: false,
pageSize: 5,
pageSizes: true,
hieght:20,
pageable: {
pageSizes: [4, 6,10,"all"],
buttonCount: 5
},
columns: [
{ field: "id", title: "ID", width: 180 },
{ field: "fullName", title: "Name",width:300,
template: "<div style=color:red>#=fullName#</div>" ,footerTemplate: "Total Count: #=count#" },
{ field: "address", title: "Address",width:300 },
{ field: "email", title: "Email",width:200},
{ field: "password", title: "Password" ,width:200},
{ field: "designation", title: "Designation" ,width:300},
{ field: "salary", title: "Salary" ,width:200,footerTemplate: "Total Sum: #=sum#"},
{ width:200,
template: "<a class='k-button' href='/Home/Index'>Redirect</a>" }
]
});
Hi
I've implemented a bar chart to show the amount a customer has bought in USD but on the Y axis the 0 is showing with three decimals.
Understandable since I've added "n3" to the format property but how to remove the trailling zeros from it?
$("#chart_year").kendoChart({ title: { text: '"Year To Date Purchases' }, seriesDefaults: { type: "column", }, series: [ { //Dummy Data before getting real data data: [122.142, 222.672], color: "rgb(0,125,195)", name: "Total", }, ], legend: { labels: { font: "Jost", } }, valueAxis: { labels: { culture: "en-US", format: "${0:n3}", font: "Jost" }, axisCrossingValue: 0 }, categoryAxis: { categories: previousYearsArray.reverse(), labels: { padding: {top: 5}, font: "Jost" }, majorGridLines: { visible: true } }, tooltip: { visible: true, format: "{0}", template: "#= series.name #: $#= value #" } });