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.
Related
How to make x-grid line named "Today" to be shown only to some y value (for example from y =0 to y=25)
grid: {
x: {
lines: [
{value: 4, text: 'Today',position: 'start'},
{value: 12}
]
},
Fiddle: https://jsfiddle.net/KrisKuliv/74fkuyw4/1/
C3.js does not support this behaviour. You can only customize these lines with own css classes which doesn't include the length of the lines because svg doesn't work this way.
The only way to get the wanted behaviour is using d3 directly. You can give your lines some classes to make them easier to select.
grid: {
x: {
lines: [
{value: 4, text: 'Today',position: 'start', class: 'myClass'},
{value: 12}
]
}
d3.selectAll(".myClass")
I haven't done something like this yet but I hope this will help you.
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
...
}
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
How can I change the Text of legend of pie chart. I am using c3 charts in my php page. I have already read the documentation of c3 charts but no luck.
Currently i am using this code it show legend for true but I not able to change the text I have tried this.
var chart = c3.generate({
bindto: '#container',
padding: {
top: 10,
right: 0,
bottom: 10,
left: 0,
},
data: {
columns: [<?php echo $pieChartDataString; ?>],
type : 'pie',
labels: true
},
legend: {
show: true,
position: 'upper-center'
format: {
title: function () { return "Legend title"; },
name : function () { return "Legend name"; },
value: function () { return "Legend value";}
}
}
//But these legend values or not showing
});
It's not showing my legend values its always shows only columns as legend.
Is there any way that I can change the legend values.
You haven't provided the data that gets outputted from your php, so it's hard to say.
But the first item in each of the columns array determines the name that goes in the legend. So:
columns: [
['this is legend 1', 30],
['put your value here', 120],
]
would result in the legend labels being "this is legend 1" and "put your value here".
Here's a fiddle:
http://jsfiddle.net/jrdsxvys/9/
Edit...
Another option is to use the names property, as done here:
http://jsfiddle.net/jrdsxvys/40/
data: {
columns: [
['d1', 30],
['d2', 120]
],
type: 'pie',
labels: true,
names: {
d1: 'some name here',
d2: 'another name'
}
}
#agpt Yes. The names property is a good way to go generally because the first property of the columns data array eg 'd1' above is used when doing things like having multiple types on charts. eg for a bar and line combination using types instead of type: 'pie':
columns: [
['bar_1', 3, 8, 6],
['bar_2', 4, 0, 7],
['bar_3', 2, 3, 0]
],
types: {
bar_1: 'bar',
bar_2: 'line',
bar_3: 'bar'
},
names : {
bar_1: 'Initial',
bar_2: '3 month',
bar_3: '6 month'
}
So, using the names property allows you to use more 'dynamic' property names and be consistent throughout the config.
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.