I am trying to achieve two things:
Apply a green or red color based on the data point of a column chart in highcharts. Lets say if column is above 50, border is green else red.
I want to place a icon (if icon not possible, at least a text) inside few chart based on if they have some property.
I am trying to do following:
plotOptions:{
column:{
borderColor: this.y > 50 ? 'green' : console.log(this),
dataLabels: {
format: this.prop : 'i': '', //will put 'i' as icon
enabled: true,
align: 'top',
color: '#fff',
inside: true
}
},
},
My bar chart series is :
series: [{
name: 'Defect per sprint',
data: [0, 0, 0, 2, 10, 2, 5, 3]
}]
If I keep borderColor with series it gets applied to all columns
But it seems plotOptions is not supplied the 'this' instance. So the above code doesn't work. How can I achieve the above ??
I would do this by preprocessing the data.
You can loop through the data array and check for any value, and apply any level of formatting accordingly.
Example:
var data = [1, 2, 3, 5, 9, 8, 7, 4, 5, 6, 9, 7, 5, 3, 6, 9, 7, 5, 9],
processedData = [];
$.each(data, function(i, point) {
processedData.push(
(
point < 6 ? {
"y": point,
"color": "rgba(204,0,0,0.75)",
"dataLabels": {
"enabled": true
}
} : point
)
)
});
This loops through an array, checks for a value of less than 6 - if found, it applies a different color to the point, and enables the data label, otherwise, it just adds the point as a single value, and the chart config determines its color and other properties.
In the chart config, you specify the details of the dataLabels properties, and set enabled: false, so that they are only used for the points that you've enabled them for.
Fiddle:
http://jsfiddle.net/jlbriggs/3d3fuhbb/178/
Output:
1) I'm not aware of a way to do this on chart creation. You can, though, loop over the series array after creating your chart to update each column's border color. Inside your loop, you'd use the update method after checking if the column value is above 50. Sample below:
chart.series[i].update({borderColor: '#00FF00'})
2) I haven't used Highcharts for some time now but the following used to work: instead of format, define a formatter function.
dataLabels: {
formatter: function () {return this.prop ? 'i' : ''}, //will put 'i' as icon
...
}
Related
Is it possible to have multiple charts inside each other:
Please check js fiddle for "single" and what I would like is to have that as a first one, inside second one and so on...
var data = [
{
label: "title 1",
value: 32,
color: "#444334"
}, {
label: "title 2",
value: 51,
color: "#f0f0f0"
}, {
label: "title 3",
value: 17,
color: "#8ba43a"
}];
Check image attached (sorry about bad graphic)
Thanks.
You can do this with jqplot or chart.js
An example from jsplot:
$(document).ready(function(){
var s1 = [['a',6], ['b',8], ['c',14], ['d',20]];
var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]];
var plot3 = $.jqplot('chart3', [s1, s2], {
seriesDefaults: {
// make this a donut chart.
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
// Donut's can be cut into slices like pies.
sliceMargin: 3,
// Pies and donuts can start at any arbitrary angle.
startAngle: -90,
showDataLabels: true,
// By default, data labels show the percentage of the donut/pie.
// You can show the data 'value' or data 'label' instead.
dataLabels: 'value'
}
}
});
});
According to the jqplot page, it requires minimum of jquery 1.9.1, along with it's main jqplot, plus jqplot pieRenderer/donutRenderer scripts and the jqplot css.
The code above will produce something like this:
You can add another series, which will create a third circle.
Working with tooltips in Highcharts I can see that not all type of series are included in the same tooltip. In the definition of my Highcharts object the property of tooltip look like:
tooltip: {
positioner : function (boxWidth, boxHeight, point) {
return {
x : point.plotX - 100,
y : point.plotY
};
},
shared : true
}
And how I am setting the tooltip property for each series is:
public getDefaultTooltip() {
return {
pointFormat : '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y} </b><br/>'
};
}
After read the documentation of tooltip I can see that shared property is not valid for series of type 'scatter', what is exactly the type of series that is not working for me. So, is there some workaround in order to make available all the data in the same shared tooltip?
in the example bellow I want to show all the series data in the same tooltip but the scatter serie is using a different popover. http://jsfiddle.net/rolandomartinezg/a6c4c4tv/1/
The ScatterSeries is defined in highcharts with noSharedTooltip = true. I think this is because the scatter series show both the x and y in their tooltips.
var ScatterSeries = extendClass(Series, {
type: 'scatter',
sorted: false,
requireSorting: false,
noSharedTooltip: true,
trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
takeOrdinalPosition: false, // #2342
kdDimensions: 2,
kdComparer: 'distR',
drawGraph: function () {
if (this.options.lineWidth) {
Series.prototype.drawGraph.call(this);
}
}
});
To get around this, you can use a line series instead of the scatter series with the lineWidth = 0. You also need to turn off the hover state for the series to avoid the line showing up on hover.
, {
type: 'line',
name: 'Average',
lineWidth: 0,
states: {
hover: {
enabled: false
}
},
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}
http://jsfiddle.net/a6c4c4tv/2/
I'm trying to add empty data points throughout a line chart using Chart.js. I have this:
var data = {
labels: [
"1","2","3","4","5","6","7","8","9","10"
],
datasets: [
{
label: "Traffic",
data: null,null,20,40,null,null,null,10,20,null
}
]
};
The problem is that the linechart only recognizes the first two "nulls" as being empty data points and doesn't display them. However, for the nulls that come after, a line (connecting the previous and next valid datapoint) is shown, which makes it seem as if the "null"-datapoints actually exist. Is there a way to NOT display null-values in linecharts? (Similar to what Canvas.js offer: http://canvasjs.com/docs/charts/basics-of-creating-html5-chart/empty-null-data-points-chart/)
I read through the Chart.js documentation and stackoverflow but could not find an answer. Can anyone help me?
I read line documentation and found a boolean option which is called spanGaps
Here's a piece of code, which i used to display this:
{
'type': 'line',
'data': {
'labels': [1, 2, 3, 4, 5],
'datasets': [{
'label': 'example',
'data': [4, 1, null, 3],
// These are style properties, there is no need to copy them
'borderColor': 'rgba(255,99,132,1)',
'borderWidth': 1,
'fill': false,
tension: 0.2,
}]
},
'options': {
spanGaps: true // this is the property I found
}
}
Chart with spanGaps = false:
Chart with spanGaps = true
Posting the summary of the answer at Line ChartJS empty / null values doesn't break the line WITH (slight) corrections for the question above
Extend the line chart
Chart.types.Line.extend({
name: "LineAlt",
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
// now draw the segments
var ctx = this.chart.ctx
this.datasets.forEach(function (dataset) {
ctx.strokeStyle = dataset.strokeColor
var previousPoint = {
value: null
};
dataset.points.forEach(function (point) {
if (previousPoint.value !== null && point.value !== null) {
ctx.beginPath();
ctx.moveTo(previousPoint.x, previousPoint.y);
ctx.lineTo(point.x, point.y);
ctx.stroke();
}
previousPoint = point;
})
})
}
});
You have to call the LineAlt thus
var myLineChart = new Chart(ctx).LineAlt(data, {
datasetStrokeWidth: 0.01,
datasetFill: false,
pointDotRadius : 2,
pointDotStrokeWidth: 3
});
Other changes made for your question - data should be an array and not a comma separated set of values value
Fiddle - http://jsfiddle.net/zu3p2nky/
Edit Aug 2016
This now works out of box without the need for an extension, just be using the null as a data point.
Gthompson83 gave me a great suggestion in using jqPlot, but here is my issue now...
I have the following javascript code on my page (the current data is just filler):
function CreatePie(div) {
var data = [
['Heavy Industry', 12], ['Retail', 9], ['Light Industry', 14],
['Out of home', 16], ['Commuting', 7], ['Orientation', 9]
];
var plot2 = jQuery.jqplot(div, [data],
{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Turn off filling of slices.
fill: false,
showDataLabels: true,
// Add a margin to seperate the slices.
sliceMargin: 4,
// stroke the slices with a little thicker line.
lineWidth: 5
}
},
legend: { show: true, location: 'e' }
}
);
}
I call the function from the asp.net code-behind page as a startup script, like so.:
string script = string.Format("CreatePie('{0}')", "chartDiv" + k,);
ClientScript.RegisterStartupScript(GetType(), "pieChart"+k,
"<script>" + script + "</script>");
The one argument passed is the div into which the chart will be placed. Now how do I pass the data variables so they can be placed in the data = [ [var1, value1], [var2, value2]...] portion of the Javascript code?
Try using jqPlot. It's javascript based solution. Use asp.net to output the data for the javascript variable.
I have a columnrange series in my highchart, and I want to be able to set a specific color for each range in a series. As long as I just used one color, this worked fine:
data: [[1, 5, 10], [2, 10, 20]]
Here the first value in each list is the X and the next two is the start and the end of the Y range. In order to have a separate color for each range I figured I needed to use the "object notation" instead of the array notation, so I tried this:
data: [{
x: 1,
y: [5,10],
fillColor: "red"
},{
x: 2,
y: [10,20],
fillColor: "blue"
}]
This did however not work (got invalid values). I cannot see that this case is covered by the API doc: http://api.highcharts.com/highcharts#series.data
Does anyone know how I can have ranges (two Y values) with the object notation, or if there is another way I can color the ranges differently? PS: My Y values are actually date ranges, but I just simplified it for the example above.
Edit: Here is a jsfiddle showing what I try to achieve: http://jsfiddle.net/Q2JMF/1/ . If you change the type to "column", and change the y-values to just single integers, you see that it works fine. But with columnrange I cannot get it working.
Proper options are low and high, see: http://jsfiddle.net/Q2JMF/2/
data: [{
x: 1,
low: 7,
high: 8,
color: "red"
}, {
x: 2,
low: 6,
high: 7,
color: "blue"
}]