I have a Google area chart that plots some data, approx 5 years of daily data. The user can zoom in and out and this all works fine.
I wanted though to have a button next to the chart that they could click to see the last years worth of data. However, I am not sure how I can change the x-axis range on a Google chart?
you can use axis option viewWindow
which has properties for min & max,
these properties should match the data type of the axis they are applied
see following working snippet,
the x-axis are dates, so we can set the min & max dates to be displayed on the chart...
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Positive');
data.addColumn('number', 'Negative');
data.addRows([
[new Date(2017, 1, 20), 10, null],
[new Date(2017, 2, 21), 5, null],
[new Date(2017, 3, 22), 0, 0],
[new Date(2017, 4, 23), null, -5],
[new Date(2017, 5, 24), null, -10],
[new Date(2017, 6, 25), null, -5],
[new Date(2017, 7, 26), 0, 0],
[new Date(2017, 8, 27), 10, null],
[new Date(2017, 9, 28), 5, null],
[new Date(2017, 11, 29), 0, 0],
[new Date(2018, 0, 20), 00, null],
[new Date(2018, 0, 21), 5, null],
[new Date(2018, 0, 22), 0, 0],
[new Date(2018, 0, 23), null, -5],
[new Date(2018, 0, 24), null, -10],
[new Date(2018, 0, 25), null, -5],
[new Date(2018, 0, 26), 0, 0],
[new Date(2018, 0, 27), 00, null],
[new Date(2018, 0, 28), 5, null],
[new Date(2018, 0, 29), 0, 0],
[new Date(2018, 1, 20), 10, null],
[new Date(2018, 1, 21), 5, null],
[new Date(2018, 1, 22), 0, 0],
[new Date(2018, 1, 23), null, -5],
[new Date(2018, 1, 24), null, -10],
[new Date(2018, 1, 25), null, -5],
[new Date(2018, 1, 26), 0, 0],
[new Date(2018, 1, 27), 10, null],
[new Date(2018, 1, 28), 5, null],
[new Date(2018, 1, 29), 0, 0],
[new Date(2018, 2, 20), 10, null],
[new Date(2018, 2, 21), 5, null],
[new Date(2018, 2, 22), 0, 0],
[new Date(2018, 2, 23), null, -5],
[new Date(2018, 2, 24), null, -10],
[new Date(2018, 2, 25), null, -5],
[new Date(2018, 2, 26), 0, 0],
[new Date(2018, 2, 27), 10, null],
[new Date(2018, 2, 28), 5, null],
[new Date(2018, 2, 29), 0, 0],
[new Date(2018, 3, 20), 10, null],
[new Date(2018, 3, 21), 5, null],
[new Date(2018, 3, 22), 0, 0],
[new Date(2018, 3, 23), null, -5],
[new Date(2018, 3, 24), null, -10],
[new Date(2018, 3, 25), null, -5],
[new Date(2018, 3, 26), 0, 0],
[new Date(2018, 3, 27), 10, null],
[new Date(2018, 3, 28), 5, null],
[new Date(2018, 3, 29), 0, 0],
[new Date(2018, 4, 20), 10, null],
[new Date(2018, 4, 21), 5, null],
[new Date(2018, 4, 22), 0, 0],
[new Date(2018, 4, 23), null, -5],
[new Date(2018, 4, 24), null, -10],
[new Date(2018, 4, 25), null, -5],
[new Date(2018, 4, 26), 0, 0],
[new Date(2018, 4, 27), 10, null],
[new Date(2018, 4, 28), 5, null],
[new Date(2018, 4, 29), 0, 0],
[new Date(2018, 5, 20), 10, null],
[new Date(2018, 5, 21), 5, null],
[new Date(2018, 5, 22), 0, 0],
[new Date(2018, 5, 23), null, -5],
[new Date(2018, 5, 24), null, -10],
[new Date(2018, 5, 25), null, -5],
[new Date(2018, 5, 26), 0, 0],
[new Date(2018, 5, 27), 10, null],
[new Date(2018, 5, 28), 5, null],
[new Date(2018, 5, 29), 0, 0],
[new Date(2018, 6, 20), 10, null],
[new Date(2018, 6, 21), 5, null],
[new Date(2018, 6, 22), 0, 0],
[new Date(2018, 6, 23), null, -5],
[new Date(2018, 6, 24), null, -10],
[new Date(2018, 6, 25), null, -5],
[new Date(2018, 6, 26), 0, 0],
[new Date(2018, 6, 27), 10, null],
[new Date(2018, 6, 28), 5, null],
[new Date(2018, 6, 29), 0, 0],
[new Date(2018, 9, 20), 10, null],
[new Date(2018, 9, 21), 5, null],
[new Date(2018, 9, 22), 0, 0],
[new Date(2018, 9, 23), null, -5],
[new Date(2018, 9, 24), null, -10],
[new Date(2018, 9, 25), null, -5],
[new Date(2018, 9, 26), 0, 0],
[new Date(2018, 9, 27), 10, null],
[new Date(2018, 9, 28), 5, null],
[new Date(2018, 9, 29), 0, 0],
[new Date(2018, 11, 20), 10, null],
[new Date(2018, 11, 21), 5, null],
[new Date(2018, 11, 22), 0, 0],
[new Date(2018, 11, 23), null, -5],
[new Date(2018, 11, 24), null, -10],
[new Date(2018, 11, 25), null, -5],
[new Date(2018, 11, 26), 0, 0],
[new Date(2018, 11, 27), 10, null],
[new Date(2018, 11, 28), 5, null],
[new Date(2018, 11, 29), 0, 0],
]);
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart-area',
dataTable: data,
options: {
height: 280,
legend: {
alignment: 'end',
position: 'top'
},
animation: {
duration: 500,
easing: 'in',
startup: true
},
chartArea: {
height: '100%',
width: '100%',
top: 36,
left: 36,
right: 18,
bottom: 36
}
}
});
var chartDateRange = data.getColumnRange(0);
var oneYear = (365.25 * 24 * 60 * 60 * 1000);
$('#range-buttons button').on('click', function (sender) {
var hAxis;
var visibleRange = parseInt($(sender.target).data('range'));
if (isNaN(visibleRange)) {
hAxis = null;
} else {
hAxis = {
viewWindow: {
min: new Date(chartDateRange.max.getTime() - oneYear),
max: chartDateRange.max
}
};
}
chart.setOption('hAxis', hAxis);
chart.draw();
});
chart.draw();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="range-buttons">
<span>Zoom: </span>
<button class="ui-button ui-widget ui-corner-all" data-range="31104000000">Last Year</button>
<button class="ui-button ui-widget ui-corner-all">All</button>
</div>
<div id="chart-area"></div>
<div id="filter-range"></div>
</div>
Related
I'm using a line graph in Google Chart and there's just one thing left I need to configure, the hAxis dates.
The dates have 2 days gap only, like Feb 2, Feb 4, Feb 6, Feb 8, and so on, and so it shows 15 dates on the hAxis. I want to widen the gap maybe by 7 days or lessen the number of dates displayed by just 4 dates. How to achieve that? I can't seem to find the right config for it here: https://developers.google.com/chart/interactive/docs/gallery/linechart.
Here's my chart: https://jsfiddle.net/hpx7Lj91/1/
google.charts.load('current', {
packages: ['corechart', 'line']
});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Price');
data.addRows([
[new Date(2022, 1, 1), 0.2500],
[new Date(2022, 1, 2), 0.2500],
[new Date(2022, 1, 3), 0.2600],
[new Date(2022, 1, 4), 0.2700],
[new Date(2022, 1, 5), 0.2800],
[new Date(2022, 1, 6), 0.3000],
[new Date(2022, 1, 7), 0.2900],
[new Date(2022, 1, 8), 0.3300],
[new Date(2022, 1, 9), 0.3100],
[new Date(2022, 1, 10), 0.3200],
[new Date(2022, 1, 11), 0.3200],
[new Date(2022, 1, 12), 0.3200],
[new Date(2022, 1, 13), 0.3100],
[new Date(2022, 1, 14), 0.3200],
[new Date(2022, 1, 15), 0.3000],
[new Date(2022, 1, 16), 0.3100],
[new Date(2022, 1, 17), 0.3000],
[new Date(2022, 1, 18), 0.3000],
[new Date(2022, 1, 19), 0.2900],
[new Date(2022, 1, 20), 0.2800],
[new Date(2022, 1, 21), 0.2700],
[new Date(2022, 1, 22), 0.2700],
[new Date(2022, 1, 23), 0.2700],
[new Date(2022, 1, 24), 0.2600],
[new Date(2022, 1, 25), 0.2700],
[new Date(2022, 1, 26), 0.2600],
[new Date(2022, 1, 27), 0.2500],
[new Date(2022, 1, 28), 0.2500],
[new Date(2022, 1, 29), 0.2400],
[new Date(2022, 1, 30), 0.2500]
]);
var options = {
hAxis: {
gridlines: {
color: 'none'
},
format: 'MMM dd',
textStyle: {
color: '#677185',
fontSize: 12,
bold: true
}
},
vAxis: {
gridlines: {
color: '#DFE3EB'
},
minorGridlines: {
color: 'none'
},
textStyle: {
color: '#677185',
fontSize: 12,
bold: true
}
},
tooltip: {
textStyle: {
color: '#677185',
fontSize: 12
}
},
series: {
0: {
color: '#26a172'
}
},
legend: {
position: 'none'
},
curveType: 'function'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
the ticks option offers the most flexibility
it takes an array of the ticks you want to display, such as...
[new Date(2022, 1, 1), new Date(2022, 1, 8), new Date(2022, 1, 15), ...]
you can obviously hard-code them as shown above, or...
we can use data table method getColumnRange(colIndex) to find the min and max dates from the data table.
here is a routine to display a certain number of dates,
evenly spaced between the min and max dates from the data table.
var datesToDisplay = 6;
var dateRange = data.getColumnRange(0);
var timeRange = dateRange.max.getTime() - dateRange.min.getTime();
var interval = timeRange / (datesToDisplay - 1);
var ticks = [];
var tick = dateRange.min;
while (tick.getTime() <= dateRange.max.getTime()) {
ticks.push(tick);
tick = new Date(tick.getTime() + interval);
}
then add the ticks option...
hAxis: {
gridlines: {
color: 'none'
},
format: 'MMM dd',
textStyle: {
color: '#677185',
fontSize: 12,
bold: true
},
ticks: ticks // <-- ticks option
},
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Price');
data.addRows([
[new Date(2022, 1, 1), 0.2500],
[new Date(2022, 1, 2), 0.2500],
[new Date(2022, 1, 3), 0.2600],
[new Date(2022, 1, 4), 0.2700],
[new Date(2022, 1, 5), 0.2800],
[new Date(2022, 1, 6), 0.3000],
[new Date(2022, 1, 7), 0.2900],
[new Date(2022, 1, 8), 0.3300],
[new Date(2022, 1, 9), 0.3100],
[new Date(2022, 1, 10), 0.3200],
[new Date(2022, 1, 11), 0.3200],
[new Date(2022, 1, 12), 0.3200],
[new Date(2022, 1, 13), 0.3100],
[new Date(2022, 1, 14), 0.3200],
[new Date(2022, 1, 15), 0.3000],
[new Date(2022, 1, 16), 0.3100],
[new Date(2022, 1, 17), 0.3000],
[new Date(2022, 1, 18), 0.3000],
[new Date(2022, 1, 19), 0.2900],
[new Date(2022, 1, 20), 0.2800],
[new Date(2022, 1, 21), 0.2700],
[new Date(2022, 1, 22), 0.2700],
[new Date(2022, 1, 23), 0.2700],
[new Date(2022, 1, 24), 0.2600],
[new Date(2022, 1, 25), 0.2700],
[new Date(2022, 1, 26), 0.2600],
[new Date(2022, 1, 27), 0.2500],
[new Date(2022, 1, 28), 0.2500],
[new Date(2022, 1, 29), 0.2400],
[new Date(2022, 1, 30), 0.2500]
]);
var datesToDisplay = 6;
var dateRange = data.getColumnRange(0);
var timeRange = dateRange.max.getTime() - dateRange.min.getTime();
var interval = timeRange / (datesToDisplay - 1);
var ticks = [];
var tick = dateRange.min;
while (tick.getTime() <= dateRange.max.getTime()) {
ticks.push(tick);
tick = new Date(tick.getTime() + interval);
}
var options = {
hAxis: {
gridlines: {
color: 'none'
},
format: 'MMM dd',
textStyle: {
color: '#677185',
fontSize: 12,
bold: true
},
ticks: ticks
},
vAxis: {
gridlines: {
color: '#DFE3EB'
},
minorGridlines: {
color: 'none'
},
textStyle: {
color: '#677185',
fontSize: 12,
bold: true
}
},
tooltip: {
textStyle: {
color: '#677185',
fontSize: 12
}
},
series: {
0: {
color: '#26a172'
}
},
legend: {
position: 'none'
},
curveType: 'function'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
While using google dual y line chart, one problem appeared - when both y lines have same trend, they tend to overlap which hides one of the lines. Is there any solution for this?
example data:
data.addRows([
[new Date(2014, 0), 1, 10],
[new Date(2014, 1), 2, 20],
[new Date(2014, 2), 4, 40],
[new Date(2014, 3), 8, 80],
[new Date(2014, 4), 16, 160],
[new Date(2014, 5), 32, 320],
[new Date(2014, 6), 64, 640],
[new Date(2014, 7), 128, 1280],
[new Date(2014, 8), 256, 2560],
[new Date(2014, 9), 512, 5120],
[new Date(2014, 10),1024,10240],
[new Date(2014, 11), 2048, 20480]
]);
fiddle: https://jsfiddle.net/gxq1ykfw/
I have a Google sheet that look like this:
Date Sales
31/03/2017 1000
30/06/2017 2000
30/09/2017 1500
31/12/2017 2500
31/03/2018 4000
If I import this using .arrayToDataTable in Google charts and set the type of column 0 to 'date' or 'string' - it doesn't like it, because the date is only a formatted number i.e 43190 = 31/3/2018. so the type has to be 'number' which then only displays the underlying number on the chart and not the date
I can loop through each of the row values and I've tried changing them with this
function formatDate(date) {
var d = new Date((date - 25569)*86400*1000),
locale = "en-us",
month = d.toLocaleString(locale, { month: "short" });
var formattedDate = d.getDay() + "/" + month + "/" + d.getFullYear();
return formattedDate
}
this converts the number to a date string - so with an input of, say, 43190 it returns 31/Mar/2018 but I still can't change the column type to 'date'
I could output the dates as strings but they don't sort in chronological order but alphabetical - I want them chronological.
can anybody show me where I'm going wrong?
EDIT:
If I change the function to
function formatDate(date) {
var d = new Date((date - 25569)*86400*1000)
return d
}
this now sets the column values to the full date object
but I get an error a saying "Value Sun Jun 30 2013 01:00:00 GMT+0100 (GMT Summer Time) does not match type number in column index 0"
Now this must be referring to the datatable column zero, which in the original table, is a date number. I've tried adding:
data.setColumnProperty(0, 'type' , 'date')
but seem to get the same error.
perhaps I'm not changing the type at the correct point in the code.
to clarify: I'm getting the original values from a range in the google sheet then converting that range to a datatable using .arrayToDataTable. So I'm not sure I can define the column type at the point of making the datatable hence the separate attempt with:
data.setColumnProperty(0, 'type' , 'date')
You have to supply the complete date object in the date-type column.
Good documentation about dates can be found here
https://developers.google.com/chart/interactive/docs/datesandtimes#axesgridlinesticks
An example of dates and sales could be
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales');
data.addRows([
[new Date(2015, 0, 1), 5], [new Date(2015, 0, 2), 7], [new Date(2015, 0, 3), 3],
[new Date(2015, 0, 4), 1], [new Date(2015, 0, 5), 3], [new Date(2015, 0, 6), 4],
[new Date(2015, 0, 7), 3], [new Date(2015, 0, 8), 4], [new Date(2015, 0, 9), 2],
[new Date(2015, 0, 10), 5], [new Date(2015, 0, 11), 8], [new Date(2015, 0, 12), 6],
[new Date(2015, 0, 13), 3], [new Date(2015, 0, 14), 3], [new Date(2015, 0, 15), 5],
[new Date(2015, 0, 16), 7], [new Date(2015, 0, 17), 6], [new Date(2015, 0, 18), 6],
[new Date(2015, 0, 19), 3], [new Date(2015, 0, 20), 1], [new Date(2015, 0, 21), 2],
[new Date(2015, 0, 22), 4], [new Date(2015, 0, 23), 6], [new Date(2015, 0, 24), 5],
[new Date(2015, 0, 25), 9], [new Date(2015, 0, 26), 4], [new Date(2015, 0, 27), 9],
[new Date(2015, 0, 28), 8], [new Date(2015, 0, 29), 6], [new Date(2015, 0, 30), 4],
[new Date(2015, 0, 31), 6], [new Date(2015, 1, 1), 7], [new Date(2015, 1, 2), 9]
]);
You could than add the following to options to format your date
hAxis: {
format: 'MM/dd/yyyy'
}
I'm trying to create a POC of a stock portfolio.
I'm using Google charts to do it.
I want to generate 3 charts: one for each stock (I have two stocks) and one for both of them.
in my html I've created three divs (using some guids)
<div id="e480c510499e4bbdaa8ae8e4a1001cd8"></div>
<div id="2dea80b0fabd43bba019dbc3ddf342aa"></div>
<div id="linechart_material"></div>
and I've generated a javascript that is supposed to populate the divs
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
google.load('visualization', '1.1', { 'packages': ['line'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('number', 'Company #4');
data.addColumn('number', 'Company #2');
data.addRow([new Date(2015, 11, 27), 12.7389789250395,4.10950499778125]);
data.addRow([new Date(2015, 11, 26), 6.76681987790708,8.38212726329552]);
data.addRow([new Date(2015, 11, 25), 15.7216755155109,4.36060299741132]);
data.addRow([new Date(2015, 11, 24), 7.44940381844035,3.34093286951116]);
data.addRow([new Date(2015, 11, 23), 9.02574470221333,10.0405249521325]);
data.addRow([new Date(2015, 11, 22), 11.9767397269498,5.29850781210629]);
data.addRow([new Date(2015, 11, 21), 14.5598888055235,6.3867255497662]);
data.addRow([new Date(2015, 11, 20), 12.2693184056642,3.70270192981823]);
data.addRow([new Date(2015, 11, 19), 8.29967047194935,17.0856299675469]);
data.addRow([new Date(2015, 11, 18), 12.9148372020176,4.37814835290338]);
var options = {
title: 'Stock Performance',
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
var data0 = new google.visualization.DataTable();
data0.addColumn('date', 'Day');
data0.addColumn('number', 'Company #4');
data0.addRow([new Date(2015, 11, 27), 12.7389789250395]);
data0.addRow([new Date(2015, 11, 26), 6.76681987790708]);
data0.addRow([new Date(2015, 11, 25), 15.7216755155109]);
data0.addRow([new Date(2015, 11, 24), 7.44940381844035]);
data0.addRow([new Date(2015, 11, 23), 9.02574470221333]);
data0.addRow([new Date(2015, 11, 22), 11.9767397269498]);
data0.addRow([new Date(2015, 11, 21), 14.5598888055235]);
data0.addRow([new Date(2015, 11, 20), 12.2693184056642]);
data0.addRow([new Date(2015, 11, 19), 8.29967047194935]);
data0.addRow([new Date(2015, 11, 18), 12.9148372020176]);
var options0 = {
title: 'Stock Performance',
width: 300,
height: 300
};
var chart0 = new google.charts.Line(document.getElementById('e480c510499e4bbdaa8ae8e4a1001cd8'));
chart0.draw(data0, options0);
var data1 = new google.visualization.DataTable();
data1.addColumn('date', 'Day');
data1.addColumn('number', 'Company #2');
data1.addRow([new Date(2015, 11, 27), 4.10950499778125]);
data1.addRow([new Date(2015, 11, 26), 8.38212726329552]);
data1.addRow([new Date(2015, 11, 25), 4.36060299741132]);
data1.addRow([new Date(2015, 11, 24), 3.34093286951116]);
data1.addRow([new Date(2015, 11, 23), 10.0405249521325]);
data1.addRow([new Date(2015, 11, 22), 5.29850781210629]);
data1.addRow([new Date(2015, 11, 21), 6.3867255497662]);
data1.addRow([new Date(2015, 11, 20), 3.70270192981823]);
data1.addRow([new Date(2015, 11, 19), 17.0856299675469]);
data1.addRow([new Date(2015, 11, 18), 4.37814835290338]);
var options1 = {
title: 'Stock Performance',
width: 300,
height: 300
};
var chart1 = new google.charts.Line(document.getElementById('2dea80b0fabd43bba019dbc3ddf342aa'));
chart1.draw(data1, options1);
}
The problem is that each time the page loads, only one of the three charts is being rendered. (Each time a different one)
Anyone has ever encountered such issue?
The same issue was reported in google-visualization-issues repository:
The problems people have seen with the sizing of multiple instances of
material charts should be resolved with this new release. You can
change your code to load "1.1" now so that when the candidate release
becomes available, you will be using it.
There are at least two solutions available at the moment:
Option 1. Using the frozen version loader.
Since
The rollout of the v43 candidate release that would fix this problem
switch to using the frozen version loader.
Steps:
1)Add a reference to loader: <script
src="http://www.gstatic.com/charts/loader.js"></script>
2)Then load a 43 version of library: google.charts.load("43",{packages:["line"]});
3)Replace:
google.setOnLoadCallback(drawChart);
with
google.charts.setOnLoadCallback(drawChart);
Example
google.charts.load("43",{packages:["line"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('number', 'Company #4');
data.addColumn('number', 'Company #2');
data.addRow([new Date(2015, 11, 27), 12.7389789250395,4.10950499778125]);
data.addRow([new Date(2015, 11, 26), 6.76681987790708,8.38212726329552]);
data.addRow([new Date(2015, 11, 25), 15.7216755155109,4.36060299741132]);
data.addRow([new Date(2015, 11, 24), 7.44940381844035,3.34093286951116]);
data.addRow([new Date(2015, 11, 23), 9.02574470221333,10.0405249521325]);
data.addRow([new Date(2015, 11, 22), 11.9767397269498,5.29850781210629]);
data.addRow([new Date(2015, 11, 21), 14.5598888055235,6.3867255497662]);
data.addRow([new Date(2015, 11, 20), 12.2693184056642,3.70270192981823]);
data.addRow([new Date(2015, 11, 19), 8.29967047194935,17.0856299675469]);
data.addRow([new Date(2015, 11, 18), 12.9148372020176,4.37814835290338]);
var options = {
title: 'Stock Performance',
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
var data0 = new google.visualization.DataTable();
data0.addColumn('date', 'Day');
data0.addColumn('number', 'Company #4');
data0.addRow([new Date(2015, 11, 27), 12.7389789250395]);
data0.addRow([new Date(2015, 11, 26), 6.76681987790708]);
data0.addRow([new Date(2015, 11, 25), 15.7216755155109]);
data0.addRow([new Date(2015, 11, 24), 7.44940381844035]);
data0.addRow([new Date(2015, 11, 23), 9.02574470221333]);
data0.addRow([new Date(2015, 11, 22), 11.9767397269498]);
data0.addRow([new Date(2015, 11, 21), 14.5598888055235]);
data0.addRow([new Date(2015, 11, 20), 12.2693184056642]);
data0.addRow([new Date(2015, 11, 19), 8.29967047194935]);
data0.addRow([new Date(2015, 11, 18), 12.9148372020176]);
var options0 = {
title: 'Stock Performance',
width: 300,
height: 300
};
var chart0 = new google.charts.Line(document.getElementById('e480c510499e4bbdaa8ae8e4a1001cd8'));
chart0.draw(data0, options0);
var data1 = new google.visualization.DataTable();
data1.addColumn('date', 'Day');
data1.addColumn('number', 'Company #2');
data1.addRow([new Date(2015, 11, 27), 4.10950499778125]);
data1.addRow([new Date(2015, 11, 26), 8.38212726329552]);
data1.addRow([new Date(2015, 11, 25), 4.36060299741132]);
data1.addRow([new Date(2015, 11, 24), 3.34093286951116]);
data1.addRow([new Date(2015, 11, 23), 10.0405249521325]);
data1.addRow([new Date(2015, 11, 22), 5.29850781210629]);
data1.addRow([new Date(2015, 11, 21), 6.3867255497662]);
data1.addRow([new Date(2015, 11, 20), 3.70270192981823]);
data1.addRow([new Date(2015, 11, 19), 17.0856299675469]);
data1.addRow([new Date(2015, 11, 18), 4.37814835290338]);
var options1 = {
title: 'Stock Performance',
width: 300,
height: 300
};
var chart1 = new google.charts.Line(document.getElementById('2dea80b0fabd43bba019dbc3ddf342aa'));
chart1.draw(data1, options1);
}
<script src="http://www.google.com/jsapi"></script>
<script src="http://www.gstatic.com/charts/loader.js"></script>
<div id="e480c510499e4bbdaa8ae8e4a1001cd8"></div>
<div id="2dea80b0fabd43bba019dbc3ddf342aa"></div>
<div id="linechart_material"></div>
Option 2. Render charts synchronously
Since draw function is asynchronous, we utilize ready event handler to draw charts sequentially, in that case multiple chart should be rendered properly as demonstrated below.
Example
google.load('visualization', '1.1', { 'packages': ['line'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('number', 'Company #4');
data.addColumn('number', 'Company #2');
data.addRow([new Date(2015, 11, 27), 12.7389789250395,4.10950499778125]);
data.addRow([new Date(2015, 11, 26), 6.76681987790708,8.38212726329552]);
data.addRow([new Date(2015, 11, 25), 15.7216755155109,4.36060299741132]);
data.addRow([new Date(2015, 11, 24), 7.44940381844035,3.34093286951116]);
data.addRow([new Date(2015, 11, 23), 9.02574470221333,10.0405249521325]);
data.addRow([new Date(2015, 11, 22), 11.9767397269498,5.29850781210629]);
data.addRow([new Date(2015, 11, 21), 14.5598888055235,6.3867255497662]);
data.addRow([new Date(2015, 11, 20), 12.2693184056642,3.70270192981823]);
data.addRow([new Date(2015, 11, 19), 8.29967047194935,17.0856299675469]);
data.addRow([new Date(2015, 11, 18), 12.9148372020176,4.37814835290338]);
var options = {
title: 'Stock Performance',
width: 900,
height: 500
};
var data0 = new google.visualization.DataTable();
data0.addColumn('date', 'Day');
data0.addColumn('number', 'Company #4');
data0.addRow([new Date(2015, 11, 27), 12.7389789250395]);
data0.addRow([new Date(2015, 11, 26), 6.76681987790708]);
data0.addRow([new Date(2015, 11, 25), 15.7216755155109]);
data0.addRow([new Date(2015, 11, 24), 7.44940381844035]);
data0.addRow([new Date(2015, 11, 23), 9.02574470221333]);
data0.addRow([new Date(2015, 11, 22), 11.9767397269498]);
data0.addRow([new Date(2015, 11, 21), 14.5598888055235]);
data0.addRow([new Date(2015, 11, 20), 12.2693184056642]);
data0.addRow([new Date(2015, 11, 19), 8.29967047194935]);
data0.addRow([new Date(2015, 11, 18), 12.9148372020176]);
var options0 = {
title: 'Stock Performance',
width: 300,
height: 300
};
var data1 = new google.visualization.DataTable();
data1.addColumn('date', 'Day');
data1.addColumn('number', 'Company #2');
data1.addRow([new Date(2015, 11, 27), 4.10950499778125]);
data1.addRow([new Date(2015, 11, 26), 8.38212726329552]);
data1.addRow([new Date(2015, 11, 25), 4.36060299741132]);
data1.addRow([new Date(2015, 11, 24), 3.34093286951116]);
data1.addRow([new Date(2015, 11, 23), 10.0405249521325]);
data1.addRow([new Date(2015, 11, 22), 5.29850781210629]);
data1.addRow([new Date(2015, 11, 21), 6.3867255497662]);
data1.addRow([new Date(2015, 11, 20), 3.70270192981823]);
data1.addRow([new Date(2015, 11, 19), 17.0856299675469]);
data1.addRow([new Date(2015, 11, 18), 4.37814835290338]);
var options1 = {
title: 'Stock Performance',
width: 300,
height: 300
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
google.visualization.events.addOneTimeListener(chart, 'ready', function(){
var chart0 = new google.charts.Line(document.getElementById('e480c510499e4bbdaa8ae8e4a1001cd8'));
google.visualization.events.addOneTimeListener(chart0, 'ready', function(){
var chart1 = new google.charts.Line(document.getElementById('2dea80b0fabd43bba019dbc3ddf342aa'));
chart1.draw(data1, options1);
});
chart0.draw(data0, options0);
});
chart.draw(data, options);
}
<script src="http://www.google.com/jsapi"></script>
<div id="e480c510499e4bbdaa8ae8e4a1001cd8"></div>
<div id="2dea80b0fabd43bba019dbc3ddf342aa"></div>
<div id="linechart_material"></div>
I've been unable to find documentation that would let me combine the look of these two charts:
Irregular Time ChartLine/Time Chart with Gradient Fill
I'm attempting to put a gradient fill under each of 3 lines in an irregular time chart.
Here's as far as I got: http://jsfiddle.net/WNDUH/
Any help would be appreciated!
Try moving the area object into plotOptions then defining the type and fillColor of each series.
EDIT
http://jsfiddle.net/WNDUH/10/
JS:
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart : {
renderTo : 'container',
type : 'spline',
backgroundColor : {
linearGradient : [0, 0, 0, 400],
stops : [
[0, 'rgb(96, 96, 96)'],
[1, 'rgb(16, 16, 16)']
]
}
},
title : {
text : 'Snow depth in the Vikjafjellet mountain, Norway'
},
subtitle : {
text : 'An example of irregular time data in Highcharts JS'
},
xAxis : {
type : 'datetime',
dateTimeLabelFormats : { // don't display the dummy year
month : '%e. %b',
year : '%b'
}
},
yAxis : {
title : {
text : 'Snow depth (m)'
},
min : 0
},
tooltip : {
formatter : function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%e. %b', this.x) + ': ' + this.y + ' m';
}
},
plotOptions : {
area : {
lineWidth : 1,
marker : {
enabled : false,
states : {
hover : {
enabled : true,
radius : 5
}
}
},
shadow : false,
states : {
hover : {
lineWidth : 1
}
}
}
},
series : [{
name : 'Winter 2007-2008',
type : "area",
fillColor : {
linearGradient : [0, 0, 0, 300],
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(2,0,0,0)']
]
},
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data : [
[Date.UTC(1970, 9, 27), 0],
[Date.UTC(1970, 10, 10), 0.6],
[Date.UTC(1970, 10, 18), 0.7],
[Date.UTC(1970, 11, 2), 0.8],
[Date.UTC(1970, 11, 9), 0.6],
[Date.UTC(1970, 11, 16), 0.6],
[Date.UTC(1970, 11, 28), 0.67],
[Date.UTC(1971, 0, 1), 0.81],
[Date.UTC(1971, 0, 8), 0.78],
[Date.UTC(1971, 0, 12), 0.98],
[Date.UTC(1971, 0, 27), 1.84],
[Date.UTC(1971, 1, 10), 1.80],
[Date.UTC(1971, 1, 18), 1.80],
[Date.UTC(1971, 1, 24), 1.92],
[Date.UTC(1971, 2, 4), 2.49],
[Date.UTC(1971, 2, 11), 2.79],
[Date.UTC(1971, 2, 15), 2.73],
[Date.UTC(1971, 2, 25), 2.61],
[Date.UTC(1971, 3, 2), 2.76],
[Date.UTC(1971, 3, 6), 2.82],
[Date.UTC(1971, 3, 13), 2.8],
[Date.UTC(1971, 4, 3), 2.1],
[Date.UTC(1971, 4, 26), 1.1],
[Date.UTC(1971, 5, 9), 0.25],
[Date.UTC(1971, 5, 12), 0]
]
}, {
name : 'Winter 2008-2009',
type : "area",
fillColor : {
linearGradient : [0, 0, 0, 300],
stops : [
[0, Highcharts.getOptions().colors[1]],
[1, 'rgba(2,0,0,0)']
]
},
data : [
[Date.UTC(1970, 9, 18), 0],
[Date.UTC(1970, 9, 26), 0.2],
[Date.UTC(1970, 11, 1), 0.47],
[Date.UTC(1970, 11, 11), 0.55],
[Date.UTC(1970, 11, 25), 1.38],
[Date.UTC(1971, 0, 8), 1.38],
[Date.UTC(1971, 0, 15), 1.38],
[Date.UTC(1971, 1, 1), 1.38],
[Date.UTC(1971, 1, 8), 1.48],
[Date.UTC(1971, 1, 21), 1.5],
[Date.UTC(1971, 2, 12), 1.89],
[Date.UTC(1971, 2, 25), 2.0],
[Date.UTC(1971, 3, 4), 1.94],
[Date.UTC(1971, 3, 9), 1.91],
[Date.UTC(1971, 3, 13), 1.75],
[Date.UTC(1971, 3, 19), 1.6],
[Date.UTC(1971, 4, 25), 0.6],
[Date.UTC(1971, 4, 31), 0.35],
[Date.UTC(1971, 5, 7), 0]
]
}, {
name : 'Winter 2009-2010',
type : "area",
fillColor : {
linearGradient : [0, 0, 0, 300],
stops : [
[0, Highcharts.getOptions().colors[2]],
[1, 'rgba(2,0,0,0)']
]
},
data : [
[Date.UTC(1970, 9, 9), 0],
[Date.UTC(1970, 9, 14), 0.15],
[Date.UTC(1970, 10, 28), 0.35],
[Date.UTC(1970, 11, 12), 0.46],
[Date.UTC(1971, 0, 1), 0.59],
[Date.UTC(1971, 0, 24), 0.58],
[Date.UTC(1971, 1, 1), 0.62],
[Date.UTC(1971, 1, 7), 0.65],
[Date.UTC(1971, 1, 23), 0.77],
[Date.UTC(1971, 2, 8), 0.77],
[Date.UTC(1971, 2, 14), 0.79],
[Date.UTC(1971, 2, 24), 0.86],
[Date.UTC(1971, 3, 4), 0.8],
[Date.UTC(1971, 3, 18), 0.94],
[Date.UTC(1971, 3, 24), 0.9],
[Date.UTC(1971, 4, 16), 0.39],
[Date.UTC(1971, 4, 21), 0]
]
}
]
});
});
});
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>