I implemented the following:
<div id="b1xy" class="dot-graph"></div>
<script type="text/javascript" language="javascript">
var r = Raphael("b1xy","100%","100%");
r.dotchart(10, 0, 400,200, [76, 70, 67, 71, 69], [0, 1, 2, 3, 4], [100, 120, 140, 160, 500], {max: 10, axisylabels: ['Mexico', 'Argentina', 'Cuba', 'Canada', 'United States of America'], heat: true, axis: '0 0 1 1'});
</script>
But this gave the javascript error Error: Problem parsing d="M,0,0". Does anyone know what's wrong? How do I print a dot chart?
I've included the jquery library, raphael.js, g.raphael.js and g.dot.js, so i know I have all the tools necessary.
I figured out the problem. My jQuery was version 1.4 and was too old, so raphael couldn't work with it. I upgraded my jQuery to 1.8 and everything was fine.
Related
I have a heatmap as part of a django template. I am sending the 2D data required for the heatmap from my view but I am having difficulties unpacking the context data.
In my view:
context['heatmap']=[[32, 22, 48, 77, 0, 6], [19, 12, 28, 30, 0, 3], [15, 30, 144, 70, 29, 31]]
In my template
var ZValues = [{% for value in heatmap %} "{{ value }}", {% endfor %}];
My attempt does not work. Any help is greatly appreciated
Maybe you can try like this:
// in template embedded script tag
<script>
var ZValues = JSON.parse("{{heatmap}}")
</script>
I'm attempting to generate an annotated LineChart using the google visualization API, and while I have it working, I would like to be able to have annotations have line-breaks if possible. Unfortunately, it seems like Google's API ignores any newline information and displays everything on a single line. Has anyone come up with a way around this?
Here's an example:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number', 'Sales');
data.addColumn({type:'string', role:'annotation'});
data.addColumn({type:'string', role:'annotationText'});
data.addRows([
['April',1000, 'A', "Stolen data\nSo-so month"],
['May', 1170, 'B', "Coffee spill\nAnother line\nA third line"],
['June', 660, 'C', "Wumpus attack"]
]);
I've tried \n, \\n, and <br /> and those aren't working.
Add p': {'html': true}} to your tooltip like this
data.addColumn({type:'string', role:'tooltip','p': {'html': true}});
then your add <br/> to your tooltip content
create a second annotation line.
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time');
data.addColumn('number', 'Temp');
data.addColumn({type:'string', role:'annotation'});
data.addColumn({type:'string', role:'annotation'});
data.addRows([
[[4, 56, 00], 0, '0', 'rain'], [[5, 56, 00], 10, '10', 'drizzle'], [[6, 56, 00], 23, '23', 'cats'], [[7, 56, 00], 17, '17', 'partly cloudy'], [[8, 56, 00], 18, '18', 'sunny'], [[9, 56, 00], 9, '9', 'sunny'], [[10, 56, 00], 11, '9', 'sunny'], ]);
Check this out https://jsfiddle.net/k6eocgLd/4/
I have implemented a simple example for you to implement multi-line annotation using Google Chart. Copy and paste the following example and run it.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', { role: 'annotation' }, 'Expenses', { role: 'annotation' }],
['2004', 1000, 1000, 400, 400],
['2005', 1170, 1170, 460, 460],
['2006', 660, 660, 1120, 1120],
['2007', 1030, 1030, 540, 540]
]);
var options = {
title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
After running this code, you will see the following screen.
You cannot do this with current functionality as asgallant points out in the comments. If this is an absolute must, then you can parse through the SVG to create line breaks (which have spotty functionality as well). You can see this answer for more information on how to add line breaks in SVG:
How to linebreak an svg text within javascript?
What I've found is that while it isn't possible to have multi-line annotations, you can make html tooltips and annotations: https://developers.google.com/chart/interactive/docs/customizing_tooltip_content. So it is possible to have multi-line annotations.
I am using Google Line Chart for my project. I need to manipulate points on the line chart based on the values. For example, if the value is less then 170 then it shows default point on line chart and if it is greater then 170, it should show different point on the line chart. how should i put different color for points in the line chart for one series? Here is my code:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'Record'],
['4/1', 165],
['4/2', 160],
['4/3', 163],
['4/4', 173]
]);
var options = {
title: 'Line Chart', pointSize : 5 };
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>`enter code here`
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Plese help me on this.
You cannot color points individually using the current Google Visualization API. Any coloring must be done with separate series.
In your case, you can achieve the desired result with a workaround. Here is what I presume you want:
This code should give you the result you want:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Line');
data.addColumn('number', 'Under 170');
data.addColumn('number', 'Over 170');
data.addRows([
['4/1', 165, 165, null],
['4/2', 160, 160, null],
['4/3', 163, 163, null],
['4/4', 173, null, 173]
]);
var options = {
title: 'Line Chart',
pointSize : 5,
series: [{color: 'black', pointSize: 0}, {color: 'red', lineWidth: 0}, {color: 'blue', lineWidth: 0}]
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>`enter code here`
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Basically, what you have to do is:
Create 3 different series
One for the line (no points shown)
One for the points <170 (color 1)
One for the point >=170 (color 2)
Add all data values to series 1 (so there is a solid line)
Add points to series 2 that are <170, with all other values as null
Add points to series 3 that are >=170, with all other values as null
You can then use the series option to format the chart. The first series will determine the line color. The second series will determine the color for points <170. The third series will determine the color for point >=170.
I have the following code in a simple, html file:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"> </script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var redLine = new Kinetic.Line({
points: [0, 0, 75, 75, 150, 150],
stroke: 'red',
strokeWidth: 2,
lineCap: 'round',
lineJoin: 'round'
});
layer.add(redLine);
stage.add(layer);
</script>
This code is supposed to draw a very simple, single line, from the top, left of the browser space, to 150, 150.
However, when I test this, nothing is drawn on the page.
I'm on Windows Vista Business, up to date, I'm using Google Chrome Version 23.0.1271.97 m.
Now, if I add another set of points in the points array - to look like this:
points: [0, 0, 75, 75, 150, 150, 300, 300],
when I reload the page including this change, the code works as expected.
Now, further play and research, turned that, if I want to keep this array:
points: [0, 0, 75, 75, 150, 150],
I have to add the following, in the line configuration code:
dashArray: [1, 1]
with the "dashArray" property, the line is correctly drawn with the initial array problem.
var redLine = new Kinetic.Line({
points: [0, 0, 75, 75, 150, 150],
stroke: 'red',
strokeWidth: 2,
lineCap: 'round',
lineJoin: 'round',
dashArray: [1, 1]
});
Is this a bug?
Is this expected behavior? I cannot find any documentation about this.
Thank you!
If certain elements are not being drawn on the screen you should call:
.draw()
on either the stage or the layer containing the item. For example:
stage.draw(); or layer.draw();
This redraws the stage or layer.
More info:
The way that javascript execution works is not always the way we think, basically, your code is not executing at the time you think it should be. You need something to trigger the drawing after the stage is created. Simply put, you could add a window.onload function or document.onready function to draw the stage when the page loads. A different solution would be to have the draw triggered by a different event, such as click. So you could create a button, with an onclick attribute and have it trigger stage drawing.
Like so:
html:
<button onclick='javascript:myRedraw()'>Redraw</button>
javascript:
function myRedraw(){
stage.draw();
}
Here is an update: http://jsfiddle.net/ff4sD/2/
Is it possible to attach an onclick method to the elements within a Google Visualization line chart? For example, if a user clicks on point within the chart I want to send the user to a page with more details. I've gone all through the documentation and can't find an example of how to do this.
I see that there are methods for events (from the documentation) but with no clear example it's not making much sense.
Thanks!
You can do this using a 'select' event, which will be triggered each time a user clicks on a point on the line chart. I've included a working example below, including the redirect with a couple of values. The Google code playground has a nice example of how to use event handlers on a table - the same type of functionality can be used across most of the visualizations.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['barchart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows(4);
data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170);
data.setValue(1, 2, 460);
data.setValue(2, 0, '2006');
data.setValue(2, 1, 660);
data.setValue(2, 2, 1120);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);
chart = new google.visualization.LineChart(document.getElementById('visualization'));
chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
});
// a click handler which grabs some values then redirects the page
google.visualization.events.addListener(chart, 'select', function() {
// grab a few details before redirecting
var selection = chart.getSelection();
var row = selection[0].row;
var col = selection[0].column;
var year = data.getValue(row, 0);
location.href = 'http://www.google.com?row=' + row + '&col=' + col + '&year=' + year;
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
getSelection().column is not working, it return an "unknown" value. The issue was posted in the Google Visualization API bug reports page.