I am using Highcharts, and I am wondering if it is possible for highcharts to make circular charts like these:
I have this, but it fills the whole circle instead of just 60% of the circle (Here is the fiddle: http://jsfiddle.net/fccuw47y/1/).
$(function() {
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: ''
},
plotOptions: {
pie: {
shadow: false
}
},
series: [{
name: 'Browsers',
data: [["Total",60]],
size: '100%',
innerSize: '95%',
showInLegend:false,
dataLabels: {
enabled: false
}
}]
});
});
We just implemented a similar looking chart using the solidgauge type in Highcharts.
You could use the piechart, but a pie chart is always going to fill 100%. It's the nature of the beast. If you wanted to use a piechart, you would have to supply it the amount for the remainder (empty space). For example, your series.data would have to be
[["Total", 60], ["Empty", 40]]
Here is an example using the solidgauge type of chart. It's much more flexible, and seems to be the more natural pick in this case.
http://jsfiddle.net/morqp9at/
You can set the color of a series data point to be transparent:
$(function() {
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: ''
},
plotOptions: {
pie: {
shadow: false
}
},
series: [{
name: 'Browsers',
data: [
[ "Completed", 60],
{
"name": "Incomplete",
"y": 40,
"color": 'rgba(0,0,0,0)'
}
],
size: '100%',
innerSize: '95%',
showInLegend:false,
dataLabels: {
enabled: false
}
}]
});
});
That gives a "complete" circle with the "Completed" portion filled in.
Related
I don't know if what I'm trying to achieve is even possible, but I thought someone has to have some knowledge.
I'm building a Telerik Report and I need to create a simple 3D bar chart. No visible axis. Just two vertical 3D bars.
I've tried the following:
<div id="container"></div>
JS:
// Set up the chart
const chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
height: 250,
width: 150,
options3d: {
enabled: true,
alpha: 35,
beta: 35,
depth: 50,
viewDistance: 50
}
},
xAxis: {
categories: ['Toyota', 'BMW'],
visible: false
},
yAxis: {
title: {
enabled: false
},
visible: false
},
tooltip: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false
},
plotOptions: {
column: {
depth: 50,
groupPadding: 0,
pointPadding: 0
}
},
series: [{
data: [1318, 1073],
colorByPoint: true,
}]
});
function showValues() {
document.getElementById('alpha-value').innerHTML = chart.options.chart.options3d.alpha;
document.getElementById('beta-value').innerHTML = chart.options.chart.options3d.beta;
document.getElementById('depth-value').innerHTML = chart.options.chart.options3d.depth;
}
// Activate the sliders
document.querySelectorAll('#sliders input').forEach(input => input.addEventListener('input', e =>
{
chart.options.chart.options3d[e.target.id] = parseFloat(e.target.value);
showValues();
chart.redraw(false);
}));
showValues();
but my problem is, how do I save that image and assign it to my telerik picturebox? And where do I put the html code because I know telerik has an HTMLTextBox, but not a cshtml page that I can add
a div to.
Is there a way to create a 3D chart, purely in c# code (something similar to using System.Web.UI.DataVisualisation - but can't use that in .net core)? I know I can create a chart, as an image, and assign the image to the picturebox, but it's the creating of the image that I can't figure out.
This is what I'm trying to achieve in my telerik pdf:
I have a single highstock chart with 2 y-axis - one displaying an area chart and below it a column chart.
I am trying to achieve 2 things (both of which I know are possible, just not sure how to do it).
have a single tooltip, not the 3 that are currently showing up
have that tooltip follow the cursor - either tracking the cursor as
it move across the screen, or appear only over the chart which is
being hovered over (in reality the charts will be larger than the
codepen and require the page to be scrolled).
Appreciate any help!
$cumulative_chart = Highcharts.stockChart('container', {
chart: {
type: 'area',
height: 500
},
plotOptions: {
series: {
//stacking: 'normal',
dataGrouping: {
units: [[
'day',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
null
]]
}
}
},
yAxis: [{
height: '50%'
}, {
top: '65%',
height: '50%',
offset: 0
}],
xAxis: {
offset: 100
},
credits: {
enabled: false
},
tooltip: {
enabled: true,
shared: true
},
series: [{
type: 'area',
data: [[1512086400000, 10626],[1512172800000, 21634],[1512259200000, 34994],[1512345600000, 51400],[1512432000000, 68430]],
stack: 0,
name: 'chart A',
id: 'area'
},
{
type: 'column',
data: [[1512086400000, 10626],[1512172800000, 11008],[1512259200000, 13360],[1512345600000, 16406],[1512432000000, 17030]],
stack: 1,
name: 'chart B',
yAxis: 1,
id: 'column',
showInLegend: false
}]
});
codepen: https://codepen.io/anon/pen/ZozBZM
The option you are looking for is to add split:false to your tooltip. This causes for the tooltip to center itsself around one of your graphs, instead of hovering over all the graphs in your highstock chart.
A working fiddle is found here
You can find more information in the highcharts API
I have a webpage with HighCharts and idTabs plugins installed. I just want to show 1 chart at time, so hi got them in multiple tabs. The html code is:
<ul class="idTabs">
<li>Points</li>
<li>Kills and deaths</li>
<li>Damage</li>
<li>Bombs</li>
</ul>
<div id="vpPointsGraphWrapper"><div id="vpPointsGraph"></div></div>
<div id="vpKillsDeathsGraphWrapper"><div id="vpKillsDeathsGraph"></div></div>
<div id="vpDamageGraphWrapper"><div id="vpDamageGraph"></div></div>
<div id="vpBombsGraphWrapper"><div id="vpBombsGraph"></div></div>
Until this point is all okey, the charts have their data, and all is okey except one thing, the width. The chart that is showed by default (vpPointsGraph) has the correct width (100% of the div that contains them), but the others take the width that correspond to the width of the monitor, overflowing out of the wrapper div. I think the problem is that they want to get the wrapper div width, but as its hidden they take the whole screen width. ¿Is there anyway to fix this?
Thanks for your answers.
Edit: I solved it, check the next answer for explanation.
Solution: http://jsfiddle.net/5kLdG/
What i have done its just getting the width of the container i want the chart to fit in, and setting it in the highcharts 'width' parameter. I don't know if its the best solution but it worked for me.
//Get wrapper width
var width = $('#wrapper').width()
//Points Graph
var pointsChart = new Highcharts.Chart({
chart: {
renderTo: 'vpPointsGraph',
type: 'line'
},
title: {
text: 'Points'
},
xAxis: {
title: {
text: 'Match'
},
categories: [1,2,3,4,5,6,7],
reversed: true
},
yAxis: {
title: {
text: 'Points'
},
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: ''
},
plotOptions: {
line: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Points',
data: [5,6,7,8,3,6,8]
}]
});
//KillsDeaths Graph
var killsDeathsChart = new Highcharts.Chart({
chart: {
renderTo: 'vpKillsDeathsGraph',
type: 'line',
width: width
},
title: {
text: 'Kills and Deaths per match'
},
xAxis: {
title: {
text: 'Match'
},
categories: [1,2,3,4,5],
reversed: true
},
yAxis: {
title: {
text: 'Number'
},
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: ''
},
plotOptions: {
line: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Kills',
data: [6,8,2,2,5]
}]
});
I render a chart using highcharts the x-axis is of 'datetime' type . When I have single point in the chart the x-axis label is shown as 00:00:00:0000 instead of ('18 Nov') the given date value.
This seems to happen in highcharts version 3.0.1 where as not in 3.0.7
I did found an issue here https://github.com/highslide-software/highcharts.com/issues/1572
But in case of datetime type for x-axis how can I fix this?
Is there any workaround without upgrading to latest version because that would involve verifying all other charts, which is not possible for now in my case.
Code:
var data1 = Date.UTC(2013, 10, 18);
var a = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false,
width: 600,
height: 400
},
plotOptions: {
series: {
marker: {
symbol: 'circle'
}
}
},
series: [{
name: 'Total Points Estimated',
data: [[data1,0]]
}],
title: {
text: 'Release Burn-Up report'
},
xAxis: {
type: 'datetime',
gridLineWidth: 1,
gridLineDashStyle: 'shortdot',
title: {
text: 'Date'
},
},
yAxis: {
gridLineDashStyle: 'shortdot',
min: 0,
title: {
text: 'Backlog Effort'
}
}
});
Fiddle link : http://jsfiddle.net/WdDqc/1/
Try to set minRange, for example to one day, otherwise Highcharts won't know what kind of label should be displayed. See docs.
I am using HighCharts for a line graph and i am attemping to change the line color for each series. I did find this example here but the data is hard coded. My data is pulled from an Sql database and passed to the HTML page using some VB code.
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Chart Title'
},
subtitle: {
text: 'Chart subtitle'
},
xAxis: {
categories: [<%= GraphDate %>]
,
labels:
{
rotation: -45,
align: 'right',
style:
{
}
}
},
yAxis: {
min: 160,
title: {
text: 'Temp'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 400,
y: 0,
floating: true,
shadow: true
},
tooltip: {
formatter: function () {
return '' +
this.x + ': ' + this.y + ' ºC';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series:
[<%= GraphSeries %>],
});
I tried to style it using the other post however it failed to generate a chart. The main problem is though, the line graph has two series, so the below method would set the color for both series i assume? So, would i maybe need to format the series in my vb code somehow?
series: [{
color: 'yellow',
data: [
[<%= GraphSeries %>]
]},
Edit:
$(document).ready(function () {
chart = new Highcharts.Chart({
colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92']
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
}
Top level config can contain colors field. It's an array from which series colors will be picked.
See here.
Here's working piece from my project
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart:{
renderTo:'perfchart',
type:'line',
marginRight:130,
marginBottom:25
},
colors: ['#0000FF', '#0066FF', '#00CCFF'],
title:{
text:'Historical system performance',
x:-20 //center
},
Appearance:
See the code (and the plot that it renders) below.
The snippet below is a complete script--i.e., either put it in your markup between two script tags or as a stand-along js file with an includes in your markup.
Colors is a Chart object so the easiest way is to pass an array of colors (as hex strings):
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
colors: ['#562F1E', '#AF7F24', '#263249', '#5F7F90', '#D9CDB6'],
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
series: [{
name: 'series I',
data: [17.4, 16.1, 19.45, 24.15, 28.44, 33.15, 37.2, 41.25, 43.3]
},
{
name: 'series II',
data: [13.19, 17.23, 25.74, 28.5, 33.9, 35.62, 37.0, 36.6, 34.82]
}
]
});
});
})
The color can be configured as part of the series. Try something like this:
series: [
{
name: 'series I',
color: '#ffffff',
data: [17.4, 16.1, 19.45, 24.15, 28.44, 33.15, 37.2, 41.25, 43.3]
}
];