I am trying to use Raphael and jQuery UI. A very simple example of my problem involves a simple button which opens a jQuery dialog.
Inside that dialog I am using a Raphael paper to draw a list of texts from an array, overlaid by some transparent rectangles assigned with a click event.
I don't know how to create a jsfiddle for this example, therefore pasting my code below.
First, the html part:
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css"/>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.3.min.js"></script>
<script type="text/javascript" src="js/raphael-2.1.2.min.js"></script>
<script type="text/javascript" src="js/jscode.js"></script>
</head>
<body>
<div><button id="fireit">Open</button></div>
<div id="content"></div>
</body>
</html>
Next, the jscode.js part:
$( function() {
$("#content").dialog({
position: {my: "left top", at: "left+5px top+40px", of: window},
title: "A title",
width: 350,
height: 375,
resizable: false,
closeOnEscape: true,
autoOpen: false
});
var paper_content = Raphael("content", 300, 30);
var info = ["foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo"];
paper_content.setStart();
var texts = paper_content.setFinish();
function print_texts() {
texts.remove();
var i;
var row = 10;
paper_content.setStart();
for (i = 0; i < info.length; i++) {
paper_content.text(25, row, info[i])
.attr({'text-anchor': 'start', 'font-size': '14px'});
row += 20;
}
row = 10;
var somerect;
for (i = 0; i < info.length; i++) {
somerect = paper_content
.rect(5, row - 10, 500, 20)
.attr({fill: "#acadea", 'stroke-opacity': '0.5', 'fill-opacity': 0.5});
somerect.id = i;
somerect.click(function() {
alert(info[this.id]);
})
row += 20;
}
texts = paper_content.setFinish();
}
$("#fireit").click(function() {
print_texts();
$(paper_content.canvas).height(texts.getBBox().height + 20);
$("#content").dialog("open");
})
});
The click function triggers the print_texts() function, and since what Raphael printed is taller than the paper, the paper canvas gets resized.
The problem appears when firing the button: the texts printed by Raphael are not where they were supposed to be...!
A second click on the button magically arranges them in the right order.
Now the question: how can I overcome this? I need to have the correct order from the first click.
Thanks in advance for any hint,
Adrian
As usual, once obtaining a minimal example, the answer pops up by itself.
The point was to first open the dialog and only then to run the other instructions:
$("#fireit").click(function() {
$("#content").dialog("open");
print_texts();
$(paper_content.canvas).height(texts.getBBox().height + 20);
})
Related
The legend labels are not in the DOM when using time series data.
I have around 1500 data points. Here is reduced it to 3 because it seems like the amount of data points is not the cause of the issue.
Is this a bug or did I misconfigure something?
I also tried using a separate div for the legend (like described here but it seems to have no effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AmCharts</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="http://cdn.date-fns.org/v2.0.0-alpha0/date_fns.min.js"></script>
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<style>
html, body {
font-size: 16px;
}
#chartdiv,
#legenddiv {
width: 100%;
height: 500px;
border: 1px dotted #c99;
margin: 1em 0;
}
#legenddiv {
height: 150px;
}
</style>
</head>
<body>
<div id="chartdiv"></div>
Legend:
<div id="legenddiv"></div>
<script src="./main.js"></script>
</body>
</html>
am4core.ready(function () {
am4core.useTheme(am4themes_animated); // theming
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [{
"date": 1574861644000,
"value": 13505
},
{
"date": 1574861645000,
"value": 13505
},
{
"date": 1574861645000,
"value": 13492
}];
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.baseInterval = { timeUnit: "second", count: 1 };
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.tooltipText = "{value}";
series.tooltip.pointerOrientation = "vertical";
chart.cursor = new am4charts.XYCursor();
chart.cursor.snapToSeries = series;
chart.cursor.xAxis = dateAxis;
// create a legend for the sensors
chart.legend = new am4charts.Legend();
let legendContainer = am4core.create("legenddiv", am4core.Container);
legendContainer.width = am4core.percent(100);
legendContainer.height = am4core.percent(100);
chart.legend.parent = legendContainer;
}); // end am4core.ready()
By default the legend will look at the series' name property to use as the legend label as documented here. Adding this to your series will fix the problem, e.g. series.name = "Series #1"
I am trying to get the selected value of a Google Table Chart. When the chart content is not filtered using the string filter, it returns the index of the selected row according to the DataTable, but when it is filtered using the string filter, it doesn't returns the correct issue.
To replicate the issue please do the following code
1. Run the below code
Select Aaron in the table. A message box will display its index as 5.
Type letter 'A' in the string filter. Now select the Aaron, it will return 0 which is a bug.
It should return the index of the row in the data table for 'Aaron' which is 5
<!DOCTYPE html>
<html>
<head>
<title>Google Developers</title>
<link rel="stylesheet" type="text/css" href="/_static/07491c0cdc/css/screen-docs.css" />
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400" type="text/css">
<script src="/_static/07491c0cdc/js/prettify-bundle.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script id="jqueryui" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer async></script>
<script src="http://www.google.com/jsapi?key=AIzaSyCZfHRnq7tigC-COeQRmoa9Cxr0vbrK6xw"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="/_static/07491c0cdc/js/framebox.js"></script>
</head>
<body class="docs slim framebox_body">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="stringFilter_dashboard_div" style="border: 1px solid #ccc">
<div id="stringFilter_control_div" style="padding-left: 2em"></div>
<div id="stringFilter_chart_div"></div>
</div>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart', 'table', 'gauge', 'controls']});
google.setOnLoadCallback(apiLoaded);
function apiLoaded() {
drawStringFilter();
}
function drawStringFilter() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('stringFilter_dashboard_div'));
var control = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'stringFilter_control_div',
'options': {
'filterColumnIndex': 0
}
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'stringFilter_chart_div',
'options': {'height': '25em', 'width': '20em'}
});
google.visualization.events.addListener(chart,'select',tableSelectHandler);
function tableSelectHandler(){
var selectedItem = chart.getChart().getSelection()[0];
alert(selectedItem.row);
}
var data = google.visualization.arrayToDataTable([
['Name', 'Age'],
['Michael' , 12],
['Elisa', 20],
['Robert', 7],
['John', 54],
['Jessica', 22],
['Aaron', 3],
['Margareth', 42],
['Miranda', 33]
]);
dashboard.bind(control, chart);
dashboard.draw(data);
}
</script>
<script>
devsite.github.Link.convertAnchors();
window.prettyPrint();
</script>
</body>
</html>
This should work:
function tableSelectHandler(e){
var selectedItem = chart.getChart().getSelection()[0];
var true_selected = chart.getDataTable().getTableRowIndex(selectedItem.row)
alert(true_selected);
}
getTableRowIndex traces the row back to the datatable
Expanding on juvian's answer, you should test the selection length before trying to access any elements in the array, as the array may be empty (or contain multiple elements if more than one row is selected):
function tableSelectHandler(e){
var selection = chart.getChart().getSelection();
var dt = chart.getDataTable();
for (var i = 0; i < selection.length; i++) {
// colIndex is the index of the column you want to get data from
var value = dt.getValue(selection.row, colIndex);
}
}
<script type="text/javascript" src="raphael.js"></script>
<script>
var paper = new Raphael("holder", 320, 200);
function testPaper(){
var width10 = paper.width * 0.1;
var height10 = paper.height * 0.1;
var width80 = paper.width * 0.8;
var height80 = paper.height * 0.8
var c = paper.rect( width10, height10, width80, height80, Math.min( width10, height10 ) );
}
</script>
</head>
<body onload = "testPaper()">
<div id="holder"></div>
</body>
What's wrong with the above code? I've been trying to get Raphael working for over an hour now & it always complains:
Uncaught TypeError: Cannot read property 'x' of undefined raphael.js:11
The script that uses Raphael is probably running before the "holder" element has been created.
Either create the Raphael in a ready/onload event or trivially arrange the HTML like so:
<body>
<div id="holder"></div> <!-- also use correct closing tag -->
<script src="raphael.js"></script>
<script>
var paper = new Raphael("holder", 320, 200);
// ..
</script>
</body>
I had the same problem using draw2d library in Angular. I couldn't initialize the canvas. It's worth to note that the element MUST have the same name as the initialized canvas.
I did compare my code to the example code from Google and I couldn't find anything different. I have no idea why my chart only display 2 data columns instead of 3. Is it because of my browser (I'm using Chrome) ? I tried with IE and had the same problem.
Google's example code:Example
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Chart</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('visualization', '1', {packages: ['corechart']});</script>
<script type="text/javascript">
function drawVisualization2() {
var data = google.visualization.arrayToDataTable([
['Day', 'V5161.198', 'V5161.200', 'V5161.202'],
['27/09/2013', 4.0, 9.0, 4.0],
['29/09/2013', 5.0, 8.0, 4.0]
]);
var options = {title : 'Daily usage of heaters',
vAxis: {title: "Minutes"},
hAxis: {title: "day"},
seriesType: "bars",
series: {2: {type: "line"}} // This is not the root of the problem. If I change it to 3, the chart can be displayed normally but it will not have the average line anymore.
};
var chart = new google.visualization.ComboChart(document.getElementById('chart2_div'));chart.draw(data, options);}google.setOnLoadCallback(drawVisualization2);
</script>
</head>
<body>
<div id="chart2_div" style="width: 1100px; height: 500px;"></div>
</body>
</html>
Can anyone give me an advise ?
Thank you very much.
You say in the comments of your code on this line: series: {2: {type: "line"}}
This is not the root of the problem. If I change it to 3, the chart can be displayed normally but it will not have the average line anymore.
The Orange Line is not an average of the values of the three fields. It is the third column of data formatted as a line (not a bar). If you want to have an average line, this code works:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Chart</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('visualization', '1', {packages: ['corechart']});</script>
<script type="text/javascript">
function drawVisualization2() {
var data = google.visualization.arrayToDataTable([
['Day', 'V5161.198', 'V5161.200', 'V5161.202'],
['27/09/2013', 4.0, 9.0, 4.0],
['29/09/2013', 5.0, 8.0, 4.0]
]);
data.addColumn('number', 'Average');
var average = 0;
for (var i = 0; i < data.getNumberOfRows(); i++){
average = 0;
for (var j = 1; j < data.getNumberOfColumns(); j++){
average = average + data.getValue(i, j);
}
average = average / 3;
data.setValue(i,4,average);
}
var options = {title : 'Daily usage of heaters',
vAxis: {title: "Minutes"},
hAxis: {title: "day"},
seriesType: "bars",
series: {3: {type: "line"}} // This is not the root of the problem. If I change it to 3, the chart can be displayed normally but it will not have the average line anymore.
};
var chart = new google.visualization.ComboChart(document.getElementById('chart2_div'));chart.draw(data, options);}google.setOnLoadCallback(drawVisualization2);
</script>
</head>
<body>
<div id="chart2_div" style="width: 1100px; height: 500px;"></div>
</body>
</html>
I'm trying to implment this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href="http://<?=$_SERVER['HTTP_HOST'];?>/" /> </head> </html> <body> <script language="javascript" type="text/javascript" src="http://www.google.com/jsapi"></script> <script type='text/javascript'> google.load('visualization', '1', { 'packages': ['geochart'] }); var dataRows; var mapOptions = { colors: ['#FF6F28', '#FFD7C4'], backgroundColor: {
stroke: '#ffffff',
strokeWidth: 0,
fill: '#ffffff' }, width: 500, height: 312, region: 'US', resolution: 'provinces' }; dataRows = [['UT',0],['Texas',1],['California',2],['New York',3]];
function initGlobalMap() { var mapData = new google.visualization.DataTable(); mapData.addColumn('string', 'Region'); mapData.addColumn('number', 'ID'); mapData.addRows(dataRows); var geochart = new google.visualization.GeoChart(document.getElementById('chart_geo2')); google.visualization.events.addListener(geochart, 'select', function () {
var selection = geochart.getSelection();
var id = mapData.getValue(selection[0].row, 1);
window.location = '/uploadedFiles/Code/GoogleGeoChartApi.aspx?id=' + id; }); geochart.draw(mapData, mapOptions); } google.setOnLoadCallback(initGlobalMap); </script> <div id='chart_geo2'></div> </body>
With firefox 10, doesn't works tooltips.
The problem is base tag, if I remove base tag it works fine.
But i need the base tag.
Any solution?
Place the chart into iframe without base tag.