Related
I used apexcharts.js for making chartbar on js. So i want to change cursor to pointer. help please! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
my-code!
var options = {
series: [{
name: 'series1',
data: [60, 85, 75, 120, 100, 109, 97]
}],
toolbar: {
show: false,
},
chart: {
height: 350,
type: 'area',
fontFamily: 'Proxima Nova',
toolbar: {
show: false
},
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
xaxis: {
categories: ["Янв", "Фев", "Март", "Апр", "Май", "Июнь", "Июль", "Авг", "Сен", "Окт", "Ноя", "Дек"]
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
I had encountered the same problem. I will present you two solutions:
1st method : Found on Github
You can set the cursor to point with:
chart: {
...
events: {
dataPointMouseEnter: function(event) {
event.path[0].style.cursor = "pointer";
}
}
}
See more details in this github link : https://github.com/apexcharts/apexcharts.js/issues/1466
2nd method : My own method
You can target the class name of the apexchart component via Inspector, then at the code level add the following property to this class :
cursor: pointer
Example :
// Change cursor on hover
.apexcharts-pie {
cursor: pointer;
}
I had same problem. Here is two solutions:
chart: {
width: 320,
type: ...,
events: {
dataPointMouseEnter: function(event) {
event.target.style.cursor = "pointer";
// or
event.fromElement.style.cursor = "pointer";
}
},
}
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 need to apply labels on top of chart following the columns just like the image (the numbers aside the text 'Resultado mês'):
Image of the desired result
Some help please?
The page is bellow (the labels need to go before the legends).
I've provided a HTML/CSS solution temporarily in the page bellow , but I'm waiting for the real solution:
http://www.pdagencia.com.br/porto/pages/10.3%20-%20consultar-dados-bancarios-01_v2.html#tab3
window.onload = function() {
var ctx = document.getElementById('ps-chart').getContext('2d');
var data = {
labels: ["Jan/18", "Fev/18", "Mar/18", "Abr/18", "Mai/18", "Jun/18", "Jul/18", "Ago/18", "Set/18", "Out/18", "Nov/18", "Dez/18"],
datasets: [{
label: "Entradas",
data: [650, 590, 800, 810, 560, 550, 400, 800, 810, 560, 550, 400],
backgroundColor: '#33bfff'
},
{
label: "Saídas",
data: [-280, -480, -400, -190, -860, -270, -900, -400, -190, -860, -270, -900],
backgroundColor: '#E75A5B'
}
]
}
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
responsive: false,
plugins: {
datalabels: {
formatter: function(value, context) {
return context.dataset.data[context.dataIndex].toLocaleString('pt-BR', {
style: 'currency',
currency: 'BRL'
});
}
}
},
legend: {
display: true,
},
tooltips: {
"enabled": false
},
scales: {
yAxes: [{
display: false,
ticks: {
display: false
}
}],
xAxes: [{
stacked: true,
barPercentage: 1.2,
gridLines: {
display: false
}
}]
}
}
});
}
<script src="https://github.com/chartjs/Chart.js/releases/download/v2.7.2/Chart.bundle.min.js"></script>
<script src="https://github.com/chartjs/chartjs-plugin-datalabels/releases/download/v0.3.0/chartjs-plugin-datalabels.min.js"></script>
<canvas id="ps-chart" style="width:100%"></canvas>
I am new to the chart js and javascript.
As I have faced the same problem, I wanted to display the sum of two values into the label,
I got some solution for the same as below.
Maybe it can help you.
Check it out:
http://www.chartjs.org/samples/latest/tooltips/callbacks.html
tooltips: {
mode: 'index',
callbacks: {
// Use the footer callback to display the sum of the items
showing in the tooltip
footer: function(tooltipItems, data) {
var sum = 0;
tooltipItems.forEach(function(tooltipItem) {
sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
});
return 'Sum: ' + sum;
},
},
footerFontStyle: 'normal'
},
hover: {
mode: 'index',
intersect: true
},
I want to show only one chart after the page load and then you can select a chart in the dropdown menu. The issues is when I add the class display:none; the graph won't load when selected in the dropdown.
How can I solve this?
<select id='chart-graph-progress'>
<option value="revenue-opt">Revenue</option>
<option value="rpu-opt">Revenue per user</option>
</select>
<div class="card2 full-chart-topmargin" id='revenue'>
<div class="big-text1-blue text-center">
Revenue
</div>
<div class="card-block">
<div class="chart-wrapper fullsize">
<canvas id="revenue-chart"></canvas>
</div>
</div>
</div>
<div style="display:none;" class="card2 full-chart-topmargin" id='rpu'>
<div class="big-text1-blue text-center">
Revenue per user
</div>
<div class="card-block">
<div class="chart-wrapper fullsize">
<canvas id="rpu-chart"></canvas>
</div>
</div>
</div>
Here is my custom.js file.
$(document).ready(function(){
$('#chart-graph-progress').on('change', function() {
if ( this.value == 'revenue-opt')
{
$("#revenue").show();
}
else
{
$("#revenue").hide();
}
});
$('#chart-graph-progress').on('change', function() {
if ( this.value == 'rpu-opt')
{
$("#rpu").show();
}
else
{
$("#rpu").hide();
}
});
});
Chart.js
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
datasets : [
{
label: 'Revenue',
labelColor : '#fff',
fontColor : '#fff' ,
backgroundColor : 'rgba(220,220,220,0.2)',
borderColor : 'rgba(220,220,220,1)',
pointBackgroundColor : 'rgba(220,220,220,1)',
pointBorderColor : '#fff',
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
};
var options = {
maintainAspectRatio: false,
legend: {
display: false,
},
scales: {
xAxes: [{
gridLines: {
display: false,
color: '#03A5C5',
lineWidth: 8,
},
ticks: {
fontColor: "white",
},
}],
yAxes: [{
gridLines: {
display: false,
color: '#03A5C5',
lineWidth: 8,
},
ticks: {
fontColor: "white",
beginAtZero: true,
}
}]
}
};
var ctx = document.getElementById('revenue-chart');
var chart = new Chart(ctx, {
responsive: true,
type: 'line',
data: lineChartData,
options: options
});
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
datasets : [
{
label: 'Revenue',
labelColor : '#fff',
fontColor : '#fff' ,
backgroundColor : 'rgba(220,220,220,0.2)',
borderColor : 'rgba(220,220,220,1)',
pointBackgroundColor : 'rgba(220,220,220,1)',
pointBorderColor : '#fff',
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
};
var options = {
maintainAspectRatio: false,
legend: {
display: false,
},
scales: {
xAxes: [{
gridLines: {
display: false,
color: '#03A5C5',
lineWidth: 8,
},
ticks: {
fontColor: "white",
},
}],
yAxes: [{
gridLines: {
display: false,
color: '#03A5C5',
lineWidth: 8,
},
ticks: {
fontColor: "white",
beginAtZero: true,
}
}]
}
};
var ctx = document.getElementById('rpu-chart');
var chart = new Chart(ctx, {
responsive: true,
type: 'line',
data: lineChartData,
options: options
});
If you are using ChartJS 1, then look at the first possible fixes below. If you are using ChartJS 2, then apparently this bug has been fixed (GitHub issue #762). However, after some long debugging I found out that when display: none; is used with maintainAspectRatio: false, some times the height of the graph is squashed to none, which I think it's your problem here. I have logged an issue for this.
Possible fixes (1 is very simple, so you might want to try that):
1. Use jQuery to initially hide the containers
Remove the style="display:none;" from the #rpu div:
<div class="card2 full-chart-topmargin" id='rpu'>
Use jQuery to hide it initially:
$(document).ready(function(){
$("#rpu").hide();
// ...
});
2. Use fixed size canvases
Set both canvas to some fixed size:
<canvas id="revenue-chart" width="600" height="400"></canvas>
<canvas id="rpu-chart" width="600" height="400"></canvas>
Then use maintainAspectRatio: true instead:
var options = {
maintainAspectRatio: true,
// ...
};
In the html, on the element with the id='rpu' try to add "opacity: 0" instead of "display: none", and in the custom.js file instead of show and hide change to:
$(document).ready(function(){
$('#chart-graph-progress').on('change', function() {
if ( this.value == 'revenue-opt')
{
$("#revenue").css("opacity", "1");
}
else
{
$("#revenue").css("opacity", "0");
}
});
$('#chart-graph-progress').on('change', function() {
if ( this.value == 'rpu-opt')
{
$("#rpu").css("opacity", "1");
}
else
{
$("#rpu").css("opacity", "0");
}
});
});
I am pretty sure that the issue is that the chart is not initialized on a display: none element. So we're trying to hide the element by opacity:0.
I hope it helps!
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