带有滑块的Google Chart仪表板 [英] Google Chart Dashboard with Slider

查看：64
本文介绍了带有滑块的Google Chart仪表板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经使用Google图表成功创建了一个包含动态图表的网站。
然后我尝试添加一个滑块，但是失败了。
我得到的错误是一个或多个参与者未能绘制（）和列0不是数字。



工作网页的脚本网站是： 

 < script type =text / javascript> 
 
 google.charts.load（'current'，{'packages'：['corechart']}）; 
 google.charts.setOnLoadCallback（drawChart）; 
 
函数drawChart（）{
 var jsonData = $ .ajax（{
 url：ulsuccessperop.php，
 dataType：json，
 async：false 
}）。responseText; 
 
 var data = new google.visualization.DataTable（jsonData）; 
 var'options'{'b $ b'title'：'UL per operator'，
'width'：1200，
'height'：900，
 chartArea：{左：80，上：50，宽：70％，高：80％} 
}; 
 
 var chart = new google.visualization.LineChart（document.getElementById（'chart_div'））; 
 chart.draw（data，options）; 
} 
 
< / script>

不工作的网站脚本是：

 < script type =text / javascript> 
 
 google.charts.load（'current'，{'packages'：['corechart'，'controls']}）; 
 google.charts.setOnLoadCallback（drawDashboard）; 
 
函数drawDashboard（）{
 var jsonData = $ .ajax（{
 url：ulsuccessperop.php，
 dataType：json，
 async：false 
}）。responseText; 
 
 var data = new google.visualization.DataTable（jsonData）; 
 var dashboard = new google.visualization.Dashboard（document.getElementById（'dashboard_div'））; 
 
 var dataRangeSlider = new google.visualization.ControlWrapper（{$ b $'controlType'：'NumberRangeFilter'，$ b $'containerId'：'filter_div'，
'options' ：{
'filterColumnLabel'：'Data'
} 
}）; 
 $ b $ var lineChart = new google.visualization.ChartWrapper（{
'chartType'：'LineChart'，$ b $'containerId'：'chart_div'，
'options' ：{
'title'：'UL per operatore'，
'width'：1200，
'height'：900，
 chartArea：{left：80，top： 50，宽度：70％，高度：80％} 
} 
 
}）; 
 
 dashboard.bind（dataRangeSlider，lineChart）; 
 dashboard.draw（data）; 
 
} 
 
< / script>

数据由PHP页面（ulsuccessperop.php）提供，返回一个JSON格式的值数组（多栏）。
可能要提供给仪表板的数据与要提供给Chart的数据不同，但我在Google图表文档中找不到任何相关信息。



< hr>

WhiteHat建议更改后的新代码： 

  google.charts.load （'current'，{'packages'：['corechart'，'controls']}）; 
 
 google.charts.setOnLoadCallback（drawDashboard）; 
 
函数drawDashboard（）{
 var jsonData = $ .ajax（{$ b $ url：data / regperop.php，
 dataType：json，
 async：false 
））。responseText; 
 
 var data = new google.visualization.DataTable（jsonData）; 
 var view = new google.visualization.DataView（data ）; 
 view.setColumns（[{
 calc：function（data，row）{
 return new Date（data.getValue（row，0））
}，
 type：'date'，
 label：'Data'
}，1,2,3,4]）; 
 
 
 var dashboard = new google .visualization.Dashboard（document.getElementById（'dashboard_div'））; 
 
 var dataRangeSlider = new google.visualization.ControlWrapper（{$ b $'controlType'：'DateRangeFilter'，
 'containerId'：'filter_div'，
'options'：{
'filterColumnLabel'：'Data'
} 
 }）; 
 
 
 google.visualization.events.addListener（dataRangeSlider，'ready'，function（）{
 var state = dataRangeSlider.getState（）; 
 console.log（state.lowValue，state.highValue）; 
}）; 
 
 $ b var lineChart = new google.visualization.ChartWrapper（{$ b $'chartType'：'LineChart'，$ b $'containerId'：'chart_div'，
'选项'：{
'title'：'Numero registrazioni per operatore'，'width'：1200，
'height'：900，
 chartArea：{left：80，top： 50，宽度：70％，高度：80％} 
} 
 
}）; 
 
 
 dashboard.bind（dataRangeSlider，lineChart）; 
 dashboard.draw（data）; 
 
}

JSON数据示例如下：

  {cols：[{label：Data，type：date}，
 {label ：OP1，type：number}，
 {label：OP2，type：number}，
 {label：OP3， type：number}，
 {label：OP4，type：number}]，
rows：[{c：[{v ：08-01-2016}，{v：0}，{v：0}，{v：0}，{v：0}]}，
 { C：[{ v： 2016年8月2日}，{ v：0}，{ v：0}，{ v：0}，{ v：0} ]}，
 {c：[{v：08-03-2016}，{v：0}，{v：0}，{v：0} ，{v：0}]}，
 {c：[{v：08-04-2016}，{v：0}，{v：0} ，{v：0}，{v：0}]，
 {c：[{v：08-05-2016}，{v：0} ，{v：0}，{v：0}，{v：0}]}，
 {c：[{v：08-06-2016} ，{v：0}，{v：0}，{v：0}，{v：0}]}，
 {c：[{v： 08-07-2016}，{v：0}，{v：0}，{v：0}，{v：0}]}，
 {c ：[{ v ： 2016年8月8日 }，{ v ：0}，{ v ：0}，{ v ：0}，{ v：0}]} ，
 {c：[{v：08-09-2016}，{v：0}，{v：0}，{v：0}，{ v：0}]}，
 {c：[{v：08-10-2016}，{v：0}，{v：0}，{v：0}，{v ：0}]}]}


解决方案

code>'Data'看起来您想使用 DateRangeFilter 与 NumberRangeFilter



例如 - > controlType：'DateRangeFilter'，



但是如果您想使用其中的任何一种，除...以外


类型：'string'



需要 type：'date' for 'DateRangeFilter'



类型：'number'对于'NumberRangeFilter'



'DateRangeFilter'，

需要修改JSON以便Google将第一列识别为日期



1。如果您不想更改JSON，请使用 DataView 更改第一列

请参阅下面的工作片段...


$ b 

  google.charts.load（'current'，{callback：drawDashboa rd，packages：['corechart'，'controls']}）;函数drawDashboard（）{var jsonData = {cols：[{label：Data，type：string}，{标签：OP1，type：number}，{label：OP2，type：number}，{label：OP3，type：number }，{label：SFR（208-10），type：number}]，rows：[{c：[{v：2016-10-18}} ，{v：1}，{v：0}，{v：1}，{v：0}]}，{c：[{v： -19}，{v：1}，{v：0}，{v：1}，{v：0}]}，{c：[{v 2016-10-20}，{v：1}，{v：0}，{v：1}，{v：0}]}，{c：[ v：2016-10-21}，{v：1}，{v：0}，{v：1}，{v：0}]}，{c ：[{v：}，{v：1}，{v：0}，{v：1}，{v：0}]}]}; var data = new google.visualization.DataTable（jsonData）; var view = new google.visualization.DataView（data）; view.setColumns（[{calc：function（data，row）{return new Date（data.getValue（row，0））}，type：'date'，label：'Data'}，1,2,3,4 ]）; var dataRangeSlider = new google.visualization.ControlWrapper（{controlType：'DateRangeFilter'，containerId：'filter_div'，options：{filterColumnLabel：'Data'}}）; google.visualization.events.addListener（dataRangeSlider，'ready'，function（）{var state = dataRangeSlider.getState（）; console.log（state.lowValue，state.highValue）;}）; var lineChart = new google.visualization.ChartWrapper（{chartType：'LineChart'，containerId：'chart_div'，options：{title：'UL per operatore'，width：1200，height：900，chartArea：{left：80，顶部：50，宽度：'70％'，高度：'80％'}}}）; var dashboard = new google.visualization.Dashboard（document.getElementById（'dashboard_div'））; dashboard.bind（dataRangeSlider，lineChart）; dashboard.draw（view）;}

< script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =dashboard_div> < div id =filter_div>< / div> < div id =chart_div>< / div>< / div>

2。如果您要更改JSON，则应该按照以下工作片段格式化。



//注意：使用这个构造函数的月份是基于零的！ （9 = OCT）


{v：Date（2016，9，18）} >
或

{v：null}

< script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =dashboard_div> < div id =filter_div>< / div> < div id =chart_div>< / div>< / div>

I have successfully created a web site with dynamic charts using Google Charts. Then I tried to add a slider but I failed. The error I get is "One or more participants failed to draw()" and "Column 0 is not numeric".

The script of the working web site is:

<script type="text/javascript">

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var jsonData = $.ajax({
    url: " ulsuccessperop.php ",          
    dataType: "json",
    async: false
  }).responseText;

  var data = new google.visualization.DataTable(jsonData);
  var options = {
     'title': 'UL Success per operatore',              
     'width':1200,
     'height':900,
     chartArea:{left:80,top:50,width:"70%",height:"80%"}
     };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
}

</script>

The script of the not working web site is:

<script type="text/javascript">

google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawDashboard);

function drawDashboard() {
   var jsonData = $.ajax({
       url: "ulsuccessperop.php",               
       dataType: "json",
       async: false
       }).responseText;

   var data = new google.visualization.DataTable(jsonData);                     
   var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));        

   var dataRangeSlider = new google.visualization.ControlWrapper({      
      'controlType': 'NumberRangeFilter',
      'containerId': 'filter_div',
      'options': {
            'filterColumnLabel': 'Data'
            }
       });

   var lineChart = new google.visualization.ChartWrapper({
       'chartType': 'LineChart',
       'containerId': 'chart_div',
       'options': {
           'title': 'UL Success per operatore',             
           'width':1200,
           'height':900,
           chartArea:{left:80,top:50,width:"70%",height:"80%"}
           }

      });

dashboard.bind(dataRangeSlider, lineChart);
dashboard.draw(data);

}

</script>

The data is provided by a PHP page (ulsuccessperop.php) that return a JSON formatted array of values (multiple column). Probably the data to be provided to Dashboard is different to those to be provided to Chart, but I can't find anything in the Google Chart documentation about that.

New code after changes suggested by WhiteHat:

google.charts.load('current', {'packages':['corechart', 'controls']});

google.charts.setOnLoadCallback(drawDashboard);

function drawDashboard() {
    var jsonData = $.ajax({
        url: "data/regperop.php,
        dataType: "json",
        async: false
        }).responseText;

    var data = new google.visualization.DataTable(jsonData);                
    var view = new google.visualization.DataView(data);                     
    view.setColumns([{
      calc: function (data, row) {
        return new Date(data.getValue(row, 0))
      },
      type: 'date',
      label: 'Data'
    }, 1, 2, 3, 4]);


    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));   

    var dataRangeSlider = new google.visualization.ControlWrapper({     
        'controlType': 'DateRangeFilter',
        'containerId': 'filter_div',
        'options': {
            'filterColumnLabel': 'Data'
       }
    });


    google.visualization.events.addListener(dataRangeSlider, 'ready', function () {
        var state = dataRangeSlider.getState();
        console.log(state.lowValue, state.highValue);
      });


    var lineChart = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
        'containerId': 'chart_div',
        'options': {
            'title': 'Numero registrazioni per operatore',              'width':1200,
            'height':900,
            chartArea:{left:80,top:50,width:"70%",height:"80%"}
        }

    });


    dashboard.bind(dataRangeSlider, lineChart);
    dashboard.draw(data);

}

An example of JSON data follows:

{"cols":[{"label":"Data","type":"date"},
        {"label":"OP1","type":"number"},
        {"label":"OP2","type":"number"},
        {"label":"OP3","type":"number"},
        {"label":"OP4","type":"number"}],
 "rows":[{"c":[{"v":"08-01-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
         {"c":[{"v":"08-02-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
         {"c":[{"v":"08-03-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
         {"c":[{"v":"08-04-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
         {"c":[{"v":"08-05-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
         {"c":[{"v":"08-06-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
         {"c":[{"v":"08-07-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
         {"c":[{"v":"08-08-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
         {"c":[{"v":"08-09-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
         {"c":[{"v":"08-10-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]}]}

解决方案

from the 'Data' it appears you want to use a DateRangeFilter vs. NumberRangeFilter

e.g. --> controlType: 'DateRangeFilter',

but if you want to use either, the first column needs something other than...
type: 'string'

need type: 'date' for 'DateRangeFilter'

type: 'number' for 'NumberRangeFilter'

also, if using a 'DateRangeFilter',
the JSON will need to be modified for google to recognize first column as a date

1. if you don't want to change the JSON, use a DataView to change the first column

see following working snippet... 

google.charts.load('current', {
  callback: drawDashboard,
  packages: ['corechart', 'controls']
});

function drawDashboard() {
  var jsonData = {
    "cols":[
      {"label":"Data", "type":"string"},
      {"label":"OP1", "type":"number"},
      {"label":"OP2", "type":"number"},
      {"label":"OP3", "type":"number"},
      {"label":"SFR(208-10)", "type":"number"}
    ],
    "rows":[
      {"c":[{"v":"2016-10-18"},{"v":1},{"v":0},{"v":1},{"v":0}]},
      {"c":[{"v":"2016-10-19"},{"v":1},{"v":0},{"v":1},{"v":0}]},
      {"c":[{"v":"2016-10-20"},{"v":1},{"v":0},{"v":1},{"v":0}]},
      {"c":[{"v":"2016-10-21"},{"v":1},{"v":0},{"v":1},{"v":0}]},
      {"c":[{"v":""},{"v":1},{"v":0},{"v":1},{"v":0}]}
    ]
  };

  var data = new google.visualization.DataTable(jsonData);
  var view = new google.visualization.DataView(data);
  view.setColumns([{
    calc: function (data, row) {
      return new Date(data.getValue(row, 0))
    },
    type: 'date',
    label: 'Data'
  }, 1, 2, 3, 4]);

  var dataRangeSlider = new google.visualization.ControlWrapper({
    controlType: 'DateRangeFilter',
    containerId: 'filter_div',
    options: {
      filterColumnLabel: 'Data'
    }
  });

  google.visualization.events.addListener(dataRangeSlider, 'ready', function () {
    var state = dataRangeSlider.getState();
    console.log(state.lowValue, state.highValue);
  });

  var lineChart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart_div',
    options: {
      title: 'UL Success per operatore',
      width: 1200,
      height: 900,
      chartArea: {
        left: 80,
        top: 50,
        width: '70%',
        height: '80%'
      }
    }
  });

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
  dashboard.bind(dataRangeSlider, lineChart);
  dashboard.draw(view);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
  <div id="filter_div"></div>
  <div id="chart_div"></div>
</div>

2. if you want to change the JSON, it should be formatted as in the following working snippet...

// NOTE: Months using this constructor are zero-based! (9=OCT)
{"v":"Date(2016, 9, 18)"}
or
{"v":null} 

google.charts.load('current', {
  callback: drawDashboard,
  packages: ['corechart', 'controls']
});

function drawDashboard() {
  var jsonData = {
    "cols":[
      {"label":"Data","type":"date"},
      {"label":"OP1","type":"number"},
      {"label":"OP2","type":"number"},
      {"label":"OP3","type":"number"},
      {"label":"SFR(208-10)","type":"number"}
    ],
    "rows":[
      {"c":[{"v":"Date(2016, 9, 18)"},{"v":1},{"v":0},{"v":1},{"v":0}]},
      {"c":[{"v":"Date(2016, 9, 19)"},{"v":1},{"v":0},{"v":1},{"v":0}]},
      {"c":[{"v":"Date(2016, 9, 20)"},{"v":1},{"v":0},{"v":1},{"v":0}]},
      {"c":[{"v":"Date(2016, 9, 21)"},{"v":1},{"v":0},{"v":1},{"v":0}]},
      {"c":[{"v":null},{"v":1},{"v":0},{"v":1},{"v":0}]}
    ]
  };

  var data = new google.visualization.DataTable(jsonData);

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

  var dataRangeSlider = new google.visualization.ControlWrapper({
    controlType: 'DateRangeFilter',
    containerId: 'filter_div',
    options: {
      filterColumnLabel: 'Data'
    }
  });

  var lineChart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart_div',
    options: {
      title: 'UL Success per operatore',
      width: 1200,
      height: 900,
      chartArea: {
        left: 80,
        top: 50,
        width: '70%',
        height: '80%'
      }
    }
  });

  dashboard.bind(dataRangeSlider, lineChart);
  dashboard.draw(data);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
  <div id="filter_div"></div>
  <div id="chart_div"></div>
</div>

这篇关于带有滑块的Google Chart仪表板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆