I'm trying to develop custom donut component for SAP BusinessObjects Design Studio by using google donut chart. It's like DOM(Document Object Model).
I want to make donut chart responsive because of the compatibility with the other components. To do this, in classic DOM I used bootstrap "col-md-6" div as a container:
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2000', 1000, 400],
['2001', 1170, 460],
['2002', 660, 1120],
['2003', 1030, 540],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540],
['2008', 1000, 400],
['2009', 1170, 460],
['2010', 660, 1120],
['2011', 1030, 540]
]);
var options = {
backgroundColor: {
fill: 'none'
},
pieHole: 0.4,
pieSliceTextStyle: {
color: 'white',
},
title: 'Company Performance',
chartArea: {
top: 20,
width: "100%",
height: "100%"
},
legend: {
position: 'labeled',
textStyle: {
fontSize: 15,
color: '#000'
}
},
titlePosition: 'out',
titleTextStyle: {
color: '#000',
bold: true,
italic: true,
fontSize: 16,
position: 'centered'
}
};
var chart = new google.visualization.PieChart(document.getElementById('chartDiv'));
chart.draw(data, options);
}
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart2);
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2000', 1000, 400],
['2001', 1170, 460],
['2002', 660, 1120],
['2003', 1030, 540],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540],
['2008', 1000, 400],
['2009', 1170, 460],
['2010', 660, 1120],
['2011', 1030, 540]
]);
var options = {
backgroundColor: {
fill: 'none'
},
pieHole: 0.4,
pieSliceTextStyle: {
color: 'white',
},
title: 'Company Performance',
chartArea: {
top: 20,
width: "100%",
height: "100%"
},
legend: {
position: 'labeled',
textStyle: {
fontSize: 15,
color: '#000'
}
},
titlePosition: 'out',
titleTextStyle: {
color: '#000',
bold: true,
italic: true,
fontSize: 16,
position: 'centered'
}
};
var chart = new google.visualization.PieChart(document.getElementById('chartDiv2'));
chart.draw(data, options);
}
$(window).resize(function() {
drawChart();
drawChart2();
});
.chart {
width: 100%;
min-height: 450px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="clearfix"></div>
<div class="col-md-6">
<div id="chartDiv" class="chart"></div>
</div>
<div class="col-md-6">
<div id="chartDiv2" class="chart"></div>
</div>
</body>
</html>
But in design studio, we need to use this component in the Grid Layout Cell. Because of this wrapping new divs, my design is broke down in design studio side. Another divs u see in the picture, comes from design studio sdk developer mode. But I can access them with js. Just know which div to edit.
Both two photos of my div hierarchy of html design and component design:
normal dom design
design studio
Here is the snippet I'm working with design studio, but you can't run it. me.init() method works like main method.
sap.designstudio.sdk.Component.subclass("com.try.donut.Donut", function() {
var me = this;
var myDiv;
me._width;
me._height;
me.drawChart = function() {
//me.$().width();
var data = google.visualization.arrayToDataTable([
[ 'Year', 'Sales', 'Expenses' ], [ '2000', 1000, 400 ],
[ '2001', 1170, 460 ], [ '2002', 660, 1120 ],
[ '2003', 1030, 540 ], [ '2004', 1000, 400 ],
[ '2005', 1170, 460 ] ]);
var options = {
backgroundColor : {
fill : 'none'
},
pieHole : 0.4,
pieSliceTextStyle : {
color : 'white',
},
title : 'Company Performance',
chartArea : {
top: "30",
bottom: "30",
height: "100%",
width: "100%"
},
legend : {
position : 'labeled',
textStyle : {
color : '#000'
}
},
titlePosition : 'out',
titleTextStyle : {
color : '#000',
bold : true,
italic : true,
fontSize : 16,
position : 'centered'
}
};
var chart = new google.visualization.PieChart(document.getElementById(myDiv.id+'_chart_div'));
chart.draw(data, options);
};
me.redraw = function() {
myDiv = this.$()[0];
var componentDiv = d3.select(myDiv);
componentDiv.selectAll("*").remove();
var wrapperDiv = componentDiv.append("div").attr("class","col-md-6");
wrapperDiv.append("div").attr("class","chart").attr("id",myDiv.id+"_chart_div");
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(function(){
me.drawChart();
});
};
$(window).resize(function(){
me.redraw();
});
me.init = function() {
me.redraw();
};
// /////***** SET - GET *****\\\\\\
me.height = function(value) {
if (value === undefined) {
return me._height;
} else {
me._height = value;
return me;
}
};
me.width = function(value) {
if (value === undefined) {
return me._width;
} else {
me._width = value;
return me;
}
};
});
what should i do to new div's attribute to fix this problem?
Related
I have prepared google 'bar' chart as below its working properly.how can i change direction of bar form vertical to horizontal ?
I tried to change direction of chart Using vAxis: {direction:-1} but not working.
I tried to get solution from google chart sites but i cant found any other solution for horizontal bar chart with Stacked & Group. Is there any other way to change direction of Google 'bar' Chart ?
<html>
<title>Web Page Design</title>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350],
['2017', 1030, 540, 350]
]);
var options = {
isStacked: true,pointSize: 15,
vAxis: {
viewWindow: {
min: 0,
}
},
legend: {
position:'bottom',
textStyle: {
bold: false,
fontSize: 12,
}
},
is3D: true,
vAxes: {
0:{
title: 'value in lac'
},
1: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
},
2: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
},
},
series: {
0: {
targetAxisIndex: 0,
color:'#2A6DDA'
},
1: {
targetAxisIndex: 1,
color:'#FF5733'
},
2: {
targetAxisIndex: 1,
color:'#FFC300'
},
3: {
targetAxisIndex: 1,
color:'#D3A4FA'
},
},
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="columnchart_material" runat="server" style="width: 600px; height: 500px;">
</div>
</body>
</html>
Here is how Google charts does it on their examples page
What you need is to use 'corecharts' instead of 'bars', then change the call to google.visualization.BarChart() and you'll get the horizontal bars.
<html>
<title>Web Page Design</title>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350],
['2017', 1030, 540, 350]
]);
var options = {
isStacked: true,
pointSize: 15,
vAxis: {
viewWindow: {
min: 0,
}
},
legend: {
position: 'bottom',
textStyle: {
bold: false,
fontSize: 12,
}
},
is3D: true,
vAxes: {
0: {
title: 'value in lac'
},
1: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
},
2: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
},
},
series: {
0: {
targetAxisIndex: 0,
color: '#2A6DDA'
},
1: {
targetAxisIndex: 1,
color: '#FF5733'
},
2: {
targetAxisIndex: 1,
color: '#FFC300'
},
3: {
targetAxisIndex: 1,
color: '#D3A4FA'
},
},
};
var chart = new google.visualization.BarChart(document.getElementById("columnchart_material"));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" runat="server" style="width: 600px; height: 500px;">
</div>
</body>
</html>
I am trying to access fill property of a series in a stacked area (Google charts). I want the bottom series of the stacked chart to become transparent as shown in the JSFiddle code.
Can one please assist in this please? Your help is very much appreciated.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="row">
<!-- Div that will hold the pie chart-->
<div id="chart_div"></div>
</div>
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
isStacked: true,
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
series:
{
0: { id: 'ss223', type: 'area', backgroundColor: { fill: 'black' } },
1: { type: 'area', backgroundColor: { fill: 'transparent' }}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
just replace...
backgroundColor: { fill: 'transparent' }
with...
color: 'transparent'
the series will be numbered, starting with zero on the bottom
see following working snippet...
note: if you want to make the area solid black, not just the border,
add this to your options...
areaOpacity: 1
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Line 1', 'Line 2'],
['2013', 1000, 400, 200, 400],
['2014', 1170, 460, 200, 400],
['2015', 660, 1120, 200, 400],
['2016', 1030, 540, 200, 400]
]);
var options = {
isStacked: true,
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
series:
{
0: { id: 'ss223', type: 'area', color: 'transparent' },
1: { type: 'area', color: 'black' },
2: { type: 'line', color: 'red' },
3: { type: 'line', color: 'blue' }
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I want to accomplish google stacked area chart.
Here is the js fiddle:
Js Fiddle
I also tried adding the options for stacked area:
var options_fullStacked = {
isStacked: 'relative',
height: 300,
legend: {position: 'top', maxLines: 3},
vAxis: {
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
It is available in the documentation for google charts:stacked area
I want to display it as shown in this figure:
Please ignore everything else in this figure except the stacked area chart displayed in between the line chart and the map
seems to work here, is there more you can share?
see following examples...
isStacked: true
google.charts.load('current', {
callback: function () {
new google.visualization.AreaChart(document.getElementById('chart_div')).draw(
google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]),
{
title: 'Company Performance',
isStacked: true,
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
}
);
},
packages:['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
isStacked: false
google.charts.load('current', {
callback: function () {
new google.visualization.AreaChart(document.getElementById('chart_div')).draw(
google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]),
{
title: 'Company Performance',
isStacked: false,
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
}
);
},
packages:['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
We are trying to fill only one color in google area chart, with different line color.
If we use
isStacked:true
then it will change chart representation
(change y-axis max coordinate)
we want to fill only one color
(green color below the max border in chart).
fiddle
You mean like this: https://jsfiddle.net/7uyz541m/1/ or this: https://jsfiddle.net/7uyz541m/2/ ?
You can set the areaOpacity to zero to remove the filling of a series.
The difference between the first and second jsfiddle link is the isstacked value.
series: {
0: {
areaOpacity: 0
}
},
To make both areas the "same" color but the line a different color you need to add a dummy column like here: https://jsfiddle.net/7uyz541m/3
Using a ComboChart and two sets of the same data, I believe I was able to achieve the desired result.
Note definitions for each series
The first two are identical using areaOpacity: 1 to prevent color mix
These are also not visibleInLegend
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Expenses', 'Sales'],
['2013', 1000, 400, 400, 1000 ],
['2014', 1170, 460, 460, 1170 ],
['2015', 660, 1120, 1120, 660 ],
['2016', 1030, 540, 540, 1030 ]
]);
var data2 = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Expenses', 'Sales'],
['2013', 1000, 400, 400, 1000 ],
['2014', 1170, 460, 460, 1170 ],
['2015', 660, 400, 400, 660 ],
['2016', 1030, 540, 540, 1030 ]
]);
var data3 = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Expenses', 'Sales'],
['2013', 400, 1000, 1000, 400 ],
['2014', 460, 1170, 1170, 460 ],
['2015', 400, 660, 660, 400 ],
['2016', 540, 1030, 1030, 540 ]
]);
var options = {
title: 'Company Performance',
hAxis: {
title: 'Year',
titleTextStyle: {
color: '#333'
}
},
vAxis: {
minValue: 0
},
series: {
0: {
areaOpacity: 1,
color: '#EF9A9A',
type: 'area',
visibleInLegend: false
},
1: {
areaOpacity: 1,
color: '#EF9A9A',
type: 'area',
visibleInLegend: false
},
2: {
color: '#5C6BC0',
lineWidth: 5,
type: 'line'
},
3: {
color: '#B71C1C',
lineWidth: 5,
type: 'line'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));
chart.draw(data1, options);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div2'));
chart.draw(data2, options);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div3'));
chart.draw(data3, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div1" style="width: 900px; height: 500px;"></div>
<div id="chart_div2" style="width: 900px; height: 500px;"></div>
<div id="chart_div3" style="width: 900px; height: 500px;"></div>
I'm trying to style and add another 2 x'axis to a Google area chart (a and b in the image). For example, the a axis should be set to 900 and b: 700.
Also trying to extend the chart to the full width of the containing div (960px) but my solution seems to do nothing.
This is the desired effect.
Current js
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['November', 1000, 400],
['December', 1170, 460],
['January', 660, 1120],
['February', 690, 1120],
['March', 780, 1120],
['April', 820, 1120],
['May', 660, 1120],
['June', 1030, 540]
]);
var options = {
title: '',
backgroundColor: 'none',
width:'960',
legend: {position: 'none'},
hAxis: {title: 'Year', titleTextStyle: {color: 'grey'},
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
To get the chart width right, add a chartArea definition to your options object. The chartArea settings are listed in the AreaChart documentation under "Configuration Options":
chartArea: {
left: 40,
top: 10,
width: 900,
height: 350
}
Demo: http://jsfiddle.net/2H7sp/
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['November', 1000, 400],
['December', 1170, 460],
['January', 660, 1120],
['February', 690, 1120],
['March', 780, 1120],
['April', 820, 1120],
['May', 660, 1120],
['June', 1030, 540]
]);
var options = {
title: '',
backgroundColor: 'none',
legend: { position: 'none' },
hAxis: {
title: 'Year',
titleTextStyle: {
color: 'grey'
}
},
chartArea: {
left: 40,
top: 10,
width: 600,
height: 150
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
body { margin: 0; }
#chart_div {
background-color: #f5f5f5;
width: 660px;
height: 200px;
overflow: hidden;
margin: 0 auto;
}
<script src="https://www.google.com/jsapi?jsapi.js"></script>
<div id="chart_div"></div>
You'll need to play with the numbers a little bit. chartArea refers to the graphical portion of the chart, excluding the axes, title, and legend. So you need to add padding to your values in order to leave room.
Edit: To get the horizontal lines, you'll need to add two additional series with values of 900 and 700 for each row in the respective columns:
var data = google.visualization.arrayToDataTable([
[ 'Year', 'Sales', 'Expenses', 'a', 'b' ],
[ 'November', 1000, 400, 900, 700 ],
[ 'December', 1170, 460, 900, 700 ],
[ 'January', 660, 1120, 900, 700 ],
...
To get the colors right, specify a definition for the series option that sets the area invisible and the line color black for the two new series.
var options = {
...
series: {
2: { areaOpacity: 0, color: "#000" },
3: { areaOpacity: 0, color: "#000" }
},
...
This is close, but the lines will be solid instead of dashed, and there will be no labels. You can get these effects by adding columns with roles to your data table. You'll not be able to use .arrayToDataTable() for this, but instead will need to use the more verbose syntax:
var data = new google.visualization.DataTable();
data.addColumn("string", "Year");
data.addColumn("number", "Sales");
data.addColumn("number", "Expenses");
data.addColumn("number", "a");
data.addColumn("number", "b");
data.addRows([
['November', 1000, 400, 900, 700],
['December', 1170, 460, 900, 700],
['January', 660, 1120, 900, 700],
...
For dashed lines add a certainty role column following each of your "a" and "b" columns:
data.addColumn({ type: "boolean", role: "certainty" });
To get the "a" and "b" labels add a annotation role columns following each of your certainty columns:
data.addColumn({ type: "string", role: "annotation" });
The certainty column values should all be false. The annotation column values should all be null except for the last row where you want the label to appear. The annotation aligns above the data point instead of to the right where you want it, but that's as good as you can get.
Your data rows with the new columns added will look like this:
data.addRows([
['November', 1000, 400, 900, false, null, 700, false, null],
['December', 1170, 460, 900, false, null, 700, false, null],
...
['May', 660, 1120, 900, false, null, 700, false, null],
['June', 1030, 540, 900, false, "a", 700, false, "b"]
]);
And, here's the end result: http://jsfiddle.net/2H7sp/2/
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn("string","Year");
data.addColumn("number","Sales");
data.addColumn("number","Expenses");
data.addColumn("number","a");
data.addColumn({type:"boolean",role:"certainty"});
data.addColumn({type:"string",role:"annotation"});
data.addColumn("number","b");
data.addColumn({type:"boolean",role:"certainty"});
data.addColumn({type:"string",role:"annotation"});
data.addRows([
['November', 1000, 400, 900, false, null, 700, false, null],
['December', 1170, 460, 900, false, null, 700, false, null],
['January', 660, 1120, 900, false, null, 700, false, null],
['February', 690, 1120, 900, false, null, 700, false, null],
['March', 780, 1120, 900, false, null, 700, false, null],
['April', 820, 1120, 900, false, null, 700, false, null],
['May', 660, 1120, 900, false, null, 700, false, null],
['June', 1030, 540, 900, false, "a", 700, false, "b"]
]);
var options = {
title: '',
backgroundColor: 'none',
legend: { position: 'none' },
hAxis: {
title: 'Year',
titleTextStyle: { color: 'grey' }
},
series:{
2:{areaOpacity:0,color:"#000"},
3:{areaOpacity:0,color:"#000"}
},
chartArea: {
left: 40,
top: 10,
width: 600,
height: 150
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
body { margin: 0; }
#chart_div {
background-color: #f5f5f5;
width: 660px;
height: 200px;
overflow: hidden;
margin: 0 auto;
}
<script src="https://www.google.com/jsapi?jsapi.js"></script>
<div id="chart_div"></div>