How can I explode pie chart in Kendo DataViz,
my data is coming from database, and my code is like this:
dataSource: {
data: StageData
},
title: {
align: "center",
text: "Clients by Stage",
font: "14px Open Sans",
color: "#3cb2e1"
},
legend: {
visible: false
},
series: [{
type: "pie",
field: "CountClients",
aggregate: "sum",
categoryField: "StageId",
explodeField: function(){
if(categoryField=="Advocate"){
$(this).explode = true;
}
},
overlay: {
gradient: "none"
}
Here I am trying to explode pie when categoryField is "Advocate", But this is not working.
Could anyone suggest me how can I achieve this.
Thanks
I would probably iterate through the StageData, and set an explode value for each object.
$.each(StageData, function(i, s) {
if(s.StageId === 'Advocate') {
s.explode = true;
}
else {
s.explode = false;
}
});
Sample... http://jsbin.com/hiqaj/1/edit
Related
is there a way to reduce the width of x-axis (see picture) in c3? Even if I tried to set "stroke-width" attribute to the "<"path">" tag with different values - it didn't make any visual changes. Thank you for your advices in advance.
Picture
var chart = c3.generate({
bindto: '#' + chartId,
data: {
columns: columns,
type: 'bar',
labels: true
},
interaction: {
enabled: false
},
tooltip: {
show: false
},
color: {
pattern: colorPattern
},
bar: {
width: { ratio: 0.7 },
space: 0.25
},
size: settings.ChartSizes.BarChart,
legend: {
position: 'right',
grouped: true,
item: {
onclick: function (d) {
counter++;
if (counter === 1) {
chart.hide();
chart.show(d);
} else {
chart.show();
counter = 0;
}
}
}
},
axis: {
x: {
type: 'category',
categories: categories,
show: showAxe
},
y: {
show: false
}
}
});
This is a common issue, caused by you not picking up the c3.css file - see https://github.com/c3js/c3/issues/1962
If you can fix that, the problem goes away
Is there any way I can show a portion of the kendo label text in a different color?
Kindly find the chart implementation here http://jsfiddle.net/52c3K/16/
$("#chart").kendoChart({
legend: {
visible: false
},
dataSource: {
data: data
} ,
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
name: "AA",
field: "AA",
color: "#32CD32",
}, {
name: "BB",
field: "BB",
color: "#0000FF",
labels:{
visible: true,
template: "#: dataItem.AA # (#: dataItem.BB #)"
}
}],
valueAxis: {
max: 180,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto",
visible: true
}
},
categoryAxis: {
field: "Category",
majorGridLines: {
visible: false
}
},
chartArea: {
width: 500,
height: 255
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
the highlighted portion of the label in red and bold.
Your help is very much appreciated
This is a bit hard since we can't just use the template, I tried to play with visual and done some tweaking here and there. There result aren't perfect but please check it here on jsFiddle
I will try to explain what i have done there
i use the labels.visual configuration
e.text basically contains your label string, but i did some looping on dataSource for full data (but there is weakness in this since there may duplicate text on e.text)
make use of new kendo.drawing.Group(); specifically the drawDOM function + kendo template
make use of new kendo.drawing.Layout() to append the drawed DOM on the correct place , i followed this some of the tips here
And do take note in your fiddle the kendo version is 2013, well i used the 2018.1.221
How to draw a vertical line in a line chart using Html5 and kendo UI ? can anyone help me out to solve this problem ?
Try this:
// let chart be the id
$("#chart").kendoChart({
categoryAxis: {
notes: {
line: {
length: 300
},
data: [{
value: new Date(2012, 0, 3),
label: {
text: "-" //text you want to show
}
}]
}
}
});
Demo: http://jsbin.com/obuweca/26
/* WITHOUT CIRCLE */
$("#chart").kendoChart({
categoryAxis: {
notes: {
line: {
length: 300
},
icon: {
border: {
width: 0
}
},
// Initial notes
data: [{
value: new Date(2012, 0, 3)
}]
}
}
});
DEMO: http://jsbin.com/obuweca/29/
In kendo documentation is example how do draw custom lines on chart. Horizontal and vertical.
http://docs.telerik.com/kendo-ui/controls/charts/how-to/custom-plot-bands
You can customize lines by editing stroke:
stroke: {
color: "red",
width: 1,
dashType:"dash"
}
You can also try to use the column-Chart.
Just extend the series:
series: [{
type: "line",
field: "value",
categoryField: "date"
},
{
type:"column",
field: "valueColumn",
gap: 300
}]
and the dataSource.data with a new field like: valueColumn.
See also the Example.
When using a editor grid and my button put a new row at the bottom, validation messages are being hidden by the grid.
I have set up an example here: http://jsfiddle.net/api2304/K54v3/1/
Click on a button Add
Leave the cell Name empty and press tab.
The message will show below the row.
Html:
<div id="grid"></div>
Javascript:
var _dsGrid;
var _grid;
var _this = this;
_this._dsGrid = new kendo.data.DataSource({
autoSync: true,
data: [{ Cod: 0, Name: 'Value0' },
{ Cod: 1, Name: 'Value1' }],
schema: {
model: {
fields: {
Cod: { editable: false },
Name: {
validation: {
required: true,
required: { message: "Custom message" }
}
}
}
}
}
});
_this._grid = $("#grid").kendoGrid({
columns: [
{ field: "Cod" },
{ field: "Name" }
],
selectable: true,
dataSource: _this._dsGrid,
editable: true,
toolbar: [
{ template: kendo.template("<a id='btnAdicionar' class='k-button k-button-icontext'><span class='k-icon k-add'></span>Adicionar</a>") }
],
edit: function(e) {
e.container.find("input[name='Nome']").attr('maxlength', '20');
e.container.find("input").bind("blur", function() {
$("#grid").scrollTop($("#grid")[0].scrollHeight + 200);
});
}
}).
data("kendoGrid");
$("#btnAdicionar").click(function () {
var total = _this._dsGrid.data().length;
var insert = _this._dsGrid.insert(total, {});
_this._dsGrid.page(_this._dsGrid.totalPages());
var ultimoId = _this._dsGrid.data()[total - 1].Nivel;
_this._grid.editRow(_this._grid.tbody.children().last());
});
I found the solution here: http://www.telerik.com/forums/hidden-validators-when-virtual-scrolling-createat-bottom
Put this css on the page:
#grid .k-tooltip-validation {
margin-top: 0 !important;
display: block;
position: static;
padding: 0;
}
#grid .k-callout {
display: none;
}
I am using highcharts in my MVC3 application and I am trying to refresh once the data is modified but the chart doesnot refresh.
I am drawing the chart as follows:-
function initializeChart() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'funnel'
},
title: {
text: 'Deal Funnel Stats',
x: -50
},
legend: {
enabled: false
},
exporting: {
buttons: {
exportButton: {
enabled:false
},
printButton: {
enabled:false
}
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
color: 'black',
softConnector: true
},
neckWidth: '0%',
neckHeight: '0%'
//-- Other available options
// height: pixels or percent
// width: pixels or percent
}
},
series: [{
data: #Html.Raw(Model.seriesData)
}]
});
}
Model.seriesData is coming from the the class.
Once the data is refreshed i want to reinitialize the chart with new data but it is again drawing the same chart.
Update:
The data I am having first time is:
The data I am having second time is:
Please help.
Thanks.