Hi,
I want to plot area chart with a slider. For the slider I need to use
the time values.
How can I do this ??? As it say time is not a number value.
Is there any way to convert time in numbers or use the area chart with
time format...
Please help me....
Below is the sample code..... I want to use time for the slider value
Thanks
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Turnkey Instrumentse</title>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/
jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.load('visualization', '1.0', {'packages':['controls']});
// Set a callback to run when the Google Visualization API is
loaded.
google.setOnLoadCallback(drawDashboard);
var slider;
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
// Create our data table.
var data = google.visualization.arrayToDataTable([
['TimeStamp','Total', 'Value1',
'Value2', 'Value3' ],
['29/09/2011 18:33',10.7,8.1,3.73,1.3],
['29/09/2011 18:38',12.6,8.7,3.84,1.29],
['29/09/2011 18:43',11.2,8.3,3.61,1.25],
['29/09/2011 18:48',11.1,7.5,3.62,1.23],
['29/09/2011 18:53',12.3,8.2,3.4,1.2],
['29/09/2011 18:58',8.4,6.9,3.37,1.21],
['29/09/2011 19:03',10.2,6.8,3.41,1.24],
['29/09/2011 19:08',7.5,6.3,3.33,1.23],
['29/09/2011 19:13',9.6,6.3,3.19,1.19],
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
slider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Total'
}
});
// Create a pie chart, passing some options
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'AreaChart',
'containerId': 'chart_div',
'options': {
'width': 800,
'height': 500,
'pieSliceText': 'value',
'legend': 'right'
}
});
// Establish dependencies, declaring that 'filter' drives
'pieChart',
// so that the pie chart will only display entries that are
let through
// given the chosen slider range.
dashboard.bind(slider, pieChart);
// Draw the dashboard.
dashboard.draw(data);
}
</script>
</head>
<body>
<!--Div that will hold the dashboard-->
<div id="dashboard_div" style="overflow:auto;width: 1000px;
height: 600px;">
<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div id="chart_div" "></div>
</div>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
