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>
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,
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!
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 #" } });
Hi,
I'm dynamically creating doughnuts and when clicking the legend it sets all the other doughnuts to the value of the last dynamically created value. Please see Dojo: https://dojo.telerik.com/AQucizad
i.e Click on Complete on "Demo-1 - chart-1" legend and in the Console it will output the values for chart two instead (if i didn't have the preventDefaults, it would also update Demo-1 as Demo-2 value)
How do i get it to reference the correct data? :(
I am creating a dynamic line chart (see previous https://www.telerik.com/account/support-center/view-ticket/1623605) I am facing another issue with the line chart - in which entries are appending for some apparent reason at the end. Instead of the horizontal (x) axis being a consecutively ordered, the chart itself restarts the axis for the second series of data.
Here is an image of the current issue I am facing.
As you can see above, instead of filling these entries in back at the beginning, the entire horizontal axis restarts from 0.
The only points that work "correctly" are points that exactly match each other in the beginning.
At 4:54:00 both points share that exact "second" in time so the "green" point appears appropriately.
If the point does not "match" exactly, it is added and appended to the very end of the horizontal axis as I showed above.
What is causing this? Why does the horizontal axis restart?
My code is as follows:
<div id="example">
<div class="demo-section wide">
<div id="chart"></div>
</div>
<script>
var testNum = "Test Data for #" + '@Model.testNum';
var datareader = JSON.parse(Model.dynamicDataRetrievedFromCSV);
function createChart() {
$("#chart").kendoChart({
renderAs: "canvas",
title: {
text: testNum
},
legend: {
visible: true
},
seriesDefaults: {
type: "line",
/*stack: true,*/
labels: {
visible: false,
format: "{0}",
background: "transparent"
}
},
valueAxis: {
labels: {
format: "{0}"
},
line: {
visible: false
},
min: 0,
max: 300
},
categoryAxis: {
majorGridLines: {
visible: false
},
min: 0,
max: 10
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
},
pannable: {
},
zoomable: {
mousewheel: {
rate: 0.1
},
selection: {
}
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
$(document).ready(function () {
let chart = $("#chart").data("kendoChart");
var dataParsed = datareader;
let ds = new kendo.data.DataSource({
data: dataParsed,
group: "label"
});
chart.setOptions({
dataSource: ds,
series: [{
field: "value",
categoryField: "time",
visible: false
}]
});
});
</script>
</div>
Thank you for any help, and thanks for the support you guys have provided over the last couple weeks!
http://dojo.telerik.com/aGisuSuR/2
I am trying to hide and show error bar on a Kendo line chart based on when the mouse is over the line point, is it possible to do this? I tried using highlight, I can probably create a visual, but I just wanted to hide all the error bars and show only when the point is highlighted. I tried to set erroBar visibility false and set it to true on Highlight, that doesn't seem to work. Even if this worked, this would set the visibility of all error bars?, I just want to set it for only one point at a time, as showing all at once is will overlap error bars.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/line-charts/remote-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
<script>
function createChart() {
var StrokeAnimation = kendo.drawing.Animation.extend({
init: function(element) {
kendo.drawing.Animation.fn.init.call(this);
this.initialStroke = $.extend({}, element.options.stroke);
this.color = element.options.fill.color;
this.element = element;
},
step: function(pos) {
this.element.stroke(this.color, this.initialStroke.width * pos * 5, 0.5);
},
reset: function() {
this.element.options.set("stroke", this.initialStroke);
}
});
$("#chart").kendoChart({
dataSource: [
{
"country": "Spain",
"year": "2008",
"unit": "GWh",
"solar": 2578,
"hydro": 26112,
"wind": 32203,
"nuclear": 58973,
"low":51000,
"high":68000
},
{
"country": "Spain",
"year": "2007",
"unit": "GWh",
"solar": 508,
"hydro": 30522,
"wind": 27568,
"nuclear": 55103,
"low":52000,
"high":60000
},
],
title: {
text: "Spain electricity production (GWh)"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "line",
errorLowField: "low",
errorHighField: "high",
errorBars: {
highlight:{
line: {
width: 1,
dashType: "solid"
}
},
visible: true,
endCaps: true,
width: 10,
color: "darkblue",
line: {
width: 1,
dashType: "solid"
}
},
highlight: {
errorBars: {
line: {
width: 1,
dashType: "solid"
}
}
}
},
series: [{
field: "nuclear",
name: "Nuclear"
}, {
field: "hydro",
name: "Hydro"
}, {
field: "wind",
name: "Wind"
}],
categoryAxis: {
field: "year",
labels: {
rotation: -90
},
crosshair: {
visible: false
}
},
valueAxis: {
labels: {
format: "N0"
},
majorUnit: 10000
},
tooltip: {
visible: false,
shared: false,
format: "N0"
},
render: function(e) {
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
Charts is not shown on JSP Page..Empty div is shown.why????
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%@page isELIgnored="false"%>
<!DOCTYPE html>
<html>
<head>
<link href="resources/styles/kendo.default-main.css" rel="stylesheet" type="text/css" />
<link href="resources/styles/kendo.common-min.css" rel="stylesheet" type="text/css" />
<link href="resources/styles/bootstrap-main.css" rel="stylesheet" type="text/css" />
<script src="resources/js/jquery.min.js"></script>
<script src="resources/js/kendo.web.min.js"></script>
<meta charset="ISO-8859-1">
<title>Kando Charts Example</title>
</head>
<body>
<h2>Charts</h2>
<div id="chart">hello</div>
<script>
$("#chart").kendoChart({
title: {
text: "Gross domestic product growth /GDP annual %/"
},
legend: {
position: "top"
},
series: [{
name: "India",
type: "column",
data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
color: "red"
},{
name: "Germany",
type: "column",
data: [1.010, 1.375, 1.161, 1.684, 3.7, 3.269, 1.083, 5.127, 3.690, 2.995],
color: "blue"
},{
name: "World",
type: "line",
data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, 2.245, 4.339, 2.727],
color: "green"
}],
categoryAxis: {
categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011]
},
valueAxis: {
labels: {
format: "{0}%"
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #%"
}
});
</script>
</body>
</html>
series: [
{
type: "pie",
field: "value",
categoryField: "category",
aggregate: "sum",
padding: 10,
overlay: {
gradient: "none",
},
categoryAxis: {
baseUnit: "months",
maxDivisions: 5,
rangeLabels: {
visible: true,
format: "M"
},
labels: {
format: "d-M"
}
},]