Questions on Kendo UI for jQuery Forum

1 answer

7 views

Issue with Missing Data Points in Kendo Chart Line Series

Description

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:

Problem

- 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.

Setup

- 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.

Relevant Code

- 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.

Expected Outcome

- I expect the line chart to display all data points, including those for November 27 and November 29, for each manufacturer.

Steps Taken

- 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.

Request for Assistance

- 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.

Additional Information

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

Charts

answered on 01 May 2024

0 answers

7 views

Does Kendo support setting colour per category+group on a stacked series chart?

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".

Charts

General Discussions

asked on 08 Apr 2024

1 answer

23 views

Chart Customization

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.

Charts

answered on 12 Mar 2024

0 answers

17 views

Kendo Chart Axis Label (categoryAxis)

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

Charts

asked on 27 Feb 2024

1 answer

21 views

Possibility to set a fixed width space for the axis data labels

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!

Charts

answered on 12 Feb 2024

0 answers

31 views

Vue Chart RangeBar

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 ?

Chart.m-4.p-5( @seriesclick="onSeriesClick" :style="{ height: getChartHeight() }" )
  ChartTooltip(:render="'tooltipRender'" background="#fff" color="#000")
    template(v-slot:tooltipRender="{ props }")
      .d-flex.align-items-center.flex-column.tooltip-content
        h6.font-weight-bold.text-center.tooltip-category-title {{ props.point.category }}
        .d-flex.align-items-center
          span {{ $t('home.rangeBarChart.date.start') }} : 
          span.font-weight-bold.ml-1 {{ labelContentFrom(props.point)}} 
        .d-flex.align-items-center
          span {{ $t('home.rangeBarChart.date.end') }} : 
          span.font-weight-bold.ml-1 {{ labelContentTo(props.point)}} 
  ChartTitle( v-if="chartTitle && chartTitle !== ''"  :text="$t('home.rangeBarChart.'+ chartTitle + '.title' )"  align='left' color='#475467' :font="'600 16px Inter'")
  ChartSeries
    ChartSeriesItem(:type="'rangeBar'", :data-items="myDataItemsComputed"  :category-field="'phase'" :font="'600 14px Inter '" :color="barItemColor"  :baseUnit="'months'" )
      ChartSeriesLabels
        ChartSeriesLabelsFrom(:content="labelContentFrom")
        ChartSeriesLabelsTo(:content="labelContentTo")
  ChartValueAxis
    ChartValueAxisItem(
    :major-grid-lines='{visible: false }'
    :valueAxis="valueAxisComputed" 
    :fromField="'min'" 
    :toField="'max'"
    :font="'600 14px Inter '"
    )

I noticed in the jquery example, the have this : labels: {
template: "#= kendo.toString(new Date(value), 'HH:mm') #"
}

i have tried adding this code :

labels: {
            template: `<div>{{ new Date(#= value #).toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' }) }}</div>`
          }

it does not work, any suggestions would be greatly appreciated. Thank you

Charts

updated question on 05 Feb 2024

0 answers

18 views

How to control height or top margin of a chart

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

Charts

asked on 12 Dec 2023

0 answers

45 views

I want to create a multiple charts in one chart with data type as array of array

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 .

asked on 28 Oct 2023

0 answers

37 views

Problem in return data from controller using api read

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

Charts

Data Source

Grid

asked on 22 Oct 2023

1 answer

46 views

Remove decimals when at 0 valueAxis number

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 #"
}
   });

And also, whenever the values from the series.data are only between $0 and $1000 the higher values in the valueAxis is $1.200.000 which causes a bit of confusion to the user seeing a million there. It's probably better to create a function and change the format depending on the maximum amount in the series.data but how do I get the series.data into the function as a parameter and create the logic from it?

Charts