Alignment the text in corechart using javaScript - javascript

I am using corechart. When the pie chart appears, want to print the details of pie chart below the chart.
Example :
Want to print the details of chart in given form.
(color red) reading : 20% , (color blue) sleeping :30% , (color green) Playing :10%
and so on...
Could anyone please help me?
<script type="text/javascript">
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Investment');
data.addColumn('number', 'Amount');
data.addRows(5);
data.setValue(0, 0, 'Cash');
data.setValue(0, 1, 21217.31);
data.setValue(1, 0, 'GIC 9658');
data.setValue(1, 1, 2500.30);
data.setValue(2, 0, 'GIC 9657');
data.setValue(2, 1, 1515.18);
data.setValue(3, 0, 'Fund 5612');
data.setValue(3, 1, 5115.74);
data.setValue(4, 0, 'Fund 5617');
data.setValue(4, 1, 3032.33);
var formatter = new google.visualization.NumberFormat({prefix: '$'});
formatter.format(data, 1);
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {
title: 'Distribution of Assets',
legend: {
position: 'left',
alignment:'end'
},
is3D: true,
pieSliceText: 'value',
pieSliceTextStyle:{color: '#FFFFFF', fontName: 'Sans-Serif', fontSize: 14},
legendTextStyle: {color: '#333333', fontName: 'Sans-Serif', fontSize: 14},
tooltipTextStyle: {color: '#666666', fontName: 'Sans-Serif', fontSize: 14},
chartArea:{left:0,top:0,width:"100%",height:"100%"}
});
}
google.setOnLoadCallback(drawVisualization);
</script>

Related

How to add ticks to a Google line chart in JavaScript?

I'm trying to add tick marks to my Google line chart, but when I input ticks: [0, 0.5, 1.0, 1.5, 2.0] on my vertical axis and ticks: [400, 450, 500, 550, 600, 650] on my horizontal axis, they keep appearing more as gridlines than actual tick marks.
For the Google Sheets line chart I created, MAJOR and MINOR ticks are checkboxed. [Major Count: Auto, Minor Count: 1]
For the MAJOR ticks:
Positions on the HORIZONTAL AXIS would be at [400, 450, 500, 550, 600, 650]
Positions on the VERTICAL AXIS would be at [0, 0.5, 1.0, 1.5, 2.0]
Ticks Position: Cross (so it would cross the baseline, rather than being inside or outside of it)
Ticks Length: 12px
Line Thickness: 1px
Line Color: Black
For the MINOR ticks:
Positions on the HORIZONTAL AXIS would be at [425, 475, 525, 575, 625]
Positions on the VERTICAL AXIS would be at [0.25, 0.75, 1.25, 1.75]
Ticks Position: Cross
Ticks Length: 6px
Line Thickness: 1px
Line Color: Black
Here is my code:
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawLineColors);
function drawLineColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Absorbance');
data.addRows([
[380, 0.12],
[390, 0.098],
[400, 0.088],
[410, 0.12],
[420, 0.292],
[430, 0.302],
[440, 0.444],
[450, 0.636],
[460, 0.774],
[470, 0.998],
[480, 1.428],
[490, 1.862],
[500, 1.954],
[510, 1.45],
[520, 0.774],
[530, 0.364],
[540, 0.16],
[550, 0.134],
[560, 0.074],
[570, 0.06],
[580, 0.076],
[590, 0.046],
[600, 0.0004],
[610, 0.008],
[620, 0.006],
[630, 0.0006],
[640, 0.016],
[650, 0.002],
[660, 0.056],
]);
var options = {
title: 'Analytical Spectrum',
titleTextStyle: {
fontName: 'Courier Prime',
fontSize: 30,
bold: true,
color: 'black' },
height: 500,
width: 900,
hAxis:
{
title: 'Wavelength (nm)',
titleTextStyle: {
fontName: 'Courier Prime',
fontSize: 18,
bold: true,
italic: false },
textStyle: {
fontName: 'Courier Prime',
fontSize: 16,
bold: true,
color: 'black'
},
gridlines: {count: '0'},
minTextSpacing: '1',
baseline: '380',
ticks: [400, 450, 500, 550, 600, 650]
},
vAxis:
{
title: 'Absorbance (AU)',
titleTextStyle: {
fontName: 'Courier Prime',
fontSize: 18,
bold: true,
italic: false },
textStyle: {
fontName: 'Courier Prime',
fontSize: 16,
bold: true,
color: 'black'
},
gridlines: {count: '0'},
baseline: '0',
ticks: [0, 0.5, 1.0, 1.5, 2.0],
},
legend: 'none',
lineWidth: 5,
colors: ['#0000ff']
};
var chart = new google.visualization.LineChart(document.getElementById('AnalyticalSpectrum'));
chart.draw(data, options);
}
I've been using this Google Line Chart overview under "Configuration Options" to check how I can change my tick marks, but I'm not yet seeing anything that explains why the tick marks are showing up as gridlines, or how to change that: [https://developers.google.com/chart/interactive/docs/gallery/linechart].

How to have different colors for different value range in simple Google Line Charts?

Here is my JS Fiddle. From the values I have specified in the Y-Axis, 0, 10, 23, 17, 18 etc, I want the line from 0-10 to have a different color, 10-23 to have a different color, 23-17 a different color.
https://jsfiddle.net/pyvqcbou/
Here is my JS. I tried adding colors to various places but I was unable to do so. How do I go about it?
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', '');
data.addColumn('number', '');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
]);
var options = {
height: 152,
legend: 'none',
baselineColor: '#fff',
gridlineColor: '#fff',
textPosition: 'none',
colors: ['#ff926c'],
dataOpacity: 0.7,
hAxis: {
textPosition: 'none'
},
vAxis: {
textPosition: 'none',
},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

use a style column, see following working snippet...
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', '');
data.addColumn('number', '');
data.addColumn({type: 'string', role: 'style'});
data.addRows([
[0, 0, 'red'], [1, 10, 'blue'], [2, 23, 'green'], [3, 17, 'orange'], [4, 18, 'purple'], [5, 9, 'black'],
]);
var options = {
height: 152,
legend: 'none',
baselineColor: '#fff',
gridlineColor: '#fff',
textPosition: 'none',
colors: ['#ff926c'],
dataOpacity: 0.7,
hAxis: {
textPosition: 'none'
},
vAxis: {
textPosition: 'none',
},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Charts LineChart Permanent Annotations Above Points using Ajax and JS

I am racking my brain trying to understand how to do Ajax with Annotations in a Line Chart from Google Charts. I am looking for the numbers to sit direct above each point.
Information provided by grab_twitter_stats.php
[15, 194, 194],[14, 169, 169],[13, 155, 155],[12, 185, 185],[11, 154, 154],[10, 154, 154],[9, 135, 135],[8, 176, 176],[7, 193, 193],[6, 198, 198],[5, 185, 185],[4, 204, 204],[3, 219, 219],[2, 254, 254],[1, 230, 230],
Google Graphs Code:
<script type="text/javascript">
google.charts.load('current', {
callback: function () {
drawChart();
setInterval(drawChart, (20000));
function drawChart() {
$.ajax({
url: 'grab_twitter_stats.php',
type: 'get',
success: function (txt) {
// check for trailing comma
if (txt.slice(-1) === ',') {
txt = txt.substring(0, txt.length - 1);
}
var txtData = JSON.parse('[["Minutes", "Tweets", ""],' + txt + ']');
;
var data = google.visualization.arrayToDataTable(txtData);
data.addColumn('number', 'Minutes');
data.addColumn('number', 'Tweets');
data.addColumn({type: 'string', role: 'annotation'});
//alert(data);
var options = {
curveType: 'function',
hAxis: {
format: '#',
baseline:15,
direction: '-1',
textStyle: {
color: '#7acdd0',
fontSize: 20
},
gridlines: {
color: 'transparent'
},
viewWindow:{
max:15,
min:1
},
},
vAxis: {
baseline:0,
gridlines: {
color: 'transparent'
},
textStyle: {
color: '#7acdd0',
fontSize: 20
}
},
pointSize: 15,
chartArea: {'width': '89%', 'height': '65%'},
pointShape: 'circle',
lineWidth: 5,
colors: ['#7acdd0'],
annotations: {
textStyle: {
fontName: 'Times-Roman',
fontSize: 18,
bold: true,
italic: true,
color: '#871b47', // The color of the text.
auraColor: '#d799ae', // The color of the text outline.
opacity: 0.8 // The transparency of the text.
}
},
legend: { position: 'none' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
});
}
},
packages: ['corechart']
});
</script>
The end display looks something like this:
You can also see here that ToolTips are working, but it provides the name for whatever I set the 3rd item to in JSON.parse.
What am I missing? Thanks.

need to adjust how the DataTable is built
currently, the table is created using arrayToDataTable
var txtData = JSON.parse('[["Minutes", "Tweets", ""],' + txt + ']');
var data = google.visualization.arrayToDataTable(txtData);
this creates the table with 3 columns and all the rows
then 3 more columns are added
data.addColumn('number', 'Minutes');
data.addColumn('number', 'Tweets');
data.addColumn({type: 'string', role: 'annotation'});
but no data is ever provided to these columns
instead, create a blank table, then add the columns and rows...
var txtData = JSON.parse('[' + txt + ']');
var data = new google.visualization.DataTable();
data.addColumn('number', 'Minutes');
data.addColumn('number', 'Tweets');
data.addColumn({type: 'number', role: 'annotation'});
data.addRows(txtData);
be sure to remove the column definitions from txtData
also, for the annotation, you should probably use --> type: 'number'
or change the type in the array being passed --> [15, 194, "194"]
see following working snippet...
(using static data but will translate back to ajax just the same)
google.charts.load('current', {
callback: function () {
var txt = "[15, 194, 194],[14, 169, 169],[13, 155, 155],[12, 185, 185],[11, 154, 154],[10, 154, 154],[9, 135, 135],[8, 176, 176],[7, 193, 193],[6, 198, 198],[5, 185, 185],[4, 204, 204],[3, 219, 219],[2, 254, 254],[1, 230, 230]";
var txtData = JSON.parse('[' + txt + ']');
var data = new google.visualization.DataTable();
data.addColumn('number', 'Minutes');
data.addColumn('number', 'Tweets');
data.addColumn({type: 'number', role: 'annotation'});
data.addRows(txtData);
var options = {
curveType: 'function',
hAxis: {
format: '#',
baseline:15,
direction: '-1',
textStyle: {
color: '#7acdd0',
fontSize: 20
},
gridlines: {
color: 'transparent'
},
viewWindow:{
max:15,
min:1
},
},
vAxis: {
baseline:0,
gridlines: {
color: 'transparent'
},
textStyle: {
color: '#7acdd0',
fontSize: 20
}
},
pointSize: 15,
chartArea: {'width': '89%', 'height': '65%'},
pointShape: 'circle',
lineWidth: 5,
colors: ['#7acdd0'],
annotations: {
textStyle: {
fontName: 'Times-Roman',
fontSize: 18,
bold: true,
italic: true,
color: '#871b47', // The color of the text.
auraColor: '#d799ae', // The color of the text outline.
opacity: 0.8 // The transparency of the text.
}
},
legend: { position: 'none' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>

Assigning Colors to Specific Columns in Google Charts

I would like to assign a specific color to each column in a Google Bar Chart.
I was wondering what the best way is to go about doing this. I would like to include a color Hex code to each data point.
I have a jsfiddle below:
http://jsfiddle.net/zYS27/
var option = {
animation: {duration: 1000, easing: 'out',},
hAxis: {textStyle:{
fontName: 'Nunito',fontSize: '16' }},
legend: { position: "none" },
tooltip: {trigger: "none", textStyle:{
fontName: 'Nunito',fontSize: '16' }, isHtml: true},
bar: {groupWidth: "80%"},
vAxis: {format:'0%', minValue:0, viewWindowMode:'maximized', textStyle:{
fontName: 'Nunito',fontSize: '16' }, maxValue:1},
};
var formatter = new google.visualization.NumberFormat({
fractionDigits: 3,
pattern:'#,###%',
});
var data = new google.visualization.DataTable();
data.addColumn('string', 'N');
data.addColumn('number', 'Value');
data.addRow(['Orange', 0]);
data.addRow(['Red', 0]);
data.addRow(['Green', 0]);
data.addRow(['Blue', 0]);
data.addRow(['Purple', 0]);
// Create and draw the visualization.
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, option);
data.setValue(0, 1, 0.1);
data.setValue(1, 1, 0.3);
data.setValue(2, 1, 0.4);
data.setValue(3, 1, 0.4);
data.setValue(4, 1, 0.4);
chart.draw(data, option);
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

Use a "style" role column:
var data = new google.visualization.DataTable();
data.addColumn('string', 'N');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'style'});
data.addRow(['Orange', 0, 'color: #FF8000']);
data.addRow(['Red', 0, 'color: #FF0000']);
data.addRow(['Green', 0, 'color: #00FF00']);
data.addRow(['Blue', 0, 'color: #0000FF']);
data.addRow(['Purple', 0, 'color: #800080']);
fiddle: http://jsfiddle.net/asgallant/zYS27/1/

You can also specify the option.colors
option.color = ['#0f0', '#00f'];

How to give same colour for each bar in stacked chart

How to give same colour in Google Visualization Stacked Bar Charts for different bar.
I also try to find Google but I not found any useful solution.I want like this..please Check this link: Chart Image

Maybe try as suggested in this answer: Google Charts - Change individual bar color
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', 'SalesMax');
data.addRows(4);
data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 0);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170);
data.setValue(1, 2, 0);
/* NEED TO MAKE THIS BAR RED? */
data.setValue(2, 0, '2006');
data.setValue(2, 1, 0);
data.setValue(2, 2, 1400);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 0);
var chart = new google.visualization.BarChart(document.getElementById('visualization'));
chart.draw(data, {isStacked: true, width: 400, height: 240, title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
series: [{color: 'blue', visibleInLegend: true}, {color: 'red', visibleInLegend: false}]
});
}

Categories

Resources