Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Kendo Chart - refresh fails if originally initialized to no data. #8088

Open
AndrewShepherd opened this issue Jan 6, 2025 · 0 comments
Open
Labels
FP: Unplanned Sync status with associated Feedback Item

Comments

@AndrewShepherd
Copy link

I have a chart which is first of all initialized to no data. When a long-running ajax call completes, my code then sets the data on the chart.

This has stopped working with version 2024.4.1112.

If a chart has been initialized with no data, calling refresh has no effect, even after it has been given data.

If a chart has been initialized with data, calling refresh still works.

Kendo UI Dojo Demonstration

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-ocean-blue.css">
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
</head>
<body>
  
<div>
   <button id="btnChange">Change</button> 
  <span id="explanation">(Pressing this button sets the data on both charts)</span>
</div>
  
  <div id="chart1"></div>

 <div id="chart2"></div>
  

<script>
  
  const seriesOne = [
    {
          name: "World",
          data: [15.7, 16.7, 20, 23.5, 26.6]
      }, 
    	{
          name: "United States",
          data: [67.96, 68.93, 75, 74, 78]
      }
  ];
  
  const categoriesOne = [2005, 2006, 2007, 2008, 2009];
  
  const seriesTwo = [
    {
          name: "Australia",
          data: [ 26.6, 23.5, 15.7, 16.7, 20 ]
      }, 
    	{
          name: "Canada",
          data: [75, 67.96,  78, 68.93, 74]
      },
    	{
      	  name: "England",
          data: [30.3, 23.2, 87.3, 35.7]
    	}
  ];
  
  const categoriesTwo = [2015, 2016, 2017, 2018, 2019];
  
  $("#chart1").kendoChart({
      title: {
          text: "Originally initialized with no data"
      },
      chartArea: {
        height: 200
      },
      legend: {
          position: "top"
      },
      seriesDefaults: {
          type: "area",
          stack: true
      },
      series: [], // seriesOne,
      valueAxis: {
          labels: {
              format: "{0}%"
          }
      },
      categoryAxis: {
          categories: []
      }
  });
  
   $("#chart2").kendoChart({
      title: {
          text: "Originally initialized with data"
      },
      chartArea: {
        height: 400
      },
      legend: {
          position: "top"
      },
      seriesDefaults: {
          type: "area",
          stack: true
      },
      series: seriesOne,
      valueAxis: {
          labels: {
              format: "{0}%"
          }
      },
      categoryAxis: {
          categories: categoriesOne
      }
  });
  
  $("#btnChange").click(
    () => {
      for(let chartId of ["#chart1", "#chart2"])
      {        
      	const chart = $(chartId).data("kendoChart");
        if (chart) {
         	chart.options.series = seriesTwo;
        	chart.options.categories = categoriesTwo;
      		chart.refresh();
        }
      }
      $("#explanation").text("Have now set the same data on both charts");
    }
   );
  </script>
</body>
</html>
@github-actions github-actions bot added the FP: Unplanned Sync status with associated Feedback Item label Jan 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
FP: Unplanned Sync status with associated Feedback Item
Projects
None yet
Development

No branches or pull requests

1 participant