Telerik Forums
Kendo UI for jQuery Forum
1 answer
9 views

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.

 

 

Neli
Telerik team
 answered on 12 Mar 2024
0 answers
9 views

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

 

 

 

j
Top achievements
Rank 1
 asked on 27 Feb 2024
1 answer
15 views

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!

Neli
Telerik team
 answered on 12 Feb 2024
0 answers
20 views

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

Joel
Top achievements
Rank 1
 updated question on 05 Feb 2024
0 answers
13 views

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

 

 

Jerry
Top achievements
Rank 1
Iron
Iron
Iron
 asked on 12 Dec 2023
0 answers
37 views

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 .

Hrushi
Top achievements
Rank 1
 asked on 28 Oct 2023
0 answers
31 views

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

kha
Top achievements
Rank 1
Iron
 asked on 22 Oct 2023
1 answer
38 views

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?
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 19 Oct 2023
1 answer
28 views

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? :(

Neli
Telerik team
 answered on 17 Oct 2023
9 answers
62 views

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!

 

 

 

 

Eli
Top achievements
Rank 2
Iron
Iron
Iron
 answered on 30 Sep 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?