Remove axis line from highchart graphic - c#

I have this graph. I have a grid and I want to insert in each row this graph.
The problem is that as you can see there is a small line in the left, it seems that this line is the graph axis. I need to remove it not only because of the visual aspect but because the axis increases the grid cell height.
Thanks in advance!
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 100px; margin: 0 auto"></div>
​
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
backgroundColor: null,
renderTo: 'container',
type: 'bar',
},
title: {
text: ''
},
xAxis: {
gridLineWidth: 0,
enabled: false,
categories: [''],
labels: {
enabled: false
}
},
yAxis: {
enabled: false,
gridLineWidth: 0,
lineWidth: 0,
min: 0,
title: {
text: ''
},
labels: {
enabled: false
}
},
legend: {
enabled: false,
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +'';
}
},
credits:
{
enabled: false,
position:
{
align: 'left',
x: 10
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [ {
name: 'Clicks',
data: [2]
}, {
name: 'Distributed Points',
data: [3]
}],
exporting:
{
enabled: false
}
});
});
​
​


Is this what you are after?
I set the xAxis lineWidth: 0 and then after the plot is drawn:
$('.highcharts-axis').css('display','none');
EDIT:
If you also set tickWidth: 0, you can remove all traces of the axis lines without using the CSS call.
Revved fiddle here.

Related

HighCharts Gauge from -100% to 100%

I'm trying to figure out how to define a gauge, probably of type solidgauge, to go between -100% and 100%. With -100% being solid red and 0% being solid yellow and 100% being solid green. I would like to have the graph originate from the 0% and then go to either side. I would like to also have the graph show a line (like a speedometer that reflects from the center point through the end of the graphed arc (but not required).
This will be a static graph on the page, once calculated for the page it won't be updated, unless the page is refreshed.
I'm thinking that something like a solid activity gauge is what I'm looking for. However, I need the graphs to go in two different directions, and I can't figure out how to define that. I want the gauge to have one graph that would go from 0 to -90, while the other goes from 0 to 90. I want them to have 0 as the same end point and the positive side to be in a gradient green, and the negative side to be in a gradient red.
Sample Gauge showing both positive and negative
Gauge showing positive results
Gauge showing negative results

Thanks to a team member, I have my answer.
var gaugeOptions = {
chart: {
backgroundColor: 'transparent',
type: 'solidgauge'
},
title: null,
pane: {
center: ['71%', '80%'],
size: '140%',
startAngle: -90,
endAngle: 0,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#DDDF0D'], // green
[0.5, '#DF5353'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickAmount: 2
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled:false
}
}
}
};
var gaugeOptions2 = {
chart: {
backgroundColor: 'transparent',
type: 'solidgauge'
},
title: null,
pane: {
center: ['10%', '85%'],
size: '140%',
startAngle: 0,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#DDDF0D'], // green
[0.5, '#55BF3B'], // yellow
[0.9, '#55BF3B'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickAmount: 2
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled:false
}
}
}
};
var gaugeOptions3 = {
chart: {
backgroundColor: 'transparent',
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
credits: {
enabled: false
},
series: [{
data: [0],
}]
}));
// The RPM gauge
var chartRPM = Highcharts.chart('container-rpm', Highcharts.merge(gaugeOptions2, {
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
credits: {
enabled: false
},
series: [{
name: '',
data: [0],
tooltip: {
valueSuffix: ''
}
}]
}));
var chartTitle = Highcharts.chart('container-title', Highcharts.merge(gaugeOptions3, {
yAxis: {
min: -100,
max: 100,
title: {
text: 'Progress'
}
},
credits: {
enabled: false
},
series: [{
name: 'Progress',
data: [0],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">%</span></div>'
},
tooltip: {
valueSuffix: ' %'
}
}]
}));
// Bring life to the dials
setInterval(function () {
// Speed
var point,
point2,
point3,
newVal,
newVal2,
inc;
point = chartSpeed.series[0].points[0];
point2 = chartRPM.series[0].points[0];
point3 = chartTitle.series[0].points[0];
inc = Math.round((Math.random() - 0.5) * 100);
// newVal = point.y + inc;
if (inc > 0 ) {
newVal2 = inc;
newVal = 0;
}else{
newVal = inc;
newVal2 =0;
}
point.update(Math.abs(newVal));
point2.update(newVal2);
point3.update(inc);
}, 2000);

Kendo grid with Multi Filter on number column throws error

I have a kendo grid described below. Looks fine, and all the other columns work well except I can't use the client filter on the "Round" column. The multi-select filter looks ok but when I select some values and press the "filter" button it throws a javascript error - just for this column! It even sorts properly.
Uncaught TypeError: (GameType.RoundNo || "").toLowerCase is not a function
It seems to be caused by the structure of the GameType object in the schema. I can't set the datatype to type:"number" because I need to set the default value for the editing function of this grid (which I've omitted from the sample below). I've no idea how to set the default value AND the data type at the same time, and I'm not even sure that will solve my problem.
<div id="tblGames"></div>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
<script>
$(document).ready(function () {
$("#tblGames").kendoGrid({
sortable: true,
groupable: true,
filterable: true,
columns: [
{ field: "Season", title: "Season", type: "number", filterable: { multi: true }, width: 100 },
{ field: "GameType.RoundNo", title: "Round", type: "number", filterable: { multi: true }, width: 90 },
{ field: "GameDate", title: "Date", type: "date", format: "{0:dd/MMM hh:mmtt}", width: 130 },
{ field: "Grade.GradeName", title: "Grade", filterable: { multi: true } },
{ field: "HomeTeam.TeamName", title: "Home", filterable: { multi: true } },
{ field: "AwayTeam.TeamName", title: "Away", filterable: { multi: true } },
{ title: "Score", template: "#= ScoreFor + ' - ' + ScoreAgainst #", width: 70, filterable: false },
{ field: "IsPlayed", title: "Played?", filterable: { multi: true }, width: 95 }
],
dataSource: {
schema: {
model: {
id: "GameID",
fields: {
GameID: { editable: false, defaultValue: 0 },
GameType: { defaultValue: { GameTypeID: 1, RoundNo: 0 }, validation: { required: true } },
GameDate: { type: "date", required: true },
Season: { type: "number" },
Grade: { defaultValue: { GradeID: 1 }, validation: { required: true } },
Ground: { defaultValue: { GroundID: 1 }, validation: { required: true } },
HomeTeam: { defaultValue: { TeamID: 1 }, validation: { required: true } },
AwayTeam: { defaultValue: { TeamID: 1 }, validation: { required: true } },
ScoreFor: { type: "number", validation: { min: 0, required: true } },
ScoreAgainst: { type: "number", validation: { min: 0, required: true } },
IsPlayed: { type: "boolean", defaultValue: true }
}
}
},
data: [{"GameID":1,"Grade":{"GradeID":1,"GradeName":"A Grade"},"GameType":{"GameTypeID":1,"Description":"Regular Season","RoundNo":1,"Round":"Round 1"},"Season":2015,"GameDate":"\/Date(1432702800000)\/","Ground":{"GroundID":1,"GroundName":"Main Oval, Mainland"},"HomeTeam":{"TeamID":1,"TeamName":"A Team"},"AwayTeam":{"TeamID":2,"TeamName":"Losers R Us"},"ScoreFor":10,"ScoreAgainst":0,"IsPlayed":true,"ErrorMessage":null},
{"GameID":2,"Grade":{"GradeID":2,"GradeName":"B Grade"},"GameType":{"GameTypeID":1,"Description":"Regular Season","RoundNo":2,"Round":"Round 2"},"Season":2015,"GameDate":"\/Date(1432659159000)\/","Ground":{"GroundID":2,"GroundName":"Happy Park, Happyland"},"HomeTeam":{"TeamID":3,"TeamName":"B Team"},"AwayTeam":{"TeamID":2,"TeamName":"Losers R Us"},"ScoreFor":55,"ScoreAgainst":0,"IsPlayed":true,"ErrorMessage":null}]}
});
});
</script>
I've also unsuccessfully tried:
GameType: [{ RoundNo: { type: "number", defaultvalue: 0, validation: { required: true } } }, { GameTypeID: { defaultValue: 1, validation: { required: true } } }],

Filtering is working fine if you set your RoundNo values to string in your Dataset.
$(document).ready(function () {
$("#tblGames").kendoGrid({
sortable: true,
groupable: true,
filterable: true,
columns: [
{ field: "Season", title: "Season", type: "number", filterable: { multi: true }, width: 100 },
{ field: "GameType.RoundNo", title: "Round", type: "number", filterable: { multi: true }, width: 90 },
{ field: "GameDate", title: "Date", type: "date", format: "{0:dd/MMM hh:mmtt}", width: 130 },
{ field: "Grade.GradeName", title: "Grade", filterable: { multi: true } },
{ field: "HomeTeam.TeamName", title: "Home", filterable: { multi: true } },
{ field: "AwayTeam.TeamName", title: "Away", filterable: { multi: true } },
{ title: "Score", template: "#= ScoreFor + ' - ' + ScoreAgainst #", width: 70, filterable: false },
{ field: "IsPlayed", title: "Played?", filterable: { multi: true }, width: 95 }
],
dataSource: {
schema: {
model: {
id: "GameID",
fields: {
GameID: { editable: false, defaultValue: 0 },
GameType: { defaultValue: { GameTypeID: 1, RoundNo: 0 }, validation: { required: true } },
//GameType: [{ RoundNo: { type: "number", defaultvalue: 0, validation: { required: true } } }, { GameTypeID: { defaultValue: 1, validation: { required: true } } }],
GameDate: { type: "date", required: true },
Season: { type: "number" },
Grade: { defaultValue: { GradeID: 1 }, validation: { required: true } },
Ground: { defaultValue: { GroundID: 1 }, validation: { required: true } },
HomeTeam: { defaultValue: { TeamID: 1 }, validation: { required: true } },
AwayTeam: { defaultValue: { TeamID: 1 }, validation: { required: true } },
ScoreFor: { type: "number", validation: { min: 0, required: true } },
ScoreAgainst: { type: "number", validation: { min: 0, required: true } },
IsPlayed: { type: "boolean", defaultValue: true }
}
}
},
data: [{"GameID":1,"Grade":{"GradeID":1,"GradeName":"A Grade"},"GameType":{"GameTypeID":1,"Description":"Regular Season","RoundNo":"1","Round":"Round 1"},"Season":2015,"GameDate":"\/Date(1432702800000)\/","Ground":{"GroundID":1,"GroundName":"Main Oval, Mainland"},"HomeTeam":{"TeamID":1,"TeamName":"A Team"},"AwayTeam":{"TeamID":2,"TeamName":"Losers R Us"},"ScoreFor":10,"ScoreAgainst":0,"IsPlayed":true,"ErrorMessage":null},
{"GameID":2,"Grade":{"GradeID":2,"GradeName":"B Grade"},"GameType":{"GameTypeID":1,"Description":"Regular Season","RoundNo":"2","Round":"Round 2"},"Season":2015,"GameDate":"\/Date(1432659159000)\/","Ground":{"GroundID":2,"GroundName":"Happy Park, Happyland"},"HomeTeam":{"TeamID":3,"TeamName":"B Team"},"AwayTeam":{"TeamID":2,"TeamName":"Losers R Us"},"ScoreFor":55,"ScoreAgainst":0,"IsPlayed":true,"ErrorMessage":null}]}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/index">
<style>
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="tblGames"></div>
</div>
</body>
</html>

Export html table in highchart to pdf format but its display without html design

In Highchart title And Subtitle both display in table format But
when I trying to export html table in highchart to pdf format but its display without html design
<script type="text/javascript">
createGraph({
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
margin: [140, 150, 60, 80],
events: {}
},
credits: {
enabled: false // remove highcharts.com
},
colors: ['#009999', '#0000FF', '#6600CC','#006600','#CC0000'],
title: {
align: 'left',
style: {
color: '#6600CC',
fontWeight: 'bold',
fontSize: '14px'
},
text:'<table style="color: #0000FF">'+
'<tr><td>'+<%= Parameter%> +'</td></tr>'+
'<tr><td>'+<%= PCode%> +'</td></tr>'+
'<tr><td>'+<%= PName%> +'</td></tr>'+
'</table>',
useHTML: true
},
subtitle: {
align: 'left',
style: {
color: '#6600CC',
fontWeight: 'bold',
fontSize: '14px'
},
text:'<table class="TFtableCol2">'+
'<tr><td>'+<%= HMean%> +'</td>' +
'<td>'+<%= HSTD%> +'</td>' +
'<td>'+<%= HRSD%> +'</td>' +
'<td>'+<%= HUCL%> +'</td>' +
'<td>'+<%= HLCL%> +'</td>' +
'</tr>'+
'<tr><td>'+<%= SDose%> +'</td>' +
'<td>'+'Spec Type :'+<%= SpecType%> +'</td>'+
'<td>'+<%= SPValue%> +'</td>'+
'<td>'+<%= SHLimit%> +'</td>'+
'<td>'+<%= SLLimit%> +'</td>'+
'</tr>'+
'</table>',
useHTML: true
},
xAxis: {
categories: <%= LotNumber%> ,
title: {
text: 'Lot #'
}
},
yAxis: {
title: {
text: 'Concentration ('+<%= Unit%>+')'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y +' '+ <%= Unit%>;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100
},
series:[{
name: 'Spec '+ <%= SpecType%> ,
data: <%= SpecValue%>
},
{
name: 'Series',
data: <%= Series%>
},
{
name: 'Mean',
data: <%= Mean%>
},
{
name: 'UCL',
data: <%= UCL%>
},
{
name: 'LCL',
data: <%= LCL%>
}]
});
function createGraph(chartOptions) {
// open the basic chart
$(document).ready(function () {
// set the click event for the parent chart
chartOptions.chart.events.click = function () {
hs.htmlExpand(document.getElementById(chartOptions.chart.renderTo), {
width: 9999,
height: 9999,
allowWidthReduction: true,
preserveContent: false
}, {
chartOptions: chartOptions
});
};
var chart = new Highcharts.Chart(chartOptions);
});
}
// Create a new chart on Highslide popup open
hs.Expander.prototype.onAfterExpand = function () {
if (this.custom.chartOptions) {
var chartOptions = this.custom.chartOptions;
if (!this.hasChart) {
chartOptions.chart.renderTo = $('.highslide-body')[0];
chartOptions.chart.events.click = function () {};
var hsChart = new Highcharts.Chart(chartOptions);
}
this.hasChart = true;
}
};
</script>
Graph Display like this
But In PDF like this
how can i solve my issue?
please help
thank you

How to localize exported files from Highcharts?

I have charts localized into non-English language such as Thai (example text : ภาษาไทย).
Everything seems to work fine, all texts can be displayed in that specific language.
But when I tried to export charts to files, these are list of what happened:
-Download to PNG image ---> Result : All non-English characters became squares.
-Download to JPEG image ---> Result : Same as downloading to PNG
-Download to PDF document ---> Result : Same as downloading to PNG
-Download to SVG vector image ---> Result : Displayed correctly
To know how it looks like, just replace English Label there with Thai example text (example text : ภาษาไทย).
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; margin-top: 1em"></div>
and
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
zoomType: 'xy'
},
title: {
text: 'ข้อมูลเข้านะจ๊ะ'
},
subtitle: {
text: 'สิบวันที่แล้วนะจ๊ะ'
},
xAxis: [{
categories: ['2012-08-01', '2012-08-02', '2012-08-03', '2012-08-04', '2012-08-05', '2012-08-06', '2012-08-07', '2012-08-08', '2012-08-09', '2012-08-10', '2012-08-11', '2012-08-12']
}],
exporting: {
buttons: {
exportButton: {
menuItems: [{},
{},
{},
{}, /* leave standard buttons */
{
text: 'Download as xls',
onclick: function() {
location.href="getXLS.php?param1=param&param2=para2";}
}
]
}
}
},
yAxis: [{
min: 0,
max: 100,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{ // High wind
from: 90,
to: 100,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'AR to get',
style: {
color: '#606060'
}
}
}],
title: {
text: 'AR'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},{
min: 0,
max: 8000,
gridLineWidth: 1,
title: {
text: 'Inbound',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#AA4643'
}
},
opposite: true
}],
tooltip: {
formatter: function() {
var unit = {
'AR': '% ',
'1': '1',
'2': '2',
'3': '3'
}[this.series.name];
return ''+
this.x +': '+ this.y +' '+ unit;
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
yAxis: 1,
name: '1',
data: [2000, 1000, 3000, 2000, 1000]
}, {
yAxis: 1,
name: '2',
data: [4000, 7000, 4000, 6000, 5000]
}, {
name: '3',
type: 'spline',
color: '#F7801F',
yAxis: 0,
data: [90, 80, 70, 90, 85],
}]
});
});
});

I had the exact same problem. If you are sure the problem has no relation with encoding, then try the following depending on how you export
If you are exporting via your own server, make sure you added the required fonts
If you are exporting locally, add this one as well
<script src="http://code.highcharts.com/modules/offline-exporting.js"></script>

How To Pass Arguments In Jquery Function C# Web Application?

i am drawing chart using High Chart JS in my web app in which data values are hardcoded as shown below,
function Drawgraph(){
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
spacingRight: 20
},
title: {
text: 'Power to USD '
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Drag your finger over the plot to zoom in'
},
xAxis: {
type: 'datetime',
maxZoom: 14 * 24 * 3600000, // fourteen days
title: {
text: null
}
},
yAxis: {
title: {
text: 'Power rate'
},
min: 0.6,
startOnTick: false,
showFirstLabel: false
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, Highcharts.theme.colors[0]],
[1, 'rgba(2,0,0,0)']
]
},
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
type: 'area',
name: 'Power to USD',
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2011, 0, 01),
data: [
0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258,
0.8283, 0.8278, 0.8256, 0.8292, 0.8239, 0.8239, 0.8245, 0.8265, 0.8261, 0.8269,
0.7095
]
}]
});
});
};
How would i pass values to the data [] ?? from array [] term ...
Hopes for your reply
Regards,

From your CS code:
Page.ClientScript.RegisterArrayDeclaration("DataArray", "0.8, 0.5, 1.6");

Categories