I'm using jQuery flot pie chart, I used embedded labels in interactive pie chart. When I click on one of the sectors in pie chart it shows alert but when I click on label that is embedded in the sector it doesn't respond to the click action. Is there is any solution for this?
My source code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.pie.min.js"></script>
<!-- CSS -->
<style type="text/css">
#flotcontainer {
width: 600px;
height: 400px;
text-align: left;
}
</style>
<!-- Javascript -->
<script type="text/javascript">
$(function () {
var data = [
{label: "data1", data:10},
{label: "data2", data: 20},
{label: "data3", data: 30},
{label: "data4", data: 40},
{label: "data5", data: 50},
{label: "data6", data: 60},
{label: "data7", data: 70}
];
var options = {
series: {
pie: {
show: true,
radius: 1,
tilt: 0.5,
label:{
radius: 3/4,
formatter: function (label, series) {
return '<div style="border:1px solid gray;font-size:8pt;text-align:center;padding:5px;color:white;">' + label + '<br/>' +
Math.round(series.percent) + '%</div>';
},
background: {
opacity: 0.5,
color: '#000'
}
}
}
},
legend: {
show: false
},
grid: {
hoverable: true,
clickable: true
}
};
$.plot($("#flotcontainer"), data, options);
$("#flotcontainer").bind("plothover", function(event, pos, obj){
if (!obj){return;}
percent = parseFloat(obj.series.percent).toFixed(2);
var html = [];
html.push("<div style=\"flot:left;width:105px;height:20px;text-align:center;border:1px solid black;background-color:", obj.series.color, "\">",
"<span style=\"font-weight:bold;color:white\">", obj.series.label, " (", percent, "%)</span>",
"</div>");
$("#showInteractive").html(html.join(''));
});
$("#flotcontainer").bind("plotclick", function(event, pos, obj){
if (!obj){return;}
percent = parseFloat(obj.series.percent).toFixed(2);
alert(obj.series.label + " ("+ percent+ "%)");
});
});
</script>
<!-- HTML -->
<div>
Hover percent : <span id="showInteractive"></span>
</div>
<div id="flotcontainer"></div>
If you want to try it, you can use this editor
http://plnkr.co/edit/LvUuMYIYUAi3RZRYGSjV?p=preview
Another option here is to manually pass the event down:
$('.pieLabel').bind('click',function(e){
$("#flotcontainer .flot-overlay").trigger(e);
});
Any click on a pie label will now manually call a click event on flot's overlay canvas. This will in turn call into the plotclick event.
Updated plunkr
You can add $(".pieLabel").click(function() { alert("clicked"); }); to get the clicks on the pie labels
Sample:
$("#flotcontainer").bind("plotclick", function(event, pos, obj){
if (!obj){return;}
alert('hello');
});
$(".pieLabel").click(function() { alert("clicked"); });
Other solution to use your series info: add a call to a custom function when you define the legend (onclick on the div), and pass the right parameters:
series: {
pie: {
show: true,
radius: 1,
tilt: 0.5,
label:{
radius: 3/4,
formatter: function (label, series) {
return '<div onclick="legendClicker(' + series.percent + ');" style="border:1px solid gray;font-size:8pt;text-align:center;padding:5px;color:white;">' + label + '<br/>' +
Math.round(series.percent) + '%</div>';
},
background: {
opacity: 0.5,
color: '#000'
}
}
}
},
And the function:
function legendClicker(info) {
// Do what you want
alert("legend click / " + info);
}
Related
I have a fixed size horizontal bar chart with rather long labels.
Main Question:
The label with the biggest data always gets cut off.
Additional Question (only nice to have.. ;) Is it possible in C3 to add margin between the bars?
Example with labels been cut off:
var colors = ['#0065A3', '#767670', '#D73648', '#7FB2CE', '#00345B'];
var padding = 5;
data= [
['veryveryveryveryverylongdatalabel01', 439034],
['veryveryveryveryverylongdatalabel02', 413664],
['veryveryveryveryverylongdatalabel03', 351376],
['veryveryveryveryverylongdatalabel04', 349932],
['veryveryveryveryverylongdatalabel05', 316490],
['veryveryveryveryverylongdatalabel06', 315039],
['veryveryveryveryverylongdatalabel07', 285908],
['veryveryveryveryverylongdatalabel08', 285681],
['veryveryveryveryverylongdatalabel09', 285215],
['veryveryveryveryverylongdatalabel10', 203248],
['veryveryveryveryverylongdatalabel11', 200508],
['veryveryveryveryverylongdatalabel12', 195508],
['veryveryveryveryverylongdatalabel13', 195058],
['veryveryveryveryverylongdatalabel14', 193508],
['veryveryveryveryverylongdatalabel15', 185508],
['veryveryveryveryverylongdatalabel16', 180508],
['veryveryveryveryverylongdatalabel17', 177508]
];
var totalDataValue = 0
data.forEach(function(d){
totalDataValue+=d[1];
});
var chart1 = c3.generate({
bindto: d3.select('#chart1'),
data: {
columns: data,
type: 'bar',
labels: {format : function(v, id) {return id + ": " + d3.format(",.0f")(v) + " ["+d3.format(".2%")(v/totalDataValue)+"]"; }}
},
bar: {
width: { ratio: 1}
},
legend: {
show: false,
},
tooltip: {
show: true,
format: {
value: function(value) {
return d3.format(",.0f")(value);
}
}
},
zoom: {
enabled: true
},
axis: {
x: {
show:false,
type:'category',
categories: ['value1']
},
y: {
show:false
},
rotated: true
}
});
#chart1 {
width: 600px;
height: 400px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.10/c3.min.css" rel="stylesheet" />
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.10/c3.min.js"></script>
<div id="chart1" class "c3">
</div>
It seems to be an internal C3 sizing issue.
Am I right there?
Is there a way to prevent the labels from beeing cut off?
thank you
You can set Y Axis top padding.
axis: {
y: {
padding : {
top: 430
}
},
rotated: true
}
You can also calculate top padding value based on length of largest label.
You could add an empty space by using a couple of "\u00A0" at the end of your labels format function:
data: {
labels: {format : function(v, id) {return id + ": " + d3.format(",.0f")(v)
+ " ["+d3.format(".2%")(v/totalDataValue)+"]"+"\u00A0\u00A0\u00A0\u00A0\u00A0"; }}
},
To set some space between the bars, add the bar.space parameter:
bar: {
space: 0.2
}
Below the code sipped:
var colors = ['#0065A3', '#767670', '#D73648', '#7FB2CE', '#00345B'];
var padding = 5;
data= [
['veryveryveryveryverylongdatalabel01', 439034],
['veryveryveryveryverylongdatalabel02', 413664],
['veryveryveryveryverylongdatalabel03', 351376],
['veryveryveryveryverylongdatalabel04', 349932],
['veryveryveryveryverylongdatalabel05', 316490],
['veryveryveryveryverylongdatalabel06', 315039],
['veryveryveryveryverylongdatalabel07', 285908],
['veryveryveryveryverylongdatalabel08', 285681],
['veryveryveryveryverylongdatalabel09', 285215],
['veryveryveryveryverylongdatalabel10', 203248],
['veryveryveryveryverylongdatalabel11', 200508],
['veryveryveryveryverylongdatalabel12', 195508],
['veryveryveryveryverylongdatalabel13', 195058],
['veryveryveryveryverylongdatalabel14', 193508],
['veryveryveryveryverylongdatalabel15', 185508],
['veryveryveryveryverylongdatalabel16', 180508],
['veryveryveryveryverylongdatalabel17', 177508]
];
var totalDataValue = 0
data.forEach(function(d){
totalDataValue+=d[1];
});
var chart1 = c3.generate({
bindto: d3.select('#chart1'),
data: {
columns: data,
type: 'bar',
labels: {format : function(v, id) {return id + ": " + d3.format(",.0f")(v) + " ["+d3.format(".2%")(v/totalDataValue)+"]"+"\u00A0\u00A0\u00A0\u00A0\u00A0"; }}
},
bar: {
width: { ratio: 1},
space: 0.2
},
legend: {
show: false,
},
tooltip: {
show: true,
format: {
value: function(value) {
return d3.format(",.0f")(value);
}
}
},
zoom: {
enabled: true
},
axis: {
x: {
show:false,
type:'category',
categories: ['value1']
},
y: {
show:false
},
rotated: true
}
});
#chart1 {
width: 600px;
height: 400px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.10/c3.min.css" rel="stylesheet" />
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.10/c3.min.js"></script>
<body>
<br><br>
<div id="chart1" class "c3">
I found a solution for preventing the labels from being cut-off.
Please see my following post on this:
Calculate padding for C3js horizontal bar charts
It's based on using global chart padding instead of using y-axis padding and turning off clip-path
I'm trying to create a bar chart using C3 and D3 but I'm having trouble getting the columns to be unrelated to each other, other than for the fact that they use the same scale on the Y-axis.
I've included images to better explain.
var chart = c3.generate({
bindto: '#designerChart',
data: {
columns: [
['MA', 6],
['ME', 8],
['NY', 6],
['CN', 5],
['TX', 2]
],
type: 'bar',
},
axis: {
y: {
max: 10,
min: 0,
padding: { top: 0, bottom: 0 }
}
}
});
Results in a group of bars and when I hover over them I get the details for all the bars - not what I want.
I can change the data, so that it displays separate columns, but they are the same color and when I want to transition it to a pie chart you can't distinguish between the states.
var chart = c3.generate({
bindto: '#designerChart',
data: {
x: 'x',
columns: [
['x','MA', 'ME', 'NY', 'CN', 'TX'],
['rainfall', 6, 8, 6, 5, 4 ]
],
type: 'bar',
},
axis: {
x: {
type: 'category'
},
y: {
max: 10,
min: 0,
padding: { top: 0, bottom: 0 }
}
}
});
This is what I want:
Bar chart solution:
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>C3 Bar Chart</title>
</head>
<body>
<div id="designerChart"></div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
columnColors = ['#9a4d6f', '#c76c47', '#f85115', '#d9b099', '#d4ba2f'];
function setColumnBarColors(colors, chartContainer) {
$('#' + chartContainer + ' .c3-chart-bars .c3-shape').each(function(index) {
this.style.cssText += 'fill: ' + colors[index] + ' !important; stroke: ' + colors[index] + '; !important';
});
$('#' + chartContainer + ' .c3-chart-texts .c3-text').each(function(index) {
this.style.cssText += 'fill: ' + colors[index] + ' !important;';
});
}
var chart = c3.generate({
bindto: '#designerChart',
data: {
columns: [
['rainfall', 6, 8, 6, 5, 4]
],
type: 'bar'
},
axis: {
x: {
label: {
text: 'States',
position: 'outer-center',
},
type: 'category',
categories: ['MA', 'ME', 'NY', 'CN', 'TX'],
tick: {
centered: true
}
},
y: {
label: {
text: 'Rainfall (inches)',
position: 'outer-middle'
},
max: 10,
min: 0,
padding: {
top: 0,
bottom: 0
}
}
},
legend: {
show: false
}
});
setColumnBarColors(columnColors, 'designerChart');
// Color turns to original when window is resized
// To handle that
$(window).resize(function() {
setColumnBarColors(columnColors, 'designerChart');
});
});
</script>
</body>
</html>
Colors turn to original in this fiddle (Full Page). But it changes colors as aspected on working local files , and local references of c3 , d3 ,and jquery.
References:
setColumnBarColors function:
jzcor...#gmail.com
https://groups.google.com/forum/
http://c3js.org/gettingstarted.html
http://c3js.org/samples/axes_x_tick_format.html
http://c3js.org/reference.html
My goal is to display two small Highchart line charts (height:100px;) inside of a Mapbox pop-up. I have two divs inside the HTML to hold the charts, which as is shown in the image below appear to take the charts because the axes are showing up just fine.
The thing that is perplexing me is that the series and markers are not displaying, save for half of the first marker that is split by the y-axis. When inspecting the Highchart element in Chrome, all paths for the markers and series appear to be in the right location and are marked as visibility="visible".
Has anyone run into a similar issue?
UPDATE: Live Demo - http://jsfiddle.net/calanoue/tf95sLsu/
<head lang="en">
<title></title>
</head>
<body>
<div id='map'></div>
<script>
...
</script>
</body>
I try with this solution, may it will help you,
JSFiddle
HTML:
<head lang="en">
<title></title>
</head>
<body>
<div id='map'></div>
</body>
CSS:
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.sparkline {
height: 100px;
width: 200px;
}
jQuery:
L.mapbox.accessToken = 'pk.eyJ1IjoibmF1dGlseXRpY3MiLCJhIjoidG5tdktlMCJ9.Ktr2w0QzGrAN2UNtrJJziw';
var map = L.mapbox.map('map', 'nautilytics.icjmd18i').setView([37.8, -96], 4);
var myLayer = L.mapbox.featureLayer().addTo(map);
var portGeoJSON = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.0047538280487, 40.7590498275021]
},
"properties": {
"title": "NEW YORK",
"est_value": 13639833,
"marker-color": "#0000ff",
"marker-size": "medium",
"marker-symbol": "harbor"
}
}]
};
var lineChartOptions = {
title: {
text: null
},
legend: {
enabled: false
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
tooltip: {
backgroundColor: {
linearGradient: [0, 0, 0, 60],
stops: [
[0, '#FFFFFF'],
[1, '#E0E0E0']
]
},
borderWidth: 1,
useHTML: true,
borderColor: '#AAA'
},
yAxis: {
min: 0,
lineWidth: 1,
tickWidth: 1,
title: {
text: null
},
labels: {
style: {
'fontSize': '10px'
}
}
},
xAxis: {
type: 'datetime',
labels: {
style: {
'fontSize': '10px'
}
}
},
plotOptions: {
series: {
cursor: 'pointer',
connectNulls: false
}
}
};
myLayer.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;
lineChartOptions.tooltip.formatter = function() {
var y = "$" + this.y;
return '<center>' + Highcharts.dateFormat('%b \'%y', new Date(this.x)) + '</center></b><center><b>' + y + '</b></center>';
};
lineChartOptions.series = [{
pointInterval: 24 * 3600 * 1000 * 30.41667,
pointStart: 1393632000000,
data: [
58044, 60871, 29738, null, 804997, 628727, 20678, null,
100606, 122195, 981459, 39840]
}];
// HTML content for pop-up
var popupContent = '<div id="popup_template">' +
'<div class="port_header marker-title">' +e.layer.feature.properties.title.toUpperCase() +'</div>' +
'<div class="est_value marker-title">'+
'Est. Value: $' + e.layer.feature.properties.est_value
+'</div>' +
'<div id="est_value_sparkline" class="sparkline"></div>';
var container = $('<div id="popup_template"/>');
container.html( '<div class="port_header marker-title">' +e.layer.feature.properties.title.toUpperCase() +'</div>' +
'<div class="est_value marker-title">'+
'Est. Value: $' + e.layer.feature.properties.est_value
+'</div>' +
'<div id="est_value_sparkline" class="sparkline"></div>');
// Delegate all event handling for the container itself and its contents to the container
container.find('#est_value_sparkline').highcharts(lineChartOptions);
marker.bindPopup(container[0]);
});
myLayer.setGeoJSON(portGeoJSON);
Now i am playing with dojo column chart and stacked chart.It works fine when the Page loads. When I hover over different stacked fields and can't get the tool tip displayed.So please request to your how can show my tooltips on mouse hover with respected series name .Here is my js fiddle [link][ http://jsfiddle.net/kairi/S4tH2/ ] .
So kindly request to you how can i show my tooltips on mouse over with respective fields.
So here is my code is
require(["dojox/charting/Chart",
"dojox/charting/plot2d/Lines",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/StackedColumns",
"dojox/charting/action2d/Tooltip",
"dojo/ready",
"dojox/charting/widget/SelectableLegend"],
function(Chart, Lines, Default, StackedColumns, Tooltip, ready, SelectableLegend) {
ready(function() {
var chart1 = new Chart("chart1");
chart1.title = "stacked chart";
chart1.addPlot("stackedColumnsPlot", {
type: StackedColumns,
gap:6,
lines: true,
areas: true,
markers: true,
labels: true,
labelStyle:"inside",
//maxBarSize: 35,
tension: "2"
});
chart1.addAxis("x", {
dropLabels: false,
labelSizeChange: true,
rotation:-20,
majorTicks:true,
majorTickStep:1,
minorTicks:false,
font: "normal normal bold 12px Tahoma",
fontColor: "black",
labels: [{"value":1,"text":"A"},{"value":2,"text":"B"},{"value":3,"text":"C"},{"value":4,"text":"D"},{"value":5,"text":"E"},{"value":6,"text":"F"}]
});
chart1.addAxis("y", {title:"Cost",
fixLower: "major",
fixUpper: "major",
includeZero: true,
majorTickStep:500,
max: 7000,
//from:1000,
//to:6000,
vertical: true
});
chart1.addSeries("AC",[3000,5000,5500,6000,1300,8280] ,
{
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF" ,
},
fill: "#FFAEAE "
});
chart1.addSeries("TV", [2844,7301,6699,620,820,9683] , {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#FFEC94"
});
chart1.addSeries("ACCE", [5000,1000,1000,1000,2500,2500] , {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#B4D8E7"
});
chart1.addSeries("OTHER", [1500,150,1500,700,7000,0,8000,1300,1300] , {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#56BAEC"
});
new Tooltip(chart1, "stackedColumnsPlot", {
text: function(chartItem) {
console.debug(chartItem);
//return "Rating: " + chartItem.run.data[chartItem.index] + "; Total Value: " + chartItem.y;
// return "Comparision Rating: " + chartItem.y;
return "Value: " + chartItem.run.data[chartItem.index] + "; Stacked Value: " + chartItem.y;
}
});
chart1.render();
new SelectableLegend({
chart: chart1,
horizontal: true,
align:top
}, "chart1SelectableLegend");
});
});
Here i want different different tooltips for different different series.So how it is possible.
You're just missing the dojo css and the body class attribute.
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" type="text/css">
<body class="claro">
<div data-dojo-type="dojox.charting.widget.Chart" id="chart1" style="width: 800px; height: 450px;">
</div>
<div id="chart1SelectableLegend"></div>
</body>
If only one record in data then pie chart not display. I'm using Flot chart.
<script type='text/javascript'>
$(function () {
var data = [{
label: "Series1",
data: 1
}, ];
$.plot($("#graph11"), data, {
series: {
pie: {
show: true,
radius: 1,
tilt: 0.5,
label: {
show: true,
radius: 1,
formatter: function (label, series) {
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
},
background: {
opacity: 0.8
}
},
combine: {
color: '#999',
threshold: 0.1
}
}
},
legend: {
show: false
}
});
});
</script>
When only one record in data then pie chart not display.
Code looks fine.
Except
If you are running this in older versions of IE (<=7):
var data = [{
label: "Series1",
data: 1
}, ]; // <--remove the trailing comma
It'll die on the trailing comma.