Develop Reference

How can I access the 'this' field in plotOptions of highcharts

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
...
}

Chart js pie or doughnut charts 3 inside instead of 1

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.

Javascript flot not showing data series

I'm using flot to display some data on a bar graph. But my data isn't displaying for some reason, and I have no idea why.
My data series is correct as far as I can see, but it still won't show.
JsFiddle: http://jsfiddle.net/9jhpyne4/1/
Code:
var plotData = [
[1, 12.35],
[2, 34.6],
[3, 56.7],
[4, 4.35]
];
$.plot($("#main-chart"), plotData, {
bars: {
show: true,
lineWidth: 0,
fill: true,
fillColor: {
colors: [{
opacity: 0.8
}, {
opacity: 0.1
}]
}
}
});

Data which you pass to plot function needs to have some metadata (like label and color):
var data = [
[1, 12.35],
[2, 34.6],
[3, 56.7],
[4, 4.35]
];
var dataset = [{ label: "a label", data: data, color: "red" }];
https://jsfiddle.net/9jhpyne4/3/

The console throw an error regarding your #main-chart width & height as invalid.
Changing your width & height from percentage to pixel based seems to fixed the error.
HTML
<div id="main-chart" style="width:200px;height:200px;"></div>
Here's your updated fiddle

You need to specify the width and height.
<div id="main-chart" style="width:200px;height:200px;"></div>
And You need to change a little your plotData variable to:
var plotData = [
[[1,0], [1, 12.35]],
[[2,0], [2, 34.6]],
[[3,0], [3, 56.7]],
[[4,0], [4, 4.35]]];
You can see a complete example here: here

Google Charts throws "cannot read property '1' of undefined" when creating a view

I am working with google charts and would like to create a line chart where not all colums from the underlying data is visible. I found here - https://developers.google.com/chart/interactive/docs/reference#DataView that DataViewClass should be a good solution for it and tried to implement it as below. Unfortunately when I try to generate the chart I am getting "cannot read property '1' of undefined" error but no errors in the console.
Has anyone came across this? Any ideas for the solution?
best,
Adam
function testersBreakdown (testType, app){
// Data for the graph - need to be replaced by a correct query to backend
// TO DO: Format data and generate graphs
var data;
data = new google.visualization.DataTable();
data.addColumn('number', 'Test Cycle');
data.addColumn('number', 'Total');
data.addColumn('number', 'F2F');
data.addColumn('number', 'Scalable In the Office');
data.addColumn('number', 'Remote Testing');
data.addRows([
[1, 10, 3, 4, 3],
[2, 11, 4, 4, 3],
[3, 15, 3, 9, 3],
[4, 20, 3, 9, 8],
[5, 45, 30, 14, 1]
]);
var options = {
width: '100%',
height: 600,
hAxis: {
title: 'Test Cycle'
},
vAxis: {
title: 'Responses'
},
colors: ['#a52714', '#097138', 'black', 'blue'],
animation: {
duration: 300,
startup: true,
},
};
// Intermediate object to control views based on dropdown
// TO DO: Determine what to show based on the testType dropdown selected
var view = new google.visualization.DataView(data);
view.setColumns(['Test Cycle','Total' ]); //here you set the columns you want to display
//Visualization Go draw!
var chart = new google.visualization.LineChart(document.getElementById('testTypeChart'));
chart.draw(view, options);
};

This is due to a bug when using animations with a dataView (see this issue for more info regarding the bug). To solve this try loading the release candidate from google instead of the stablegoogle.load("visualization", "1", {packages:["corechart"]}); with google.load("visualization", "1.1", {packages:["corechart"]});.
Check here for more info about using release candidates.
I've got to little repuptation to post more than 2 links, so if you go to the google developers page (that you linked to) and then navigate to "Google Chart News" and scroll to the bottom-ish you can find more info about this.
I also tried it in a fiddle and it works like a charm.Hope it helped!Henrik

How to create a function that can be called to display multiple bar graphs with JQplot

I would like to create a function that can be called multiple times within an HTML page so I can display multiple stacked bar graphs. They can't all be in the same chart because I need a bunch of other content between them.
My first thought was to just write the function and pass data to it as I need to create the bars. I tried the below but for some reason is gives me an error of No plot target specified.
I am also not sure if this would be the best or most efficient way to accomplish this.
Thanks to anyone taking a look at this!
I thought each time I needed a bar I would just insert the below in the HTML
<script>
var id ='bar_one'; //I also tried document.getElementById('bar_one');
var data1 = [[12, 1]];
var data2 = [[5, 1]];
var data3 = [[3, 1]];
barBuilder(id, data1, data2, data3);
</script>
<div id='bar_one' style="height:75px;width:500px; "></div>
External JavaScript file
function barBuilder(id, data1, data2, data3){
var options = {
animate: true,
animateReplot: true,
stackSeries: true,
seriesColors:['#007f00', '#00b200', '#00ff00'],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {show: true,location: 'w'},
rendererOptions: {
barMargin: 13,
barDirection: 'horizontal'},
},
axesDefaults:{
tickOptions: {textColor: 'black'}
},
axes:{
yaxis:{renderer: $.jqplot.CategoryAxisRenderer,
showTicks: false,
tickOptions: {showGridline:false, showMark:false}
},
xaxis:{showTicks:false,
show: false,
tickOptions:{showGridline: false},
rendererOptions:{drawBaseline:false}
}
},
grid:{
background:'transparent',
drawBorder: false,
shadow: false}
};
$.jqplot(id, [data1,data2,data2],options);
}

You are trying to plot graph in a div with id 'bar_one' but each time you call it to plot different graphs in the same div, so a better option would be to use for loop for dynamically creating div and passing graph values to jqplot object and appending for loop variable to the id's (inorder to create unique id for each div) created with different data.