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>
Related
I would like to scrape the data in this interactive graph:
The isolated address is here: https://s3-eu-west-1.amazonaws.com/cbhighcharts/Temperature+adjustments/raw+adjusted+temps.html
I could just copy all the values (they are displayed when hovering over them), but there must be a better way.
I realise it has been done using Highcharts, but the data is not embedded but comes from a protected google sheet:
data: {
googleSpreadsheetKey: '1Ni5_AvLB_6M3YMZBPp5WlQshIvLM-WwRaUMdT-p_agM',
startColumn: 0,
endColumn: 3,
complete: function(options) {
var series = options.series;
series[2].type = 'area';
series[2].lineWidth = 0;
series[2].zIndex = -1;
series[2].color = '#999999';
}
Any help how to get this into R?
Thanks!
Here the full html code:
<html>
<head>
<title>Graph: Surface and troposphere temps | Carbon Brief</title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<style>
#container1 {max-width: 800px; height: 600px;}
#logocontainer{ max-width: 800px; height: 26px;}
#logo {position: absolute; right:10px;}
#media screen and (min-width: 830px) {
#logo {
left: 778px;
}
}
</style>
<body>
<!-- you can set minimum dimensions for the chart here -->
<!-- for example swap the <div below for this version -->
<!-- <div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div> -->
<div id="container1"></div>
<div id="logocontainer">
<img id="logo" src="https://s3-eu-west-1.amazonaws.com/cbhighcharts/CB-logo-for-highcharts.png">
</div>
<script type="text/javascript">
$(function() {
Highcharts.setOptions({
// here is the CB colour scheme
// dark blue - 0b4572
// yellow - EFC530
// light blue - 2f8fce
// red - C7432B
// light grey - 999999
// lilac - A14A7B
// orange - DF9239
// this line sets the colours
// the first colour is for bottom chunk of a stacked column (reversed: false)
// here I've used a gradient of 15 steps from CB dark blue to red, via grey
// you can make your own gradient custom here:
// http://www.strangeplanet.fr/work/gradient-generator/?c=9:FFFFFF:000000
lang: {
thousandsSep: ','
},
chart: {
// set the font family for the chart. PT Serif is CB default for body text.
style: {
fontFamily: 'PT Sans'
}
}
});
// Create the chart
// type: 'column'
// creates column chart. See www.highcharts.com/demo/ for more options
// zoomType: 'x,y'
// allows the user to zoom in to the chart on the x and y axis
// you can set to allow x zoom or y zoom only
$('#container1').highcharts({
colors: ['#C7432B', '#2f8fce', '#A14A7B', '#DF9239', '#C7432B', '#999999', '#A14A7B', '#EFC530', '#999999', '#999999' ],
chart: {
renderTo: 'container1',
backgroundColor: 'transparent',
type: 'line',
zoomType: 'x,y'
},
title: {
text: 'Raw and Adjusted Land Temperatures',
align: 'left'
},
navigation: {
buttonOptions: {
enabled: false
}
},
credits: {
enabled: false
},
plotOptions: {
line: {
lineWidth: 3,
symbol: 'circle',
marker: {
enabled: false,
radius: 3
}
},
column: {
groupPadding: 0
}
},
// options for the y axis
yAxis: {
reversedStacks: false,
min: -1,
max: 1.5,
labels: {
style: {
fontSize: '12px'
},
format: '{value:,.1f}C'
},
title: {
text: ''
},
},
xAxis: {
// type: 'category',
crosshair: {
// width: 40,
// pale grey #E5E5E5
// black #000000
color: '#E5E5E5'
},
labels: {
style: {
fontSize: '12px'
}
}
},
tooltip: {
valueSuffix: 'C',
pointFormat: '{series.name}: <br/> <b>{point.y}</b><br/>',
// crosshairs: 'true'
shared: false
},
legend: {
// turn the legend on or off
enabled: true,
padding: 20,
// set the layout of the legend
layout: 'horizontal',
floating: false,
verticalAlign: 'top',
y: 20,
//x: 15,
},
data: {
googleSpreadsheetKey: '1Ni5_AvLB_6M3YMZBPp5WlQshIvLM-WwRaUMdT-p_agM',
startColumn: 0,
endColumn: 3,
complete: function(options) {
var series = options.series;
series[2].type = 'area';
series[2].lineWidth = 0;
series[2].zIndex = -1;
series[2].color = '#999999';
}
}
},
function(chart) { // on complete
});
});
</script>
</body>
</html>
You can scrape the chart data by running the below JS code. Highcharts is a global variable.
Highcharts.charts[0].userOptions.series
API Reference: https://api.highcharts.com/class-reference/Highcharts#.charts
I am working with kendoUI and angular. I have a Kendo Donut chart as follows.
<div class="center-pad" kendo-chart k-theme="['material']" k-chart-area="{height: 325, width: 480}"
k-series="[{ type: 'donut',
field: 'percentage',
labels: {visible: true, template: '${value} ${category} ${dataItem.color}', position: 'outsideEnd', font: '15px Lato-Regular'},
categoryField: 'source',
explodeField: 'explode'}]"
k-series-click="actionChartClick" k-data-source="actionChartData">
I want to have the series label color as the series color. In the template, I can access the template color by ${dataItem.color}
I tried setting,
k-series="[{ ...
labels: {visible: true, template: '${value} ${category}', position: 'outsideEnd', font: '15px Lato-Regular', color: '${dataItem.color}'}"
But that didn't work.
Can anyone guide me on where I should change?
Use seriesDefaults.labels.color or series.labels.color and return the desired color value from a function. You will have access to the series and dataItem in the function's argument.
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.labels.color
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/donut-charts/donut-labels">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.914/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
$(function() {
$("#chart").kendoChart({
title: {
text: "What is you favourite sport?"
},
legend: {
position: "top"
},
seriesDefaults: {
labels: {
template: "#= category # - #= kendo.format('{0:P}', percentage)#",
position: "outsideEnd",
visible: true,
background: "transparent",
color: function(e) {
// e.series
// e.dataItem
if (e.category == "Football") {
return "#000";
} else {
return e.series.color;
}
}
}
},
series: [{
type: "donut",
labels: {
/*color: function(e) {
// e.series
// e.dataItem
if (e.category == "Football") {
return "#f00";
} else {
return e.series.color;
}
}*/
},
data: [{
category: "Football",
value: 35
}, {
category: "Basketball",
value: 25
}, {
category: "Volleyball",
value: 20
}, {
category: "Rugby",
value: 10
}, {
category: "Tennis",
value: 10
}]
}],
tooltip: {
visible: true,
template: "#= category # - #= kendo.format('{0:P}', percentage) #"
}
});
});
</script>
</body>
</html>
I found a solution. This can be achieved by using k-options.
<div class="center-pad" kendo-chart k-theme="['material']" k-chart-area="{height: 325, width: 480}"
k-series="[{ type: 'donut',
field: 'percentage',
labels: {visible: true, template: '${value} ${category} ${dataItem.color}', position: 'outsideEnd', font: '15px Lato-Regular'},
categoryField: 'source',
explodeField: 'explode'}]"
k-series-click="actionChartClick" k-data-source="actionChartData"
k-options="chartOptions">
In the controller have following:
$scope.chartOptions = {
dataBound: function(e) {
e.sender.options.series[0].labels.color = function(element) {
return element.dataItem.color;
}
}
};
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);
}
I have having a problem with flot pie chart, its not showing correct percent value in tooltip, for example it shows series1:%p.0%
js code
var data = [{
label: "Series 0",
data: 1
}, {
label: "Series 1",
data: 3
}, {
label: "Series 2",
data: 9
}, {
label: "Series 3",
data: 20
}];
var plotObj = $.plot($("#flot-pie-chart"), data, {
series: {
pie: {
show: true
}
},
grid: {
hoverable: true
},
colors: ["#99c7ce","#efb3e6","#a48ad4","#AEC785","#fdd752"],
tooltip: true,
tooltipOpts: {
content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
shifts: {
x: 20,
y: 0
},
defaultTheme: false
}
});
Please help to resolve this.
thanks
You Need to include jquery.flot.tooltip.min.jsand change few setting as per below working example to display the tooltip with value.
datapie = [
{label: "Running", data: 19.5, color: '#e1ab0b'},
{label: "Stopped", data: 4.5, color: '#fe0000'},
{label: "Terminated", data: 36.6, color: '#93b40f'}
];
function legendFormatter(label, series) {
return '<div ' +
'style="font-size:8pt;text-align:center;padding:2px;">' +
label + ' ' + Math.round(series.percent)+'%</div>';
};
$.plot($("#placeholder"), datapie, {
series: {
pie: {show: true, threshold: 0.1,
// label: {show: true}
}
},
grid: {
hoverable: true
},
tooltip: true,
tooltipOpts: {
cssClass: "flotTip",
content: "%p.0%, %s",
shifts: {
x: 20,
y: 0
},
defaultTheme: false
},
legend: {show: true, labelFormatter: legendFormatter}
});
#flotTip {
padding: 3px 5px;
background-color: #000;
z-index: 100;
color: #fff;
opacity: .80;
filter: alpha(opacity=85);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.tooltip.min.js"></script>
<div id="placeholder" style="width:500px;height:400px;"></div>
Working Example Link : http://jsfiddle.net/Rnusy/335/
You need the Tooltip plugin.
See a complete list of available plugins here: Flot plugins
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.