I wish to add an object model to a Google chart dynamically at runtime. I call a php function using AJAX to get the data and based on the number of columns, I wish to make the last column a line chart.
I wish to replace 5 by c as per below script.
c = data.getNumberOfColumns()-2
var options = {
width: 400,
height: 240,
seriesType: "bars",
series: {5: {type: "line"}},
};
c = data.getNumberOfColumns()-2;
var options = {
width: 400,
height: 240,
seriesType: "bars",
series: {}
};
options.series[c] = {type: "line"};
Related
Good morning everyone,
I have a problem about the size of bar chart values. The x values goes like 0,5,10,15,20,23 five by five but I want it to be like 0,1,2,3 one by one.
Another issue is, I want y values to be shown on top of each bar. If 23th bar's value is 10 it must be shown on the top of 23th bar because people should easily see the chart values from the distant.
And my last question is I want to enlarge the size of x and y values of chart but I could only enlarge labels. I couldn't find the right option.
Oh almost I forgot, I have another problem about legend. If legend is on the right side, the chart is getting smaller but I can't move legend to top or bottom. Even in the code says legend bottom it shows on the right.
my codes are here
function drawPaLoChart() {
var data = [['Hours', 'Label1', 'Label2']];
for (var i=0; i<pageload.length;i++){
data.push([pageload[i][0], pageload[i][1], pageload[i][2] ]);
}
var data = google.visualization.arrayToDataTable(data);
var options = {
'fontSize': 30,
chart: {
'width': 600,
title: 'Hourly Page Load Times',
},
legend: { position: 'bottom' },
bar: { groupWidth: "100%" },
backgroundColor: {fill: 'transparent'},
chartArea: {
backgroundColor: 'transparent'
},
'tooltipFontSize':22
};
var chart = new google.charts.Bar(document.getElementById('palochart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
to add labels to the bar, you need to add an annotation column role to the data table.
however, you are using a material bar chart.
column roles, along with several other options, are not supported by material charts.
see --> Tracking Issue for Material Chart Feature Parity
material = google.charts.Bar -- packages: ['bar']
classic = google.visualization.ColumnChart -- packages: ['corechart']
using a classic chart, we can use a data view to add the annotation column role.
see following snippet...
function drawPaLoChart() {
var data = [
['Hours', 'Label1', 'Label2']
];
for (var i = 0; i < pageload.length; i++) {
data.push([pageload[i][0], pageload[i][1], pageload[i][2]]);
}
var data = google.visualization.arrayToDataTable(data);
var options = {
fontSize: 30,
width: 600,
title: 'Hourly Page Load Times',
legend: {
position: 'bottom'
},
bar: {
groupWidth: "100%"
},
backgroundColor: {
fill: 'transparent'
},
chartArea: {
backgroundColor: 'transparent'
},
tooltipFontSize: 22
};
var chart = new google.visualization.ColumnChart(document.getElementById('palochart'));
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
role: 'annotation',
type: 'string'
}]);
// use data view to draw chart
chart.draw(view, options);
}
I am trying to pass a Series number in a Google Chart option through a variable. However it is not accepting it as a variable and instead is taking it as a string. You can see in Image1 that I have passed in Series parameter SecondseriesColumnNumber as a variable and value is 1.
Image 1
However in the output it is considering it as a string but not as the series number as shown below
Image 2
Other parameters are considering the values correctly but not the series one. How can I make this work? My code is below
var options = {
title: title,
width: width,
height: height,
bar: { groupWidth: '75%' },
chartArea: { left: "8%", right: "8%", top: "10%", width: "100%", height: "75%" },
backgroundColor: 'transparent',
tooltip: { textStyle: { color: 'black' }, isHtml: true },
isStacked: isStacked,
seriesType: seriesType,
series: { SecondseriesColumnNumber: { type: SecondseriesType } },
hAxis: { slantedText: true }
};
var chart = new google.visualization.ComboChart($('DivSeries')[0]);
the problem has to do with JavaScript syntax.
you are not able to use a variable as a key in the definition of an object.
you must first create the object, then you can add additional keys using variables.
there are two ways to get / set values of object keys, once the object is defined.
both of the following will return the same value for title.
var title = options.title;
var title = options['title'];
where as in the latter, we can substitute a variable for the title key.
var key = 'title';
var title = options[key];
in this case, define the static options as needed.
var options = {
title: title,
width: width,
height: height,
bar: { groupWidth: '75%' },
chartArea: { left: "8%", right: "8%", top: "10%", width: "100%", height: "75%" },
backgroundColor: 'transparent',
tooltip: { textStyle: { color: 'black' }, isHtml: true },
isStacked: isStacked,
seriesType: seriesType,
series: {},
hAxis: { slantedText: true }
};
then you can use a variable to further define the series option.
var SecondseriesColumnNumber = 1;
options.series[SecondseriesColumnNumber] = { type: SecondseriesType };
I am trying to use spark-line graph. I am passing values to graph as a JavaScript variable. But it is not displaying. But I surprised when I give same value as constant/static. It displays Correctly. Here is the my code :-
r("#sp-tristate-bar-total-revenue").sparkline([1,21,31,12], {
type: "bar",
width: "100%",
height: "30px",
barWidth: 4,
barSpacing: 6,
barColor: "#16D39A"
}
This above code working fine but If I take these values in Javascript variable like following code, graph does not work:-
var graph_val='1,21,31,12';
r("#sp-tristate-bar-total-revenue").sparkline([graph_val], {
type: "bar",
width: "100%",
height: "30px",
barWidth: 4,
barSpacing: 6,
barColor: "#16D39A"
});
Please help me to get rid of this.
You put the string inside an array as a single element, you need to instead generate the array of create one.
Option 1: Split string into array
var graph_val='1,21,31,12';
r("#sp-tristate-bar-total-revenue").sparkline(graph_val.split(','), {
Option 2: Write the vals as an array
var graph_val=[1,21,31,12];
r("#sp-tristate-bar-total-revenue").sparkline(graph_val, {
the second piece of code does not initialize an array as the first.
try this:
var graph_val=[1,21,31,12];
You want the variable to be an array. So var graph_val = [1,21,31,12] is what you need.
var graph_val=[1,21,31,12];
r("#sp-tristate-bar-total-revenue").sparkline(graph_val, {
type: "bar",
width: "100%",
height: "30px",
barWidth: 4,
barSpacing: 6,
barColor: "#16D39A"
});
UPDATE:
In the comments you mentioned the value coming from $("#id").text() as '2,5,3,6,8'. You can turn the comma delimitered string to an integer array like this:
graph_val = $("#id").text().split(',');
for (a in graph_val ) {
graph_val[a] = parseInt(graph_val[a]);
}
r("#sp-tristate-bar-total-revenue").sparkline(graph_val, {
type: "bar",
width: "100%",
height: "30px",
barWidth: 4,
barSpacing: 6,
barColor: "#16D39A"
});
Example: https://jsfiddle.net/w49mpetp/2/
var data = google.visualization.arrayToDataTable(stats_data);
var options = {
width: 1400,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
bars: 'vertical',
colors:['#999','#346ac9', '#279423', '#fc9826'],
};
var chart = new google.charts.Bar(document.getElementById('chart-recent'));
chart.draw(data, google.charts.Bar.convertOptions(options));
I've got a stacked bar chart and I want each of the colors to be different (grey, blue, green, orange). However, the colors of the sections just take the first color (grey) in multiple brightnesses.
I also tried this in my options:
series: [
{color: '#999'},
{color: '#346ac9'},
{color: '#279423'},
{color: '#fc9826'}
]
How do I get each of the series to have a different color?
At the time of the original question, the Material Bar Chart probably did not yet support custom colors for stacked bar charts.
Today, the series configuration option as an array of color objects seems to work fine. See the colors variable in the example below.
Example code:
const data = [
['Sector', 'High', 'Medium', 'Low' ],
['Agriculture', 18, 9, 29],
['Education', 2, 14, 10],
['Healthcare', 4, 6, 41],
['Manufacturing', 36, 10, 3]
];
const colors = [
{ color: 'indianred' }, //high
{ color: 'khaki' }, //medium
{ color: 'seagreen' }, //low
];
const drawChart = () => {
const options = {
chart: { title: 'Risk by sector' },
legend: { position: 'top' }, //not yet supported
bars: 'horizontal',
stacked: true,
series: colors
};
const chartData = google.visualization.arrayToDataTable(data);
const elem = $('figure#health-chart')[0];
const chart = new google.charts.Bar(elem);
chart.draw(chartData, options);
};
google.charts.load('current', { packages: ['bar'] });
google.charts.setOnLoadCallback(drawChart);
Resulting chart:
Fiddle with the code:
https://jsfiddle.net/p8bnfe2h
Configuration options
series
An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {}. If a series or a value is not specified, the global value will be used.
Documentation:
https://developers.google.com/chart/interactive/docs/gallery/barchart#configuration-options
I was able to get the colors working here
When generating the graph I had to use: new google.visualization.ColumnChart(...) instead of new google.charts.Bar(...) otherwise it would not stack properly.
You may also want to make sure you are using the latest version of Google Charts. In the fiddle above, I used samples from the developer docs which were using: https://www.google.com/jsapi to autoload all the things.
How can I dynamically set google chart series type based on a array of objects?
Example:
Basic chart options
var options = {
title: "Custom Chart",
pointSize: 5,
backgroundColor: { fill: 'white' },
chartArea: { top: 40 },
width: 600,
height: 330,
};
My array that holds series type info is like this:
var sTypes = ["line", "bars", "line"];
The chart series type format is done like this:
series: {1: {type: "line"}}
How can I transform, dynamically, my array into something like that? ... then somehow append those extra options to the basic options?
Never mind, I've found the answer:
var customSeries = {};
for (i = 0; i < sTypes.length; i++) {
customSeries[i] = { type: sTypes[i] };
}
Then I can set:
var options = {..., series: customSeries };