function drawVisualization()
{
var data = google.visualization.arrayToDataTable
([
['Month', 'Lifting', 'Listing', 'Target'],
['Jan', 300, 1200, 322],
['Feb', 425, 1500, 400],
['Mar', 400, 1400, 380],
['Apr', 650, 1800, 625],
['May', 500, 1700, 530],
['Jun', 700, 2000, 650],
['Jul', 800, 2500, 750],
['Aug', 650, 2200, 700],
['Sep', 500, 1800, 525],
['Oct', 525, 1400, 475],
['Nov', 650, 1700, 675],
['Dec', 500, 1900, 600]
]);
var options = {
title : 'No. of cars which are listed and whether the lifting is on target',
vAxis: {title: 'No. Of Cars'},
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {0: {type: 'stack'}},
series: {1: {type:'bar'}},
series: {2: {type: 'line'}},
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true
};
var chart = new google.visualization.ComboChart(document.getElementById('linechart_material'));
chart.draw(data, options);
}
I want to stack the two columns over one another but in such a way that listing bar is started from bottom,so I'm not so sure about stack.So how can I achieve this. I'm using google charts.
Related
I have a Google Charts combo chart, I have configured the position of the chart vertically.
I could not add labels to the top and bottom values, nor could I display the values for the top.
How can I display the top and bottom values and also add a label, the label for the top values is 'percentage' and for the bottom values is 'USD'.
This is my actual code:
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'percentage', 'total'],
['2004/05', 165, 938, 522, 998, 45, 614.6],
['2005/06', 135, 1120, 599, 1268, 88, 682],
['2006/07', 157, 1167, 587, 807, 97, 623],
['2007/08', 139, 1110, 615, 968, 15, 609.4],
['2008/09', 136, 691, 629, 1026, 66, 569.6]
]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, {
legend: {
position: 'bottom',
alignment: 'left'
},
title : 'material production',
vAxis: {},
hAxis: {},
height: 420,
orientation: 'vertical',
seriesType: 'bars',
series: {
0: {
pointSize: 5,
type: 'bars',
},
1: {
pointSize: 5,
type: 'bars'
},
2: {
pointSize: 5,
type: 'bars'
},
3: {
pointSize: 5,
type: 'bars'
},
4: {
pointSize: 5,
type: 'line'
},
5: {
pointSize: 5,
type: 'line'
}
}
});
},
packages: ['corechart']
});
I have this jsfiddle which is where I am testing what I need.
https://jsfiddle.net/cruano2/3gpsa9Lo/2/
are you trying to add axis titles?
vAxis: {title: 'Percentage'},
hAxis: {title: 'USD'},
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'percentage', 'total'],
['2004/05', 165, 938, 522, 998, 45, 614.6],
['2005/06', 135, 1120, 599, 1268, 88, 682],
['2006/07', 157, 1167, 587, 807, 97, 623],
['2007/08', 139, 1110, 615, 968, 15, 609.4],
['2008/09', 136, 691, 629, 1026, 66, 569.6]
]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, {
legend: {
position: 'bottom',
alignment: 'left'
},
title : 'material production',
vAxis: {title: 'Percentage'},
hAxis: {title: 'USD'},
height: 420,
orientation: 'vertical',
seriesType: 'bars',
series: {
0: {
pointSize: 5,
type: 'bars',
},
1: {
pointSize: 5,
type: 'bars'
},
2: {
pointSize: 5,
type: 'bars'
},
3: {
pointSize: 5,
type: 'bars'
},
4: {
pointSize: 5,
type: 'line'
},
5: {
pointSize: 5,
type: 'line'
}
}
});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I have created my Gauge chart like this:
public pieChart: GoogleChartInterface = {
chartType: 'Gauge',
dataTable: [
['Label', 'Value'],
['Value', 80]
],
options: {
animation: {easing: 'out'},
width: 350, height: 350,
greenFrom: 60, greenTo: 100,
minorTicks: 5,
min: 0, max: 100,
majorTicks: ['0', '20', '40', '60', '80', '100'],
greenColor: '#d0e9c6'
}
};
I want to change the value from 80 -> 60 . I am not sure how to do that in my component and redraw the chart. I am using Angular-7.
Please help
I need to draw a line chart based on time-series.I am using c3.js to plot my chart.I followed this link to achieve my requirement.
var chart = c3.generate({
data: {
x: 'x',
xFormat: '%Y',
columns: [
['x', '2010', '2011', '2012', '2013', '2014', '2015','2016'],
['data1', 30, 200, 100, 400, 150, 250, 400],
['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500],
],
axes: {
data2: 'y2'
},
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y'
}
},
y2: {
show: true
}
},
});
This code works fine.
But i have a problem when I'm using the time series, my chart does not showing properly.
How do i achieve my requirement.I need to plot bulk data using time series with data-time-seconds.
My requirement is:
['x', '2013-01-01 12:00:00', '2013-01-02 12:00:05', '2013-01-03 12:00:10', '2013-01-04 12:00:15', '2013-01-05 12:00:20', '2013-01-10 12:00:25', '2013-01-15 12:00:30', '2013-02-15 12:00:35'],
['data1', 30, 200, 100, 400, 150, 250, 400],
['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500],
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%dT%H:%M:%S',
}
},
y2: {
show: true
}
},
X-axis value shown an NaN. How to get appropriate result for my requirement.Thank you.
This is my issue:
Well, your data is fine. But you have missed the option to define the time format. You may need to add the xFormat property in your data object and give the correct format.
var chart = c3.generate({
data: {
x: 'x',
xFormat: '%Y-%m-%d %H:%M:%S',
columns: [
['x', '2013-01-01 12:00:00', '2013-01-02 12:00:05', '2013-01-03 12:00:10', '2013-01-04 12:00:15', '2013-01-05 12:00:20', '2013-01-10 12:00:25', '2013-01-15 12:00:30', '2013-02-15 12:00:35'],
['data1', 30, 200, 100, 400, 150, 250, 400, 200],
['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500, 300],
],
axes: {
data2: 'y2'
},
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d %H:%M:%S',
rotate: -90
}
},
y2: {
show: true
}
},
});
Notice the xFormat: '%Y-%m-%d %H:%M:%S' option. Actually that's what you have missed. Here's a working fiddle.
Hope it helps!!
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 am currently facing an issue with Google charts which looks fairly simply. All I need is to remove the stroke-width of the current chart:
And make it look like the chart below:
What I have is a stacked area chart, so the options were set as follows:
var options = {
'title': '',
isStacked: true,
legend: {
textStyle: { fontSize: '16' },
position: 'top'
},
hAxis: {
title: '',
gridlines: {
color: '#000000', //Note: 'count: 4' attribute is only possible for continuous...so try to find a way for non-continuous h axis
},
textStyle: {
fontName: 'Arial',
fontSize: '18'
}
//ticks: [0, 100, 200, 75, 100] // display labels every 25
},
vAxis: {
title: '',
gridlines: {
color: '#D3D3D3',
count: 10,
//lineDashStyle: [2,2]
},
textStyle: {
fontName: 'Arial',
fontSize: '18'
},
viewWindow: { max: range_max, min: range_min } //TODO: make them generable
//showTextEvery: 100
},
'width': 1100, //100% //TODO: make this relative
'height': 600,
crosshair:
{
trigger: 'both'
},
series:
{
0: { pointSize: 8 },
3: { lineDashStyle: [5, 1, 3] },
4: { type: 'area', color: 'transparent'}, //visibleInLegend: false
5: { type: 'area', backgroundColor: { strokeWidth: 0 } } // color: 'transparent'
},
intervals: { 'style': 'line' },
colors: ['#ff0000', '#000000', '#0000ff', '#000000', '#000000', '#000000']
}
But the strokeWidth property doesn't seem to be working. Any suggestions on what I am doing wrong please?
using a style column, you customize each series individually
it works the same for all the Column Roles, (annotation, style, etc...)
the role is applied to which ever series column it follows
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'],
// add same style for each point, series 1 only
['2013', 1000, 400, 'stroke-width: 0;', 200, 400],
['2014', 1170, 460, 'stroke-width: 0;', 200, 400],
['2015', 660, 1120, 'stroke-width: 0;', 200, 400],
['2016', 1030, 540, 'stroke-width: 0;', 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>
EDIT
problem with the above example, the legend is now out of sync with the series style
use the chart's 'ready' event to correct the legend entry,
the black line will be a path element
depending on the styles used, the logic may need to be adjusted, but works here
the elements found in the container will be in the same order as the data
see following working snippet to correct legend entry...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'],
// add same style for each point, series 1 only
['2013', 1000, 400, 'stroke-width: 0;', 200, 400],
['2014', 1170, 460, 'stroke-width: 0;', 200, 400],
['2015', 660, 1120, 'stroke-width: 0;', 200, 400],
['2016', 1030, 540, 'stroke-width: 0;', 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 container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('path'), function(path) {
if (path.getAttribute('stroke') === '#000000') {
path.setAttribute('stroke', 'transparent');
}
});
});
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>