I am getting an error in IE as:
Message: Invalid argument.
Line: 8
Char: 56
Code: 0
URI: .../js/highcharts.js
Below is the highcharts chart code..It works perfectly fine in Firefox but in IE throws an error.Can anybody help me with this. Thanks.
function drawChart(categories,series){
$('#container').highcharts({
chart: {
backgroundColor:'rgba(255, 255, 255, 0.1)',
spacingLeft: -2
},
xAxis: {
categories: categories,
gridLineWidth:0.5,
labels: {
style: {
fontSize:'0px'
}
}
},
colors: ["#a7c1d0"],
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
title: {
text: "Last 45 days NAV Price",
align: 'center',
style:{
color: '#5e605e',
fontSize:'11px',
fontFamily:'Arial'
},
y:1
},
legend: {
enabled:false
},
navigation: {
buttonOptions: {
enabled: false
}
},
yAxis: {
title: {
enabled: true,
text: 'Price',
style: {
color: '#5e605e',
fontSize:'10px',
marginLeft:'-5px;',
fontFamily:'Arial'
}
},
labels:{
style:{
fontSize:'10px'
},
step:0,
},
lineWidth: 1,
tickInterval: 0.20,
minTickInterval:0.20
},
series: [{
data: series
}]
});
}
Could you paste your data? Moreever you have i.e extra common in labels object.
labels:{
style:{
fontSize:'10px'
},
step:0,
},
http://www.highcharts.com/docs/frequently-asked-questions#not-showing-in-explorer
Related
I have a multiselect dropDownList and a chart,i want my chart to by dynamic to plot more based on my multiselect dropdownlist,but i have no idea, I would appreciate if you give me a hint by a demo or an example.because in the following code,i have a chart which works only based normal dropdownlist not the multiplechioce,
Here is Multiselect:
$('#multiselect').kendoMultiSelect({
dataTextField: "Text",
dataValueField: "Text",
valuePrimitive: true,
dataSource: result.list_of_parks,
})
here is the chart:
function createChart(data, data_wind) {
$("#topMonth").kendoChart({
series: [{
data: data,
type: "column",
axis: "l100km",
field: "productionvalue",
categoryField: "name",
color: "#228B22"
},
{
axis: "ava",
data: data_wind,
type: "line",
field: "windvalue",
categoryField: "name",
color: "#007eff",
},
],
valueAxes: [
{
name: "l100km",
title: { text: "Production (MW/H)" },
// min: 0,
// max: 2000000,
// majorUnit: 200000,
majorGridLines: {
visible: false
},
minorGridLines: {
visible: false
},
},
{
name: "ava",
title: { text: "Averge Wind Speed(KM/H)" },
min: 0,
// max: 20,
majorUnit: 1,
majorGridLines: {
visible: false
},
minorGridLines: {
visible: false
},
}
],
categoryAxis: {
majorGridLines: {
visible: false
}
,
labels: {
padding: {
left: -20,
buttom: 0
},
rotation: 340
},
axisCrossingValues: [0, 20],
},
tooltip: {
visible: true,
// majorUnit:10,
template: " #= value #"
},
});
$(window).on("resize", function () {
kendo.resize($(".chart-wrapper"));
});
}
}
});
});
I want to change legend color in highchart. I have used highchart-ng, the below code its not working, Please help me
scope.dvBarChartNG = {
options: {
chart: {
type: 'column',
backgroundColor: '#ffffff'
}
},
xAxis: {
},
yAxis: {
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
},
},
*legend: {
itemStyle: {
'color' : '#000'
},
itemHoverStyle: {
'color' : '#000'
},
itemHiddenStyle: {
'color' : '#000'
}
},*
series: [{
name: 'xxxx',
data: scope.yyyy.series.user,
color: '#cfffac',
borderColor: "#cfffac",
showInLegend: true
}, {
name: 'xxxx',
data: scope.yyyy.series.entity,
color: '#82c84c',
borderColor: "#82c84c",
showInLegend: true
}]
};
my html code is
I'm creating a grouped bar chart like this:
$("#chart").kendoChart({
dataSource: {
data: rawdata,
group: { field: "Serie" },
},
legend: {
position: "top"
},
plotArea: {
background: "white",
},
seriesDefaults: {
type: "column",
style: "smooth",
stack: true
},
series: [
{
field: 'Valor1',
labels: {
visible: true,
background: '',
format: 'p1',
color: 'white',
position: 'center'
},
}
],
valueAxis: {
max: 1,
labels: {
format: "p2"
},
line: {
visible: false
},
axisCrossingValue: -10,
},
categoryAxis: {
field: "Segmento",
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name # <br /> " +
"Valor = #= kendo.format('{0:p2}', value) # <br/> " +
"Tooltip = #= dataItem.Tooltip # ",
}
});
My data has four properties: Serie, Segmento, Valor1, Tooltip. Example of one data point:
{
"Serie": "S1",
"Segmento": "C1",
"Valor1": 0.31500380634422465,
"Tooltip": 20,
}
The values of the stack bar are incorrect in chrome but in firefox and ie it's fine.
Correct graph in firefox and ie:
Incorrect graph in chrome:
Here is a live demo: http://trykendoui.telerik.com/anET/9
How can i solve this?
This is a problem with Chrome's implementation of Array.sort; see this discussion.
You can fix it by sorting the data source explicitly:
dataSource: {
data: rawdata,
group: { field: "Serie" },
sort: [{ field: "Serie", dir: "asc"}, { field: "Segmento", dir: "asc"} ]
},
(updated demo)
Here is the link for kendo UI bar chart: http://jsfiddle.net/nayanakalkur/ZPUr4/119/
In the fiddle example, X-axis is at '0'. How can i move the axis up or down the Y axis?
Suppose i want have the X-axis at 'y' value 10? How can this be done?
Code for the same:
HTML code:
<div id="example" class="k-content">
<div id="chart"></div>
</div>
Javascript code:
function createChart() {
$("#chart").kendoChart({
title: {
text: "Site Visitors"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "column",
labels: {
visible: true,
background: "transparent",
}
},
series: [{
name: "Total Visits",
data: series1,
gap: 1.0,
spacing: 0
}, {
name: "Unique visitors",
data: series2,
gap: 1.0
}],
valueAxis: {
line: {
visible: false
},
title: {
text: "Availability"
}
},
categoryAxis: {
majorGridLines: {
visible: true,
position: "bottom"
}
},
tooltip: {
visible: true,
format: "{0}"
}
});
}
var series1=[56000, 63000, 74000, 91000, 117000, 158000];
var series2= [-52000, 34000, 23000, -98000, 67000, 83000];
$(document).ready(function () {
createChart();
$("#example").bind("kendo:skinChange", createChart);
var chart = $("#chart").data("kendoChart"),
firstSeries = chart.options.series;
});
Thanks in advance.
Set valueAxis.min to 10:
valueAxis: {
min: 10,
line: {
visible: false
},
title: {
text: "Availability"
}
},
Your JSFiddle modified in here: http://jsfiddle.net/OnaBai/ZPUr4/120/
EDIT: If you want that the axis crosses at one specific value, then set valueAxis.axisCrossingValue to the value.
Example:
valueAxis: {
axisCrossingValue: -50000,
line: { visible: false },
title: { text: "Availability" },
},
And the JSFiddle modified http://jsfiddle.net/OnaBai/ZPUr4/126/
Is there a possibility to add notes on the categoryAxis in a Kendo Chart.
As seen in the documentation it should be possible, but even after setting every single option i dont see any notes. I couldn't find any example of somebody doing that. Has anybody managed or used this feature?
my try on jsFiddle
categoryAxis: {
field: "age",
justified: true,
majorGridLines: {
visible: false
},
minorGridLines: {
visible: false
},
min: 10,
max: 30,
labels: {
step: 5
},
notes: {
data: [{
value: { age: 15 },
position: "top",
icon: {
visible: true,
size: 16,
type: "circle",
background: "#585858",
border: {
color: "#FFFFFF"
}
},
line: {
length: 16
},
label: {
visible: false,
text: " "
}
}]
}
}
Thank you
The value property for notes on the categoryAxis appears to represent each category value.
Here's an example notes configuration:
notes: {
label: {
template: "Value: #: value #"
},
icon: {
visible: true,
size: 16,
type: "circle",
background: "#585858",
border: {
color: "#FFFFFF"
}
},
line: {
length: 16
},
data: [{ value: 1}, { value: 5 },{ value: 10 }, { value: 15 }, { value: 20 }]
}
Check out this updated fiddle.