in my Kendo UI Line Chart the errorLowField and errorHighField doesn't work. Have anybody an idea or a solution for my problem. I try it already
many hours, but i can't find the problem.
Here ist a link to dojo.
<div id="chart"></div>
<script>
var ds = new kendo.data.DataSource({
data: [{"TAG":"06.11.15","C_BM":"G11-N","low":"14.09","high":"25.82","AVG":"19.5"},
{"TAG":"06.11.15","C_BM":"G12-N","low":"12.32","high":"52.96","AVG":"19.54"},
{"TAG":"09.11.15","C_BM":"G11-N","low":"20.69","high":"52.72","AVG":"29.95"},
{"TAG":"09.11.15","C_BM":"G12-N","low":"15.24","high":"69.99","AVG":"29.97"},
{"TAG":"08.11.15","C_BM":"G11-N","low":"21.96","high":"35.19","AVG":"31.11"},
{"TAG":"08.11.15","C_BM":"G12-N","low":"22.39","high":"68.9","AVG":"10.91"}],
group: {
field:"C_BM"
}
});
$("#chart").kendoChart({
dataSource: ds,
seriesDefaults: {
type: "line"
},
series: [{
errorLowField: "low",
errorHighField: "high",
field: "AVG"
}],
categoryAxis: {
field: "TAG",
labels: { rotation: -90}
}
});
</script>
Related
I try to implement flutter chart with high_chart: ^2.0.3 library.
When come to the implement the navigator its not showing on the chart. I enable the navigator but
Chart only show like this.
navigator: {
enabled: true
},
What i looking for get like this.
I add the chart data string like this.
final String _chartData = '''{
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
navigator: {
enabled: true
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2007-2008',
data: [
[Date.UTC(1970, 9, 27), 0 ],
//data
]
}, {
name: 'Winter 2008-2009',
data: [
[Date.UTC(1971, 5, 7), 0 ]//data
]
}, {
name: 'Winter 2009-2010',
data: [
[Date.UTC(1970, 9, 9), 0 ],
//data
]
}],
}''';
Also i add this for the index.html file
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
Full source code Here..
You need to load Highstock only, Highcharts is already included in Highstock:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/series-label.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>
Live demo: http://jsfiddle.net/BlackLabel/hnxvqpyj/
Docs: https://www.highcharts.com/docs/stock/understanding-highcharts-stock
I am new to jsTree. As I am in need to represent the node types also along with node names, I have moved to jsTreeGrid. I am in a need to create nodes, rename, delete, edit the tree nodes as well as edit the node types in the second column of the jsTreeGrid. Somehow I could edit the second column (ie.,type column) but the jsTree just displays the contextmenu but their corresponding functions are not called. Help on this would be very useful. Here is my code:
<div id="container"></div>
<script type="text/javascript">
$(document).ready(function(){
var data;
data = [{
text: "Satellite City",
data: {type: "<b>Project</b>", size: "30",spanclass:"root"},
children: [
{text: "Phase-1", data: {type: "<i>Phase</i>", size: "50",spanclass:"first"}},
{text: "Phase-2", data: {type: "<i>Phase</i>", size: "50",spanclass:"second"}, children:[
{text:"Ruby Towers",data:{type: "<i>Tower</i>",size:"50",spanclass:"third"}}
]}
]
}];
$("div#container").jstree({
plugins: ["themes", "json", "grid", "dnd", "contextmenu", "search"],
core: {
data: data
},
grid: {
columns: [
{width: 300, header: "WBS Tree",title:"_DATA_"},
{width: 100,
cellClass: "col1",
value: "type",
header: "<i>Node Type</i>",
valueClass:"spanclass"
},
],
resizable:true,
contextmenu:true
},
dnd: {
drop_finish : function () {
},
drag_finish : function () {
},
drag_check : function (data) {
return {
after : true,
before : true,
inside : true
};
}
}
});
$("input#search").keyup(function (e) {
var tree = $("div#container").jstree();
tree.search($(this).val());
});
});
</script>
I think your problem might be in the jsTree config. Try adding "check_callback": true to its core.
Or check out working fiddle - JS Fiddle.
Is there a way funnel chart will redraw like pie chart does, when a segment is removed?
Similar to this question redraw pie chart in highchart
http://jsfiddle.net/2Me2z/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
plotOptions: {
pie: {
showInLegend: true
}
},
legend: {
enabled: true
},
series: [{
data: [20, 30, 30, 20]
}]
});
// button handler
$('#button').click(function() {
var series = chart.series[0];
if (series.data.length) {
chart.series[0].data[0].remove();
}
});
});
So click on any slice in legend will cause the chart to redraw and the remaining slices will take up 100%
Wonder if the same thing can be done for a funnel chart
http://jsfiddle.net/YUL5c/2/
$(function () {
var chart;
$(document).ready(function () {
// Build the chart
$('#container').highcharts({
chart: {
type: 'funnel',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
series: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.01]
]
}]
});
});
});
Currently the segment just disaapear. But the chart does not redraw
Unfortunately this animation is not supported, but I advice to post your request on the uservoice website
point.visible flag is ignored in funnel code.
If adding the check back to the drawing logic things just work magically. Even for the animation.
Not sure if it is a bug or ignored by intention
I'm not able to hide rounded circle for the line chart in Kendo ui. I do want to show tooltip value but want to hide circle.
below example is from demo site: http://demos.kendoui.com/dataviz/line-charts/index.html
Even, I don't know what do they call it so that I can find in the document here: http://docs.kendoui.com/api/dataviz/chart
According to the docs, you can set series.markers.visible to false:
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.markers.visible
Additionally you can change their size and shape.
Please try with the below code snippet. Let me know if any concern.
<style>
#chart circle {
display: none !important;
}
</style>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "Gross domestic product growth /GDP annual %/"
},
legend: {
position: "bottom"
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "line"
},
series: [{
name: "India",
data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
}, {
name: "World",
data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
}, {
name: "Russian Federation",
data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
}, {
name: "Haiti",
data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
}],
valueAxis: {
labels: {
format: "{0}%"
},
line: {
visible: false
},
axisCrossingValue: -10
},
categoryAxis: {
categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: false
}
});
}
$(document).ready(createChart);
</script>
Odd one. I'm calling my pie chart, and when I do the grey background, data pipe connectors, and hover data with the numbers all show fine on the background. But no pie slices will show.
However, if I print out the chart, it shows the slices after I save the chart and go back to the page. Or, if I inspect element in Chrome, it will show the chart after I resize the inspector window. Almost like it's re-drawing the chart if I take any action, but not drawing it initially.
It works the same way in all browsers. No javascript errors are thrown.
Any ideas?
This is my code:
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'pie1',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'application usage'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +'';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#FFFFFF',
connectorColor: '#FFFFFF',
formatter: function() {
return '<b>'+ this.point.name +'</b><br> '+ this.y +' ('+ Math.round(this.percentage) +'%)';
}
}
}
},
series: [{
type: 'pie',
name: 'percentage of application usage',
data: [{
name: 'Lessons', y: 25}, {name: 'Discussion', y: 65}, {name: 'Tests', y: 85}, {name: 'Dropbox', y: 92}, {name: 'Surveys', y: 105
}]
}]
});
});
</script>
<div id='pie1' class='chart_container'></div>