Related
I have created a Treemap using google charts.
Here is the code:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['treemap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 20, 0],
['Europe', 'Global', 30, 0],
['Asia', 'Global', 10, 0],
['Australia', 'Global', 40, 0],
['Africa', 'Global', 30, 0],
]);
tree = new
google.visualization.TreeMap(document.getElementById('chart_div'));
google.visualization.events.addListener(tree, 'select', function () {
tree.setSelection([]);
});
tree.draw(data, {
headerHeight: 15,
fontColor: 'black',
showScale: true,
maxDepth: 2
});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
It shows the tree map as:
Now, I want to show the values of Market trade volume (size) as well on the treemap (without any action of the mouse). since It has only one layer so directly value can be shown without any calculation.
I searched in the documentation but couldn't find anything similar.
a couple assumptions are made here...
1) you do not want to show the value for Global --> Global(0)
2) you don't want to modify the values in the data table or how it is loaded
using object notation, we can provide the value (v:) and the formatted value (f:)
the chart will display the formatted value, but use the value when determining tree order
this allows us to change the display without affecting the relationships,
in case you have data with more than one layer...
as such, a DataView is used to modify the values
use the setColumns method to provide a calculated column for the label
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
var rowValue;
if (row === 0) {
rowValue = dt.getValue(row, 0); // value for global
} else {
// change display value by changing formatted value
rowValue = {
v: dt.getValue(row, 0),
f: dt.getValue(row, 0) + '(' + dt.getFormattedValue(row, 2) + ')'
};
}
return rowValue;
},
label: data.getColumnLabel(0),
type: data.getColumnType(0)
}, 1, 2, 3]);
see following working snippet...
google.charts.load('current', {
packages: ['treemap']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 20, 0],
['Europe', 'Global', 30, 0],
['Asia', 'Global', 10, 0],
['Australia', 'Global', 40, 0],
['Africa', 'Global', 30, 0],
]);
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
var rowValue;
if (row === 0) {
rowValue = dt.getValue(row, 0); // value for global
} else {
// change display value by changing formatted value
rowValue = {
v: dt.getValue(row, 0),
f: dt.getValue(row, 0) + '(' + dt.getFormattedValue(row, 2) + ')'
};
}
return rowValue;
},
label: data.getColumnLabel(0),
type: data.getColumnType(0)
}, 1, 2, 3]);
var tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
google.visualization.events.addListener(tree, 'select', function () {
tree.setSelection([]);
});
tree.draw(view, {
headerHeight: 15,
fontColor: 'black',
showScale: true,
maxDepth: 2
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Thanks to WhiteHat for putting me on the right track. Using his answer I've found another way to achieve this that deviates less from the original example.
This also allows nesting by the ID. In the example below, you can USA displays as 'United States of America', but the states below link back up to the 'USA' id.
More importantly for me is that it gives the ability for 2 items to have the same label. Notice there is a London in Europe>UK and America>Canada>Ontario.
google.charts.load('current', {'packages':['treemap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 0, 0],
['Europe', 'Global', 30, 0],
['Asia', 'Global', 10, 0],
['Australia', 'Global', 40, 0],
['Africa', 'Global', 30, 0],
[{ v: 'USA', f: 'United States of America' }, 'America', 20, 0],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['Ontario', 'Canada', 12, -9],
['Alberta', 'Canada', 24, 13],
['UK', 'Europe', 21, -5],
[{ v: '123', f: 'London' }, 'UK', 21, -5],
[{ v: '456', f: 'London' }, 'Ontario', 21, -5],
['Ohio', 'USA', 12, 3],
['Rhode Island', 'USA', 24, 4]
]);
tree = new
google.visualization.TreeMap(document.getElementById('chart_div'));
tree.draw(data, {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black'
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Hi there all I have a Query How I can set up three Axis in Google Chart, I'm using these code down below and it's working fine with 2 Axis But I need to add Date on Right-Axis and Qty on Left-Axis and order-time on Bottom-Axis. I put the demo data in chart basically I get data from database using PHP fetch and show in the chart.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Ordertime', 'Qty'],
['0', 24],
['1', 15],
['2', 10],
['3', 34],
['4', 65],
['5', 72],
['6', 18],
['7', 73],
['8', 80],
['9', 50],
['10', 40],
['11', 49],
['12', 70],
]);
var options = {
title:'Sales by Category (Arabi) Branch (Madinah) Date (2018-03-15)',
hAxis: {title: 'Sales By Time', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0},
series: {
0: { color: '#885426' },
1: { color: '#008000' },
},
areaOpacity: 0.1,
pointSize: 5,
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<!-- Chart js -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- JQuery JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- HTML Tag -->
<div id="chart_div" style="width: 100%; height: 400px;"></div>
What I need I show you example picture which I get from phpmyadmin Display-Chart, Picture down below ....
enter image description here
Using this PHP code to Get data from the database
<?php
$sql=" SELECT hoursales.opendate,location.locname,category.catname,category.catid,hoursales.ordertime,
SUM(hoursales.qty) as Qty,
SUM(hoursales.amount) as Amount
FROM hoursales,product,prodho,category,location
where hoursales.prodn=prodho.prodnum
and category.catid=prodho.catidho
and hoursales.locid=location.locid
and prodho.locid=location.locid
and product.catidho=category.catid
and hoursales.prodn=prodho.prodnum
and product.prodnumho=prodho.prodnumho
and (hoursales.opendate='$_POST[fst_date]' or hoursales.opendate='$_POST[snd_date]')
and location.locid='$_POST[branch]'
and category.catid='$_POST[category]'
and hoursales.ordertime BETWEEN '0' and '23'
GROUP BY hoursales.opendate, category.catname,hoursales.ordertime";
$search_result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_array($search_result)) {
$ordertime = $row['ordertime'];
$opendate = $row['opendate'];
$qty = $row['Qty'];
}
?>
in order to produce the desired chart,
the data would need to be structured as follows,
with a column of values for each date...
['Ordertime', '2018-02-15', '2018-02-22'],
['0', 24, 26],
['1', 15, 13],
['2', 10, 15],
['3', 34, 30],
['4', 65, 67],
['5', 72, 70],
['6', 18, 20],
['7', 73, 70],
['8', 80, 85],
['9', 50, 55],
['10', 40, 43],
['11', 49, 48],
['12', 70, 70]
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Ordertime', '2018-02-15', '2018-02-22'],
['0', 24, 26],
['1', 15, 13],
['2', 10, 15],
['3', 34, 30],
['4', 65, 67],
['5', 72, 70],
['6', 18, 20],
['7', 73, 70],
['8', 80, 85],
['9', 50, 55],
['10', 40, 43],
['11', 49, 48],
['12', 70, 70]
]);
var options = {
chartArea: {
height: '100%',
width: '100%',
top: 60,
left: 60,
right: 160,
bottom: 60
},
height: '100%',
width: '100%',
title: 'Sales by Category (Arabi) Branch (Madinah) Date (2018-03-15)',
hAxis: {title: 'Sales By Time', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0},
series: {
0: { color: '#885426' },
1: { color: '#008000' },
},
areaOpacity: 0.1,
pointSize: 5,
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I would like to know what is other option that I need to disabled the hover state of my column bar. I try this code
'tooltip' : {
trigger: 'none'
}
this doesn't work.
I only have a simple code here
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Phase', 'Sales', 'Expenses', 'Profit'],
['1', 20, 40, 70],
['2', 90, 75, 50],
['3', 20, 40, 10],
['4', 30, 75, 80],
['5', 100, 75, 50],
['6', 50, 90, 50],
['7', 100, 75, 20],
['8', 40, 30, 50],
]);
var options = {
tooltip: { trigger: 'none'},
bars: 'vertical',
vAxis: {format: 'decimal'},
enableInteractivity: false,
height: 400,
colors: ['#ac226d', '#016ac6', '#fff'],
backgroundColor: '',
legend: { position: "none" },
bar: {groupWidth: "15%"},
hAxis: {
textStyle:{color: '#FFF'}
},
series: {
lineWidth: 10
},
vAxis: {
textStyle:{color: '#FFF'},
},
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
I try to search it, but the only answer that I find is the trigger:none.
look at this:
Tooltips | Charts | Google Developers
you can add column with rol tooltip and empty it.
Try setting this option:
var options = {
enableInteractivity: false
}
I want all bars in the last column to have a certain color.
With the following code, only the topmost bar is styled (see http://jsfiddle.net/kalyfe/gvczd6nx/):
var data = google.visualization.arrayToDataTable([
['week', 'apples', 'bananas', {role: 'style'}],
['last week', 5, 17, ''],
['this week', 9, 22, ''],
['projection', 11, 27, 'color:#ddd;']
]);
How else would I apply styling to a column in a stacked bar?
Sets the style for apples bar, like the style for the bananas bar
var data = google.visualization.arrayToDataTable([
['week', 'apples', {role: 'style'}, 'bananas', {role: 'style'}],
['last week', 5, '', 17, ''],
['this week', 9, '', 22, ''],
['projection', 11, 'color:#ddd;', 27, 'color:#ddd;']
]);
http://jsfiddle.net/gvczd6nx/3/
if you want to set the style for each column independently then give the color value as #R3tep has mentioned but if you want it for group of columns then may be try like this:
var data = google.visualization.arrayToDataTable([
['week', 'apples', 'bananas','oranges'],
['last week', 5, 17, 11],
['this week', 9, 22, 12],
['projection', 11, 27,10]
]);
new google.visualization.ColumnChart(document.getElementById('chart')).
draw(data, {
title: "Weekly fruit intake",
width: 600,
height: 400,
isStacked: true,
colors: ['#0f0', '#ddd', '#ec8f6e', '#f3b49f', '#f6c7b6']
});
}
see demo here
also see this:https://developers.google.com/chart/interactive/docs/gallery/columnchart
I'm trying to change the colors of a line graph (Google visualization).
Thats works but I can't find how I need to change the color of the "Cats" text.
As what is it descriped here? https://developers.google.com/chart/interactive/docs/gallery/linechart
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['x', 'Cats', 'Blanket 1', 'Blanket 2'],
['A', 1, 1, 0.5],
['B', 2, 0.5, 1],
['C', 4, 1, 0.5],
['D', 8, 0.5, 1],
['E', 7, 1, 0.5],
['F', 7, 0.5, 1],
['G', 8, 1, 0.5],
['H', 4, 0.5, 1],
['I', 2, 1, 0.5],
['J', 3.5, 0.5, 1],
['K', 3, 1, 0.5],
['L', 3.5, 0.5, 1],
['M', 1, 1, 0.5],
['N', 1, 0.5, 1]
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10}}
);
}
Another question
This is my current work, but why do I see - 5 mil even there is no number below 0 ?
My code:
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {
curveType: "function",
width: 900, height: 300,
vAxis: {minValue:0},
colors: ['#769dbb'], //Line color
backgroundColor: '#1b1b1b',
hAxis: { textStyle: {color: '#767676' , fontSize: 11} },
vAxis: { textStyle: {color: '#767676'} },
}
);
}
Let's break up your question into two parts.
Customizing Your Legend
For your first question, the API documentation doesn't really give us direct access to the legend itself. I think the best way to solve your problem would be to start by turning off the default legend:
var chart = new google.visualization.LineChart(document.getElementById('visualization'))
.draw(data, {
legend: { position: "none" }, // turn off the legend
curveType: "function",
width: 900, height: 300,
vAxis: {minValue:0},
colors: ['#769dbb'], //Line color
backgroundColor: '#1b1b1b',
hAxis: { textStyle: {color: '#767676' , fontSize: 11} },
vAxis: { textStyle: {color: '#767676'} },
});
Once you have completed this, you can create your own legend by interacting with the map itself:
google.visualization.events.addListener(chart, 'ready', drawCustomLegend);
Check out the documentation on handling chart events, as well as this question.
Configuring Axis Dimensions
To remove the -5 million horizontal axis value, you can set your vAxis.minValue to 0. So to put it all together:
var chart = new google.visualization.LineChart(document.getElementById('visualization'))
.draw(data, {
legend: { position: "none" }, // turn off the legend
curveType: "function",
width: 900, height: 300,
vAxis: {minValue:0},
colors: ['#769dbb'], //Line color
backgroundColor: '#1b1b1b',
hAxis: { textStyle: {color: '#767676' , fontSize: 11} },
vAxis: { minValue: 0, textStyle: {color: '#767676'} },
});
This worked for me. Check out the "legend" property below.
options='{"title": "Abandoned Carts",
"backgroundColor" : "transparent",
"pieHole": "0.4",
"legend" : { "textStyle" : { "color" : "white"} }
}'