Sliders in area chart!!!
1,243 views
Skip to first unread message
mrishadali
May 2, 2012, 4:30:35 AM5/2/12
to Google Visualization API
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>
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>
asgallant
May 2, 2012, 10:13:04 AM5/2/12
to google-visua...@googlegroups.com
You need to pass your date and time data as Date objects:
var data = google.visualization.arrayToDataTable([
['TimeStamp', 'Total', 'Value1', 'Value2', 'Value3'],
['TimeStamp', 'Total', 'Value1', 'Value2', 'Value3'],
[new Date(2011, 8, 29, 18, 33), 10.7, 8.1, 3.73, 1.3],
[new Date(2011, 8, 29, 18, 38), 12.6, 8.7, 3.84, 1.29],
[new Date(2011, 8, 29, 18, 43), 11.2, 8.3, 3.61, 1.25],
[new Date(2011, 8, 29, 18, 48), 11.1, 7.5, 3.62, 1.23],
[new Date(2011, 8, 29, 18, 53), 12.3, 8.2, 3.4, 1.2],
[new Date(2011, 8, 29, 18, 58), 8.4, 6.9, 3.37, 1.21],
[new Date(2011, 8, 29, 19, 3), 10.2, 6.8, 3.41, 1.24],
[new Date(2011, 8, 29, 19, 8), 7.5, 6.3, 3.33, 1.23],
[new Date(2011, 8, 29, 19, 13), 9.6, 6.3, 3.19, 1.19],
]);
The format is:
[new Date(2011, 8, 29, 18, 38), 12.6, 8.7, 3.84, 1.29],
[new Date(2011, 8, 29, 18, 43), 11.2, 8.3, 3.61, 1.25],
[new Date(2011, 8, 29, 18, 48), 11.1, 7.5, 3.62, 1.23],
[new Date(2011, 8, 29, 18, 53), 12.3, 8.2, 3.4, 1.2],
[new Date(2011, 8, 29, 18, 58), 8.4, 6.9, 3.37, 1.21],
[new Date(2011, 8, 29, 19, 3), 10.2, 6.8, 3.41, 1.24],
[new Date(2011, 8, 29, 19, 8), 7.5, 6.3, 3.33, 1.23],
[new Date(2011, 8, 29, 19, 13), 9.6, 6.3, 3.19, 1.19],
]);
The format is:
new Date(year, month, day, hour, minute)
Note that months are zero-indexed in javascript, so September is 8 not 9. You can specify the output format of the date by setting the hAxis.format option:
hAxis: {
format: 'dd/MM/yyyy hh:mm'
}
format: 'dd/MM/yyyy hh:mm'
}
mrishadali
May 2, 2012, 11:35:19 AM5/2/12
to google-visua...@googlegroups.com
Thank you very much for your reply...
but Still not working...
Did you try it???
Please reply
Thanks again
asgallant
May 2, 2012, 12:32:18 PM5/2/12
to google-visua...@googlegroups.com
Sorry, I didn't read through your whole post. The NumberRangeFilter control is designed to filter out data points by the series value, not by the axis value. What you want is a ChartRangeFilter control.
mrishadali
May 3, 2012, 6:57:11 AM5/3/12
to google-visua...@googlegroups.com
This is awesome.... Thank you very much... This is what I wanted...
On Wednesday, May 2, 2012 9:30:35 AM UTC+1, mrishadali wrote:
Thanks a million
And Can I ask you one more question... I posted It as well in the group..... Can I use this google-visualization-api for the commercial perpose.
I read the
Terms of Service but not sure about it!!!!
I work for a company, they design instruments for measuring dust particles in the air and some other instruments.
I want to use google visualization API for their website where clients can visualize their instrument's response.
Is it legal to use this API for the said purpose.
I want to use google visualization API for their website where clients can visualize their instrument's response.
Is it legal to use this API for the said purpose.
Thank you
On Wednesday, May 2, 2012 9:30:35 AM UTC+1, mrishadali wrote:
asgallant
May 3, 2012, 10:59:35 AM5/3/12
to google-visua...@googlegroups.com
I'm not a lawyer and I don't work for Google, so take this with a grain of salt. Generally, yes you can use the API for business purposes. If I recall correctly, you should be ok as long as you don't charge money for access to the charts produced by the API or use it for illegal purposes. I think they can be a part of a paid service, but you can't charge specifically for the charts themselves. To be certain, you should ask your company's contracts or legal department to review the TOS and contact Google if there are any questions.
asgallant
Sep 12, 2012, 6:14:43 PM9/12/12
to google-visua...@googlegroups.com
For better or worse, the documentation on Google's site is pretty much all there is. I know it can be somewhat impenetrable for newcomers and is occasionally vague, inconsistent, contradictory, or outright wrong. Since you brought it up, we can use title formatting as an example: the titleTextStyle option controls the styling of the chart title, but the description breaks the convention established for all other documented options. titleTextStyle is an option that accepts an object with 3 sub-options (color, fontName, fontSize), which should be described as three separate options (see, for example, the documentation of the tooltip option). Perhaps the documentation writers had good reason for this, but perhaps it is just an oversight that never got corrected.
In my experience, there is no better tool for learning the API than taking the examples provided and playing around with them. The Visualization Playground is a good place to start; I also recommend setting up an account on jsfiddle.net, which will allow you to build, test, and save your scripts (it even includes versioning, so you can go back to a previously saved version of a script by entering the version number in the url). I have some published fiddles that you can use as a starting point (here); most of them are hacks that I wrote to make the API do something that it wasn't originally intended to do, and a few are just demonstrations. My code documentation isn't particularly good, but I'm happy to explain anything that isn't clear.
On Wednesday, September 12, 2012 3:14:08 PM UTC-4, krab wrote:
On Wednesday, September 12, 2012 3:14:08 PM UTC-4, krab wrote:
Asgallant. This question is just directed at you. I'm learning this api for first time and I really just want to see better reference material. Like what are all the possible ways to format a title? Things like that. Where do you recommend I look? It took me about 5 mins to find many posts that you have answered, which obviously tells me you are a master source, your self. :)
Message has been deleted
krab
Sep 13, 2012, 11:14:28 AM9/13/12
to google-visua...@googlegroups.com
Thanks asgallant. I already did the jsfiddle thing after seeing your examples. It seems like one of those, "this is awesome, i hope they don't change it because the free features are very generous", kind of tools. I'll take your advice but so far I'm mainly limited to just reading code. I've just started a new work experience job and they are still trying to get my full admin rights, until then I'm really limited in what I can try... At least jsfiddle and the visualization playground are letting me do some valuable learning for the time being.
Reply all
Reply to author
Forward
0 new messages