I'm trying out Google charts for rendering a line chart for my app. Things mostly work, I get the following:
The one remaining issue I have is that I am only getting a single x-axis label. (The 12:00).
I'd like to show more x-axis labels, so I tried adding a gridlines property:
// Line chart visualization
var myLine = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'line_div'
});
myLine.setOptions({
'title': 'My Chart',
lineWidth: 1,
colors: ['#006600', '#FF0000'],
vAxes: [
{title: 'AAA', titleTextStyle: {color: '#000000'}}, // Left axis
{title: 'BBB', titleTextStyle: {color: '#000000'}} // Right axis
],
hAxis: {
format: 'hh:mm',
gridlines: {count: 20}
},
series: [
{targetAxisIndex: 1},
{targetAxisIndex: 0}
]
});
But no luck, it still only displays one label and no x-axis gridlines.
How do I get more x-axis labels?
The problem turned out to be how I was populating my DataTable. I was using:
dataTable.addColumn({type: 'date', label: 'Date'})
because in my thinking a new Date() is a date. Google charts has a different opinion, so what I needed to do was:
dataTable.addColumn({type: 'datetime', label: 'Date'})
and that sorted it.
Related
I have a Highstock graph with Plotlines here: http://jsfiddle.net/qd0rmazg/3/
I'd like to be able to have a legend of Plotlines where, similar to the legend of Series, upon a click Plotlines of a certain category can be made visible or hidden.
In my JSfiddle example, there are 2 categories of Plotlines. Is it possible to toggle the visibility of Plotlines per one category? I couldn't seem to find anything supporting this.
This is how I've created the Plotlines:
xAxis: {
plotLines: [{
value: Date.UTC(2016, 12, 29), // year, month, day
width: 1,
color: 'blue',
dashStyle: 'ShortDash',
label: {
text: 'Category 1',
},
}, {
value: Date.UTC(2016, 11, 12), // year, month, day
width: 1,
color: 'green',
dashStyle: 'Solid',
label: {
text: 'Category 2',
}]
}
As far as I know, there is no native HC legend for the plot lines. But, you can create your custom legend element on the page and use HC capabilities to show/hide plot lines as in their examples:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/axis-addplotline/
chart.xAxis[0].removePlotLine('plot-line-1');
chart.xAxis[0].addPlotLine({
....
id: 'plot-line-1'
});
As noted in my comment, there is a feature request here:
https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/3009547-plotlines-on-legend
Please add your votes and comments.
Vladimir M provided a good solution to show/hide the plot lines with your own custom legend.
The other common approach is to use a line series as your plotLine, which gives you the benefit of the full series functionality.
Example series:
{
name: 'PlotLine',
type: 'line',
color: 'rgba(204,0,0,1)',
data: [25,25,25,25,25,25,25,25,25,25]
}
Fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/
If you need a vertical plot line, the data set up is slightly more complex but still quite feasible.
{{EDIT to demo vertical plot line:
First, you;d have to set a min/max for you y axis (could be done programmatically on chart load):
yAxis: {
min: 0,
max: 75,
maxPadding: 0
}
Then, you specify your data in [x,y] pairs, with the x values being your plotLine value, and the y values being your Y axis min and max:
data: [[4,0], [4,75]]
Updated fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/1/
With that method, you could add a series per plot line, or, if you want all of them to be the same legend and settings, you can add multiple by inserting null points between your desired lines:
data: [[4,0], [4,75], [5,null], [7,0],[7,75]]
Fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/2/
I am creating a multiple line chart with Google Chart API where I want to use 2 Y axis such as -> , but with one axis set to max 24000 for my 6 countries, and the second set to 90000 for the 'Total World' column.
The problem is that my set of options never returns the 'Total World' in the second y axis and the other 6 countries in the first y axis, no matter how I arrange the option 'targetAxisIndex':
var tot = 95000;
var min = 0, var max = 24000;
....
var options = {
title: 'Top Consuming Nations - Thousand barrels daily',
hAxis: {title: 'Year'},
width: 1050, height : 400,
vAxes: [
{title: 'Top Countries', titleTextStyle: {color: '#FF0000'}, maxValue: max}, // Left axis maxValue: 60000
{title: 'Total World', titleTextStyle: {color: '#FF0000'}, maxValue: tot} // Right
],
series:[
{targetAxisIndex:1},
{targetAxisIndex:0}
],
legend: { position: 'top', alignment: 'start' }
};
here is the complete code: http://plnkr.co/edit/u5xXExdkTTYU8fHxWzHB?p=preview
I found the answer on Google Groups:
Hi Chris,
The series option is supposed to be a mapping of series index to series options. When you specify it as an array, you're basically doing that assignment implicitly. So in your example, series 0 will go on axis 1, and series 1 will go on axis. All other series will go to the default axis (0). Your issue could be fixed pretty easily, by simply reorganizing your series such that the total is the first. Alternatively, you could explicitly specify that series 6 (your total series, 'country6') should go on axis 1. The default is for things to go on axis 0, so you don't need to explicitly specify that. Here's an updated version of your plunkr with the second version of the solution (since that was easier for me to do): http://plnkr.co/edit/GhsNcBCtDW0i4OTu0VJR?p=preview
var options = {
title: 'Top Consuming Nations - Thousand barrels daily',
hAxis: {title: 'Year'},
width: 1050, height : 400,
vAxes: [
{title: 'Top Countries', titleTextStyle: {color: '#FF0000'}, maxValue: max}, // Left axis maxValue: 60000
{title: 'Total World', titleTextStyle: {color: '#FF0000'}, maxValue: tot} // Right
],
series:{
6: {targetAxisIndex: 1}
},
legend: { position: 'top', alignment: 'start' }
};
var chart = new google.visualization.LineChart(document.getElementById(chartDiv));
chart.draw(data, options);
I am using the following code and while the chart loads fine, the annotations don't appear and furthermore there is no error returned.
Here is the same example in a jsfiddle. Beating my brains out over here. Thank you in advance if you can see what I cannot.
What gives?
// Load the Visualization API and the corechart package.
google.load("visualization", "1", {packages:["corechart"]});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'GIP'); // Implicit domain label col.
data.addColumn('number', 'Production Curve Percentage'); // Implicit series 1 data col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col.
data.addRows([
[2.7334,0.94, 'note 1-1', ],
[1.7899,0.653, 'note 2-2', ],
[1.444,0.94, 'note 3-3', ],
[1.7704,0.789, 'note 4', ],
[1.7773,1.083, 'note 5', ],
[2.7703,1.308, 'note 6', ],
[1.7173,1.026, 'note 7', ],
]);
var options = {
title: 'GIP2 vs. performance',
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.
}
},
pointShape: 'circle',
pointSize: '4',
vAxis: {
title: 'Performance',
},
hAxis: {
title: "GIP",
//logScale: 'true',
//format: "####",
},
seriesType: "line",
trendlines: {
0: {
type: 'linear',
visibleInLegend: true,
visibleInLegend: true,
showR2: true,
}
}
}
var chart = new google.visualization.ScatterChart(document.getElementById('chart_GIPvsPCP'));
chart.draw(data, options);
};
Apparently Scattercharts don't support annotations yet. The easy workaround is to change:
var chart = new google.visualization.ScatterChart(document.getElementById('chart_GIPvsPCP'));
to
var chart = new google.visualization.LineChart(document.getElementById('chart_GIPvsPCP'));
and then specify:
lineWidth: 0,
to get the same effect.
Thanks Samuel Cook. Official response from Google here: https://code.google.com/p/google-visualization-api-issues/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Stars%20Modified%20Type%20Status%20Priority%20Milestone%20Owner%20Summary&groupby=&sort=&id=1817
Possible to make a line (dotted and straight) down from the dots in line chart google chart?
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2004', 1000],
['2005', 1170],
['2006', 660],
['2007', 1030]
]);
var options = {
title: 'Company Performance',
pointSize: 10
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
The concept is something like this...
http://jsfiddle.net/TD92C/
You can fake those lines by using a ComboChart and using a DataView to duplicate your data series. Set one series to the "line" type and the second to the "bar" type. Disable interactivity on the bars and remove that series from the chart legend. Use the bar.groupWidth option to narrow the bars drawn so that they resemble lines:
bar: {
// use this to set the width of the vertical lines
groupWidth: 2
},
series: {
0: {
// this is the line series
type: 'line',
pointSize: 10
},
1: {
// this creates the vertical "lines" down from the points
type: 'bars',
color: '#666666',
enableInteractivity: false,
visibleInLegend: false
}
}
See an example here http://jsfiddle.net/asgallant/TD92C/1/.
Is it possible to have 2 yAxis in a highstock chart from highcharts one on the left and another on the right ?
Thanks
A very simple example:
First you have to create your new yAxis and set it's position.
{
title: {
text: 'Other data panel'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2,
opposite: true
}
Then, when you create your serie you in what yAxis it will be placed.
{
type: 'column',
name: 'Other',
data: otherData,
yAxis: 2,
dataGrouping: {
units: groupingUnits
}
}
You can see it working here.