Since yesterday i try to draw chart with google charts. I have one problem. I tried to put strings on Y-axis, and script doesn't display anything.
I tried to do this with code:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['scatter']});
google.setOnLoadCallback(drawChart);
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'document');
data.addColumn('string', 'term');
data.addRows([
[1 , 'word1'] , [3 , 'word2']
]);
var options = {
width: 900,
height: 500,
chart: {
title: 'weight of terms'
},
axes: {
x: {
0: {side: 'bottom'}
}
}
};
var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));
chart.draw(data, google.charts.Scatter.convertOptions(options));
}
</script>
That gives me a result: http://darium.linuxpl.eu/chart/
The goal: I wanna draw sometnig like this-
https://www.imageupload.co.uk/images/2015/08/25/asd.png
Is there any way to draw what I want?
Data column(s) for axis #0 cannot be of type string
So you need to change the axis,
google.load('visualization', '1.1', {packages: ['scatter']});
google.setOnLoadCallback(drawChart);
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'term');
data.addColumn('number', 'document');
data.addRows([
['word1', 1] , ['word2', 3]
]);
var options = {
width: 900,
height: 500,
chart: {
title: 'weight of terms'
},
axes: {
x: {
0: {side: 'bottom'}
}
}
};
var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));
chart.draw(data, google.charts.Scatter.convertOptions(options));
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="scatter_top_x"></div>
Related
So, I have two Google bar charts displayed on the same page.I tried creating one event handler for both of them and passing in the chart and data into the selectHandler. Can someone tell me what I'm doing wrong?
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data1 = google.visualization.arrayToDataTable([
['Condition', 'Frequency'],
['Dementia', 6081],
['Hypertension', 6055],
['Hypercholesterolemia', 6035],
]);
var data2 = google.visualization.arrayToDataTable([
['Medication', 'Frequency'],
['Naproxen', 7632],
['Plavix', 7486]
]);
var options1 = {
title: 'Medical Conditions',
};
var options2 = {
title: 'Medications',
};
var conditionbarchart = new google.charts.Bar(
document.getElementById('conditions_chart'));
conditionbarchart.draw(data1, options1);
var medchart = new google.visualization.ColumnChart(
document.getElementById('medications_chart'));
medchart.draw(data2, options2);
google.visualization.events.addListener(conditionbarchart, 'select', selectHandler(conditionbarchart, data1));
google.visualization.events.addListener(medchart, 'select', selectHandler());
}
function selectHandler(mychart, mydata){
var selectedItem = mychart.getSelection()[0];
if(selectedItem){
var selection = mydata.getValue(selectedItem.row, 0);
alert('The user selected' + selection);
}
}
Here's the complete solution to answer my question:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Condition');
data.addColumn('number', 'Frequency');
data.addRows([
['Dementia', 3],
['Hypertension', 1],
['Hypercholesterolemia', 1],
['Coronary artery disease', 1],
['Heaches', 2]
]);
// Create the data table.
var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'Medication');
data2.addColumn('number', 'Frequency');
data2.addRows([
['Naproxen', 3],
['Plavix', 1],
['Lasix', 1],
['Insulin', 1],
['Neurontin', 2]
]);
// Set chart options
var options = {
bars: 'vertical', // Required for Material Bar Charts.
hAxis: {
slantedText:true,
slantedTextAngle:90
},
height: 400,
backgroundColor: {fill: 'transparent'},
legend: {position: 'none'},
colors: ['#1b9e77']
};
// Set chart options
var options2 = {
bars: 'vertical', // Required for Material Bar Charts.
hAxis: {
slantedText:true,
slantedTextAngle:90
},
height: 400,
backgroundColor: {fill: 'transparent'},
legend: {position: 'none'},
colors: ['#1b9e77']
};
// Instantiate and draw our chart, passing in some options.
var conditionsbarchart = new google.visualization.ColumnChart(document.getElementById('conditions_chart'));
var medchart = new google.visualization.ColumnChart(document.getElementById('medications_chart'));
function selectHandler(mychart, mydata) {
var selectedItem = mychart.getSelection()[0];
if (selectedItem) {
var topping = mydata.getValue(selectedItem.row, 0);
alert('The user selected ' + topping);
}
}
google.visualization.events.addListener(conditionsbarchart, 'select', function(){
selectHandler(conditionsbarchart, data);
});
conditionsbarchart.draw(data, options);
google.visualization.events.addListener(medchart, 'select', function(){
selectHandler(medchart, data2);
});
medchart.draw(data2, options2);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="conditions_chart" style="width:400; height:300"></div>
<div id="medications_chart" style="width: 400; height: 300"></div>
</body>
</html>
I've been trying to use the Google Charts API to my Dashboard and see these error on firebug.
TypeError: google.visualization is undefined
Here is my JS code:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Title', 'Values'],
['TBK', 8],
['Fluor Corp', 12],
['Fluor Group', 41],
['Bechtel', 39]
]);
var options = {
legend: 'none',
pieSliceText: 'none',
chartArea: {
width: '90%',
height: '90%',
},
colors:['#fa424a','#ac6bec','#fdad2a','#00a8ff','#46c35f','#e84f9a'],
slices: {
0: { color: '#fa424a' },
1: { color: '#ac6bec' },
2: { color: '#fdad2a' },
3: { color: '#00a8ff' }
},
pieHole: 0.8,
tooltip: { trigger: 'none' }
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
</script>
need to load the library before using the callback...
google.charts.load('current', {packages:['corechart']}); // <-- load
google.charts.setOnLoadCallback(drawChart);
you can also add the callback to the load statement...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
or use the promise the load statement returns...
google.charts.load('current', {
packages:['corechart']
}).then(drawChart);
Its a bit later but i have the same problem.
My problem was that the object google.visualization wasn`t ready when i call the function (i call in execution time, not with setOnLoadCallback).
So i call the function a bit later with an interval and its works for me:
function drawChart(){
timeout1 = setInterval(
function () {
data = new google.visualization.DataTable();
data.addColumn('string', 'Colum1');
data.addColumn('number', 'Colum2');
data.addColumn('number', 'Colum3');
data.addColumn('number', 'Colum4');
chart = new google.visualization.LineChart(document.getElementById('div_Chart'));
.
.
.
clearInterval(timeout1);
}, 100);
}
I hope its help u.
I've created a google chart and the data is pulled from a database and structured to meet the requirements of the chart, however, for some reason, whenever I try change the options for the chart it just wont work.
I need to move the legend to below the chart and make the point size on the chart 30 pixels.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Aspect');
data.addColumn('number', 'Leaner');
data.addColumn('number', 'Norm');
data.addColumn('number', 'Grade');
data.addRows([['Agility ', 11.5, 10, 11.5]]);
var options =
{
legend: { position: 'bottom' },
chart: {title: 'Student Results'},
legend:{position: 'bottom', textStyle: {color: 'black', fontSize: 16}},
pointSize:30,
};
var chart = new google.charts.Line(document.getElementById('line_chart'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
<div id="line_chart" style='width:calc(100% - 80px); height:400px; margin:auto;'></div>
Any suggestions on why the legend wont move or point size wont change, the chart data can have many aspects (x axis value), I need to point-size to change so that it wont look blank with just a aspect (x axis value)
there are several options that simply don't work in Material charts
and it appears Line requires two data points per series before drawing anything
I would recommend using 'corechart' instead
there is an option for theme: 'material' to get the base look and feel close to a Material chart
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Aspect');
data.addColumn('number', 'Leaner');
data.addColumn('number', 'Norm');
data.addColumn('number', 'Grade');
data.addRows([['Agility 1', 11.5, 10, 11.5]]);
var options = {
chartArea: {
width: '90%'
},
height: 600,
legend: {
position: 'bottom',
textStyle: {
color: 'black',
fontSize: 16
}
},
pointSize: 30,
theme: 'material',
title: 'Student Results',
vAxis: {
viewWindow: {
min: 0,
max: 15
}
},
width: '100%'
};
var chart = new google.charts.Line(document.getElementById('line_chart'));
chart.draw(data, google.charts.Line.convertOptions(options));
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages:['line', 'corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Core Chart</div>
<div id="chart_div"></div>
<div>Material Chart</div>
<div id="line_chart"></div>
I have to create a line chart where a few of the points have tooltips or other balloons/captions/texboxes with information about the point. They must always be displayed, not only on mouse over. Basically a google annotation chart, but with the data on the chart.
I tried the code below, which doesn't even show the tooltip as it should. Any thoughts, or should I choose a different technology? Thanks.
google.load('visualization', '1.1', { packages: ['line'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Score');
data.addColumn({type: 'string', role: 'tooltip' });
data.addRows([
[1, 37, 'This score occurred in Texas in 1959.'],
[2, 30, ''],
[3, 25, ''],
]);
var options = {
chart: {
title: 'Important Chart',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500,
legend: 'none',
axes: {
x: {
0: { side: 'top' }
}
}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, options);
}
You would want to use role:'annotation' instead of role: 'tooltip'. Annotation allows you to display the text without any user interaction. See the documentation on annotationRole for more info.
Working Code: http://jsfiddle.net/wkyg2brg/
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Score');
data.addColumn({type:'string', role:'annotation'});
data.addRows([
[1, 37, 'This score occurred in Texas in 1959.'],
[2, 30, ''],
[3, 25, ''],
]);
var options = {
chart: {
title: 'Important Chart',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500,
legend: 'none',
axes: {
x: {
0: { side: 'top' }
}
}
};
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data,options);
}
My problem is that, when i var_dump my array inside a separate file, the values are all correct, but when I require this file into another, in which i try using javascript with the rows i make, it returns me other values, and even erases parts of my array. Does someone know something about it?
Here's the code i'm using to generate the chart in the separate file:
var_dump($jsRows_scatter);
?>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'fixo');
data.addColumn('number', 'fixo');
data.addColumn('number', 'fixo');
data.addColumn('number', 'Afundamento');
data.addColumn('number', 'Elevação');
var foo = [<?php echo $jsRows_scatter; ?>];
data.addRows(foo)
var fool =[ <?php echo $jsRows_scatter1; ?>];
data.addRows(fool);
var fool1 =[ <?php echo $jsRows_1; ?>];
data.addRows(fool1);
var options = {
title: '',
hAxis: {title: 'Duração (ciclos)', minValue: 0, maxValue: 10,
logScale: 'true'
},
vAxis: {title: 'Intensidade (p.u)', minValue: 0, maxValue: 1},
legend: 'none',
pointSize: 5,
colors:['red','#004411','green','#00FF00'],
series: {
// series 0 is the Scatter
0: {
lineWidth: 1,
pointSize: 0
},
// series 1 is the Line
1: {
lineWidth: 1,
pointSize: 0,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.load("visualization", "1", {packages:["corechart"], callback: drawChart});
</script>
<body>
<div id='chart_div' style="width:950px; height:300px;"></div>
</body>
and the var_dump($jsRows_scatter) returns me: string(243) "[1.0199998,null,null,null,null,0.00589003],[0.6599999,null,null,null,null,0.00589003],[4.6799991,null,null,null,null,0.5],[0.2400000,null,null,null,null,0.5],[0.2400000,null,null,null,null,0.77272727],[0.1200000,null,null,null,null,0.77272727]"(which is ok).
So i use require_once() to call this array into a javascript google charts function whose code is:
function analise_desequilibrio(medicao, analise){
var nome_analise='';
switch(analise){
case "unipede":
nome_analise="Similaridade entre dias";
document.getElementById("analises").innerHTML='<div id = "chart_div_carac_iec" style="width: 950px; text-align: center;"> </div>';
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'fixo');
data.addColumn('number', 'fixo');
data.addColumn('number', 'fixo');
data.addColumn('number', 'Afundamento');
data.addColumn('number', 'Elevação');
var foo = [<?php echo $jsRows_scatter;?>];
data.addRows(foo)
var fool =[<?php echo $jsRows_scatter1;?>];
data.addRows(fool);
var fool1 =[<?php echo $jsRows_1;?>];
data.addRows(fool1);
var options = {
title: '',
hAxis: {title: 'Duração (ciclos)', minValue: 0, maxValue: 10,
logScale: 'true'
},
vAxis: {title: 'Intensidade (p.u)', minValue: 0, maxValue: 1},
legend: 'none',
pointSize: 5,
colors:['red','#004411','green','#00FF00'],
series: {
// series 0 is the Scatter
0: {
lineWidth: 1,
pointSize: 0
},
// series 1 is the Line
1: {
lineWidth: 1,
pointSize: 0,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div_carac_iec'));
chart.draw(data, options);
}
google.load("visualization", "1", {packages:["corechart"], callback: drawChart});
break;
But, even before i reach the function with the steps on javascript, just as i use require_once() on this array file, my var_dump results: string(74) "[3,null,null,null,null,2],[1,null,null,null,null,],[,null,null,null,null,]" Which means lots of data were deleted somehow. Does someone know how to fix it? Thanks in advance!