I have bar chart with grouping dynamic data.
I'm getting data from database with no problem I put my data screenshot below
When i want to bind data on chart i'm grouping data I have data in [Jan,Feb,April]
But chart just shows April on x-axis??? Its grouping wrong and put data wrong place
Here my js code
var stocksDataSource = new kendo.data.DataSource({
data: myDearData,
group: {
field: "MshStok"
},
sort: {
field: "TotalPurchase",
dir: "desc"
}
});
$("#yearly-stock-prices").kendoChart({
dataSource: stocksDataSource,
theme: "flat",
autoBind: false,
seriesDefaults: {
type: "area",
overlay: {
gradient: "none"
},
markers: {
visible: false
},
majorTickSize: 0,
opacity: .8
},
series: [{
field: "TotalPurchase"
}],
valueAxis: {
line: {
visible: true
},
labels: {
template: "#= ChangeFormatMoney(value) #",
skip: 2,
step: 2,
color: "#727f8e"
}
},
categoryAxis: {
field: "Months",
labels: {
format: "MMM",
color: "#727f8e"
},
line: {
visible: true
},
majorTicks: {
visible: false
},
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name # - #= ChangeFormatMoney(value) #"
},
legend: {
visible: true
}
});
Do you have any idea for this?
Thanks
See final entry here: http://www.telerik.com/forums/strange-behaviour-in-category-assignment-grouping-for-charts-bug
Try defining your category field in the series object (series.categoryAxis) instead of the categoryAxis (categoryAcis.field):
series: [{
field: "TotalPurchase",
categoryField: "Months"
}],
DEMO
when I use more then five letters in my name it comes out of the chart see the image i uploaded i am using extjs 6 I just want to have a large name on my chart
{
xtype: 'polar',
split: true,
flex: 0.3,
colors: [
'#347327',
'#2897d2',
'#de6110',
],
bind: {
store: '{pie}'
},
series: [{
type: 'pie',
showInLegend: true,
donut: false,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data'));
}
},
highlight: {
segment: {
margin: 15
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '12px Arial'
},
xField: 'data'
}],
interactions: [{
type: 'rotate'
}]
}
here is My dynamically given names i want that names in side of my pie chart i mean above on the chart But when i use name that contain more then 5 letters it goes out side of the chart i will upload a image.
var pieStore = this.getViewModel().getStore('pie');
var rec = selected[0];
if (rec.get('new')) {
pieStore.add({
'name': 'NEW',
data: rec.get('new'),
total: rec.get('total')
});
}
if (rec.get('openToQc')) {
pieStore.add({
'name': 'QC',
data: rec.get('openToQc'),
total: rec.get('total')
});
}
if (rec.get('open')) {
pieStore.add({
'name': 'Open',
data: rec.get('open'),
total: rec.get('total')
});
}
if (rec.get('rejected')) {
pieStore.add({
'name': 'Rejected',
data: rec.get('rejected'),
total: rec.get('total')
});
}
The problem is on your series label:
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '12px Arial'
},
display: 'rotate', displays the label inside the chart in some cases and outside in others, you should use instead display: 'inside',
You can see a working example here
I am creating a chart and have so far found that a scatter and errorbar combination chart is the best fit. I have hit a problem when adding an extra pair of series that because I have used a scatter, that they are placed on top of each other.
This is the standard view for the chart which is correct:
This is what I WANT to happen when I add an extra pair of series data:
But this is what happens:
var chart;
$(function () {
$('#container').highcharts({
title: {
text: 'Chart'
},
tooltip: {
enabled: false
},
xAxis: [{
categories: ['Col1', 'Col2', 'Col3']
}],
yAxis: [{ // Primary yAxis
title: {
text: 'Chart'
}, opposite: true
}
, { // Secondary yAxis
title: {
text: 'Score'
}
}],
plotOptions: {
scatter: {
dataLabels: {
enabled: true,
x: 0,
y: 10
},
enableMouseTracking: false
},
errorbar: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Value',
type: 'scatter',
yAxis: 1,
data: [1001.418, 1000.006, 1005.237],
dataLabels: {
backgroundColor: Highcharts.getOptions().colors[0],
padding: 3,
color: '#ffffff',
style: {
"textShadow": "none",
"lineHeight": "13px"
},
useHTML:true
},
marker: {
symbol: "square"
},
}, {
type: 'errorbar',
whiskerColor: '#555',
stemColor: '#555',
yAxis: 1,
data: [[1000.46, 1002.376], [999.071, 1000.941], [1002.753, 1007.721]]
},
//START extra data
{
name: 'Compare',
type: 'scatter',
yAxis: 1,
data: [1001.918, 1000.506, 1005.737],
dataLabels: {
backgroundColor: Highcharts.getOptions().colors[1],
padding: 3,
style: {
"textShadow": "none",
"lineHeight": "13px"
},
useHTML:true
},
marker: {
symbol: "square"
},
}, {
type: 'errorbar',
whiskerColor: '#555',
stemColor: '#555',
yAxis: 1,
data: [[1001.46, 1003.376], [1000.071, 1001.941], [1003.753, 1006.721]]
},
//END extra data
{
//force the ErrorBar icon into the legend
name: 'ErrorBar',
type: 'scatter',
marker: {
symbol: "url(data:image/gif;base64,R0lGODlhDwAMAIAAAFVVVf///yH5BAEHAAEALAAAAAAPAAwAAAIXhI8ZywEN4Yt0UnmjzWtzn4GXWFXJeRQAOw==)"
},
data:[null]
}
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
http://jsfiddle.net/ewurrLgk/
I have taken a look through the API and I have tried to use other chart types like Line and Column and although they do align correctly, the error bar pretty much disappears because those chart types start from zero. I've also tried pointPlacement but that just moves them both into the middle. Is what I am trying to do just not possible using a scatter?
You should use pointPlacement, but set per particular series. I prepared a minified demo for you:
series: [{
type: 'scatter',
pointPlacement:-0.2,
data: [51,73]
},{
type: 'scatter',
pointPlacement:0.2,
data: [8,7.6]
},{
type: 'errorbar',
pointPlacement:-0.2,
data: [[48, 51], [68, 73]]
}, {
type: 'errorbar',
pointPlacement:0.2,
data: [[6, 8], [5.9, 7.6]]
}]
http://jsfiddle.net/6e749xx9/1/
Using this example below, the x-axis series are not starting from the same x value. The x-axis will restart at 0 half way through.
function createChart() {
$("#chart").kendoChart({
title: {
text: "Path"
},
categoryAxis: {
labels: {
step: 10,
format: "####"
},
},
valueAxis: {
reverse: true,
},
series: [{
type: "line",
field: "y",
categoryField: "x",
name: "Path1",
style: "smooth",
data: stats,
markers: {
visible: false
}
}, {
type: "line",
field: "y",
categoryField: "x",
name: "Path2",
style: "smooth",
data: stats2,
markers: {
visible: false
}
}],
});
}
http://jsfiddle.net/1sgt4810/30/
Here is the solution:
Rather than using type line, I should have used scatterLine based on the following example http://docs.telerik.com/kendo-ui/dataviz/chart/overview#multiple-xy-axes
seriesDefaults: {
type: "scatterLine"
},
http://jsfiddle.net/3yhbyy2g/1/
Using KendoUI I need to replace an exiting DotNet Charting line graph with KendoUI. Is there a way to reduce the number of vertical lines in the KendoUI line graph?
The following is an Image of the chart I'm replacing and my KendoUi chart:
This is my Kendo UI script:
jQuery('#divChart').kendoChart({
title: {
text: "Overall Score out of 100",
align: "left", font: "18px Arial, Verdana, sans-serif"
},
seriesDefaults: { type: "line" },
legend: { position: "bottom" },
tooltip: { visible: true, format: "{0}%" },
valueAxis:
{
min: 70,
max: 95,
plotBands:
[
{ from: 70, to: 75, color: "#EDF5FF" },
{ from: 80, to: 85, color: "#EDF5FF" },
{ from: 90, to: 95, color: "#EDF5FF" }
]
},
series:
[
{
name: "Some Product",
color:"004990",
tooltip:
{
visible: true,
template: "<b>Some Product</b><br/>Current Score: #= value # "
},
data: [88.27,89.03,89.37,89.65,90.79,90.62,89.67,89.8,89.84,88.99,88.84,88.99,88.15,88.04,87.34,86.95,86.88,86.84,87.07,86.85,86.91,87.31,87.65,87.77,88.21,88.12,88.15,88.62,88.4,88.02,87.9,88.26,88.22,88.2,88.06,88,88.47,88.43,89.09,89.01,88.74,88.98,88.91,89.19,89.61,89.8,89.99,89.48,88.91,88.57,88.74,88.84,89.41,89.46,89.81,89.74,89.75,89.77,89.29,89.52,89.34]
},
{
name: "Some Market Segment",
color:"da7633",
tooltip:
{
visible: true,
template: "<b>Some Market Segment</b><br/>Current Score: #= value # "
},
data: [79.47,79.52,79.34,79.91,80.1,79.2,79.01,78.97,78.95,78.83,78.81,78.01,77.63,77.66,76.53,74.87,75.22,75.74,75.12,74.73,74.89,74.78,74.92,74.95,74.67,74.57,75.15,75.32,75.01,74.2,73.82,73.78,72.77,72.76,71.8,71.81,72.13,72.46,72.24,72.46,72.49,72.98,73.34,74.01,74.13,74.3,74.4,74.25,73.81,73.52,73.59,73.49,73.41,73.51,73.72,73.27,74.23,73.99,73.97,73.83,73.79] } ],
categoryAxis:
{
labels: { rotation: -45 },
categories: [,,,,,,,,,,2008,,,,,,,,,,,,2009,,,,,,,,,,,,2010,,,,,,,,,,,,2011,,,,,,,,,,,,2012,,]
}
});
Any help would be greatly appreciated.
Reducing the number of major grid lines is not possible in the current version.
The axes support skip and step options, but only for the labels:
categoryAxis: {
labels: {
step: 2 // Render every second label
}
}
We plan to extend this functionality to the major grid lines and ticks soon.
In addition, a true Date axis is also in the works. It will support common scenarios, such as this out of the box.
Try something like this:
majorGridLines: {
visible: false
}
inside your categoryAxis block.