All geek questions in one place

Google Charts "do not meet Control or Visualization specifications"

When I try to add a control panel item to the Google Chart work item, I get ".. does not match either the control specification or the visualization" related to the line " var dashboard = new ... " near the end.

The code below will work autonomously and reproduce the entire error:

 <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1.0', {'packages':['annotatedtimeline', 'controls']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'timestamp'); data.addColumn('number', 'Age Partnership'); data.addColumn('number', 'Aviva'); data.addColumn('number', 'Saga'); data.addColumn('number', 'Global'); data.addColumn('number', 'Bower'); data.addColumn('number', 'Esmart'); data.addColumn('number', 'key'); data.addRows(3); data.setValue(0, 0, new Date(2011, 10, 25, 15, 21, 16, 0));data.setValue(0, 2, 1);data.setValue(0, 1, 2);data.setValue(0, 7, 3);data.setValue(0, 5, 4);data.setValue(0, 4, 5);data.setValue(0, 3, 8);data.setValue(0, 6, 10);data.setValue(1, 0, new Date(2011, 10, 26, 12, 7, 50, 0));data.setValue(1, 1, 1);data.setValue(1, 2, 2);data.setValue(1, 4, 3);data.setValue(1, 7, 4);data.setValue(1, 5, 5);data.setValue(1, 3, 7);data.setValue(1, 6, 8);data.setValue(2, 0, new Date(2011, 10, 26, 12, 15, 2, 0));data.setValue(2, 1, 1);data.setValue(2, 2, 2);data.setValue(2, 7, 3);data.setValue(2, 4, 4);data.setValue(2, 5, 5);data.setValue(2, 6, 7);data.setValue(2, 3, 8); var options = { width: 1100, height: 450, title: 'Keyword Performance - equity release', hAxis: {title: 'Date/Time', showTextEvery: 24}, isStacked:"true", dateFormat: 'HH:mm MMMM dd, yyyy' }; var categoryPicker = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'control1', 'options': { 'filterColumnLabel': 'Metric', 'ui': { 'allowTyping': false, 'allowMultiple': true, 'selectedValuesLayout': 'belowStacked' } }, // Define an initial state, ie a set of metrics to be initially selected. 'state': {'selectedValues': [1,2,3,4,5,6,7]} }); var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div0')); chart.draw(data, options); var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).bind(categoryPicker, drawChart).draw(data, options); } </script> </head> <body> <div id="dashboard_div"> <!--Divs that will hold each control and chart--> <div id="control1"></div> <div id="chart_div0" style="width: 1100px; height: 450px;"></div> </div> </body> </html>
+4
source share
1 answer

To use a Dashboard element, you need to feed the ChartWrapper and ControlWrapper tags into it. Right now you are using only ControlWrapper and trying to associate it with a chart that is not participating in the dashboard itself (since this is not a ChartWrapper object). I tried to create an annotated timeline chart as part of a toolbar, but was not successful:

 function drawVisualization() { // Prepare the data var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Sold Pencils'); data.addColumn('string', 'title1'); data.addColumn('string', 'text1'); data.addColumn('number', 'Sold Pens'); data.addColumn('string', 'title2'); data.addColumn('string', 'text2'); data.addRows([ [new Date(2008, 1 ,1), 30000, null, null, 40645, null, null], [new Date(2008, 1 ,2), 14045, null, null, 20374, null, null], [new Date(2008, 1 ,3), 55022, null, null, 50766, null, null], [new Date(2008, 1 ,4), 75284, null, null, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'], [new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, null, null], [new Date(2008, 1 ,6), 33322, null, null, 39463, null, null] ]); // Define a slider control for the 'Donuts eaten' column var slider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'control1', 'options': { 'filterColumnLabel': 'Sold Pencils', 'ui': {'labelStacking': 'vertical'} } }); // Define a time line chart var timeline = new google.visualization.ChartWrapper({ 'chartType': 'AnnotatedTimeLine', 'containerId': 'chart1', 'options': { 'width': 600, 'height': 300, } }); // Create the dashboard. new google.visualization.Dashboard(document.getElementById('dashboard')). // Configure the slider to affect the piechart bind(slider, timeline). // Draw the dashboard draw(data); }

He cannot draw a chart (although control works fine). Perhaps because the Annotated Time Line chart is a flash chart, it does not work well in dashboards. Or it just might be that the ChartWrapper object type does not allow annotated timelines. If I do the same with a line chart, it works:

 function drawVisualization() { // Prepare the data var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Sold Pencils'); data.addColumn({type: 'string', role: 'annotation'}); data.addColumn({type: 'string', role: 'annotationText'}); data.addColumn('number', 'Sold Pens'); data.addColumn({type: 'string', role: 'annotation'}); data.addColumn({type: 'string', role: 'annotationText'}); data.addRows([ [new Date(2008, 1 ,1), 30000, null, null, 40645, null, null], [new Date(2008, 1 ,2), 14045, null, null, 20374, null, null], [new Date(2008, 1 ,3), 55022, null, null, 50766, null, null], [new Date(2008, 1 ,4), 75284, null, null, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'], [new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, null, null], [new Date(2008, 1 ,6), 33322, null, null, 39463, null, null] ]); // Define a slider control for the 'Donuts eaten' column var slider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'control1', 'options': { 'filterColumnLabel': 'Sold Pencils', 'ui': {'labelStacking': 'vertical'} } }); // Define a time line chart var timeline = new google.visualization.ChartWrapper({ 'chartType': 'LineChart', 'containerId': 'chart1', 'options': { 'width': 600, 'height': 300, } }); // Create the dashboard. new google.visualization.Dashboard(document.getElementById('dashboard')). // Configure the slider to affect the piechart bind(slider, timeline). // Draw the dashboard draw(data); }
+3
source

Source: https://habr.com/ru/post/1383863/

More articles:


All Articles