I'm not quite sure what you are trying to do, but I see the source of the
problem. In your table 'ready' handler, you are setting the table of the
line chart and drawing it, with this code:
line.setDataTable(groupedData);
line.draw();
Commenting out those two lines allows the dashboard to be displayed without
error. Modifying the incoming data of components of a dashboard directly
yourself is normally the wrong thing to do since the dashboard is also
managing this for you.
You might be able to change the view component of the line chart's
chartwrapper, and then draw it again.
On Thu, Jun 12, 2014 at 7:44 AM, ma <misbah.ali...@gmail.com> wrote:
> Thank you for your response back. I have setup the code below, which
> shows the current data I am using. I think it may be the line chart
> wrapper code, which may be throwing the error. Please advice, if possible.
>
> I was going to link to jsFiddle, but apparently the website is down and I
> am unable to reference the code from jsFiddle.
>
> Thank you for your help and time.
>
>
> <html xmlns="http://www.w3.org/1999/xhtml";>
> <head runat="server">
> <title>Series Testing</title>
> <script type="text/javascript" src="http://www.google.com/jsapi
> "></script>
> <script type="text/javascript">
> google.load('visualization', '1.0', { packages: ['controls'] });
> </script>
> <script type="text/javascript">
> function drawVisualization() {
> // Prepare the data
> var data = google.visualization.arrayToDataTable([
> ['Name', 'Tag', 'Type', 'Date'],
> ['WCHC 2007-1 PREF', 45, 'TK',new Date(2014, 12, 06)],
> ['WCHC 2007-1 PREF', 85, 'TK', new Date(2014, 12, 06)],
> ['VWALT 2014-A A2A', 100, 'TK', new Date(2014, 12, 06)],
> ['TRAP 2002-1A C1', 100.5, 'TK', new Date(2014, 12, 06)],
> ['TALON 1W 1', 99.5, 'TK', new Date(2014, 12, 06)],
> ['TALON 1W 1', 85.5, 'TK', new Date(2014, 12, 06)],
> ['TRAP 2002-1A C1', 99.6, 'TK', new Date(2014, 12, 06)]
>
> ]);
>
> // Define category pickers for 'Name'
> var countryPicker = new google.visualization.ControlWrapper({
> 'controlType': 'CategoryFilter',
> 'containerId': 'control1',
> 'options': {
> 'filterColumnLabel': 'Name',
> 'ui': {
> 'labelStacking': 'vertical',
> 'allowTyping': false,
> 'allowMultiple': false
> }
> }
> });
>
> var dateFormatter = new google.visualization.DateFormat({
> pattern: 'dd MM yyyy' });
> var line = new google.visualization.ChartWrapper({
> 'chartType': 'LineChart',
> 'containerId': 'chart1',
> 'options': {
> 'width': 950,
> 'height': 450,
> 'legend': 'none',
>
> 'hAxis': {
> 'format': "dd-MM-yyyy",
> 'hAxis.maxValue': 'viewWindow.max',
> 'maxValue': new Date(2014, 06, 30), 'minValue':
> new Date(2014, 06, 05),
> 'viewWindow': { 'max': new Date(2014, 06, 30) },
> },
> // 'chartArea': { 'left': 100, 'top': 100, 'right': 0,
> 'bottom': 100 },
> 'chartArea': { 'height': '80%', 'width': '80%' },
> 'tooltip': { isHtml: true }
> },
> 'view': {
> 'columns': [{
>
> type: 'string',
> label: data.getColumnLabel(3),
> calc: function (dt, row) {
> var date = dt.getValue(row, 3);
> return dateFormatter.formatValue(date);
> }
> }, 1, {
> type: 'string',
> role: 'tooltip',
> calc: function (dt, row) {
> return 'Name: ' + dt.getValue(row, 0) + ',
> Price: ' + +dt.getValue(row, 1) + ', Date: ' + +dt.getFormattedValue(row,
> 3);
> }
> }]
> }
> });
>
> // Define a table.
> var table = new google.visualization.ChartWrapper({
> 'chartType': 'Table',
> 'containerId': 'chart2',
> 'options': {
> 'width': '600px'
> }
> });
>
> google.visualization.events.addListener(table, 'ready',
> function () {
> var filteredData = table.getDataTable();
> // get a list of all the labels in column 0
> var group = filteredData.getDistinctValues(0);
>
> // build the columns for the view
> var columns = [3],
> groupColumns = [];
> for (var i = 0; i < group.length; i++) {
> var label = group[i];
> // set the columns to use in the chart's view
> // calculated columns put data belonging to each
> country in the proper column
> columns.push({
> type: 'number',
> label: label,
> calc: (function (name) {
> return function (dt, row) {
> return (dt.getValue(row, 0) == name) ?
> dt.getValue(row, 1) : null;
> }
> })(label)
> });
> groupColumns.push({
> type: 'number',
> label: label,
> column: i + 1,
> aggregation: google.visualization.data.sum
> });
> }
> var view = new google.visualization.DataView(filteredData);
> view.setColumns(columns);
> var groupedData = google.visualization.data.group(view,
> [0], groupColumns);
>
> line.setDataTable(groupedData);
> line.draw();
> });
>
> new
> google.visualization.Dashboard(document.getElementById('dashboard')).bind([countryPicker],
> [table, line]).draw(data);
> }
>
> google.setOnLoadCallback(drawVisualization);
> </script>
> </head>
> <body>
> <div id="dashboard">
> <table>
> <tr style='vertical-align: top'>
> <td style='width: 300px; font-size: 0.9em;'>
> <div id="control1"></div>
> <div id="control2"></div>
> <div id="control3"></div>
> </td>
> <td style='width: 800px'>
> <div style="float: left;" id="chart1"></div>
> <div style="float: left;" id="chart2"></div>
> <div style="float: left;" id="chart3"></div>
> </td>
> </tr>
> </table>
> </div>
> </body>
> </html>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Google Visualization API" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to google-visualization-api+unsubscr...@googlegroups.com.
> To post to this group, send email to
> google-visualization-api@googlegroups.com.
> Visit this group at
> http://groups.google.com/group/google-visualization-api.
> For more options, visit https://groups.google.com/d/optout.
>
--
Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> -
978-394-1058
dlalibe...@google.com <dlalibe...@google.com> 5CC, Cambridge MA
daniel.lalibe...@gmail.com <daniel.lalibe...@gmail.com> 9 Juniper Ridge
Road, Acton MA
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
