当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - multiple timeline charts using google timeline charts

问题描述:

I have a page with multiple divs on to hold timeline charts.

All divs are given a specific id based on the company id concerned so

<div id="1"></div>

<div id="2"></div>

etc.

I then create loop through an array and append timeline charts to each div using the following

> <script type="text/javascript">

>

> var hauliers = <?php echo json_encode($hlist)?>; var orders = <?php

> echo json_encode($orders)?>; $(document).ready(function(){

> $.each(hauliers,function(key,val){

>

> $.ajax({

> url: 'https://www.google.com/jsapi?callback',

> cache: true,

> dataType: 'script',

> success: function(){

> google.load('visualization', '1', {packages:['timeline'], 'callback' : function()

> {

> //create data table object

> var container = document.getElementById('chart_'+val.haulier_id);

> var chart = new google.visualization.Timeline(container);

> var dataTable = new google.visualization.DataTable();

>

> dataTable.addColumn({ type: 'string', id: 'Vehicle' });

> dataTable.addColumn({ type: 'string', id: 'Description' });

> dataTable.addColumn({ type: 'date', id: 'Start' });

> dataTable.addColumn({ type: 'date', id: 'End' });

> dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

>

> //add data to the table $.each(orders,function(key,val){

> dataTable.addRow([val.vehicle,val.order_id,new Date(val.req_col_time),new Date(val.req_del_time),"Status: <br>some

> more stuff here!!!"]); });

>

> var view = new google.visualization.DataView(dataTable);

> view.setColumns([0,1,2,3]);

>

>

> chart.draw(view);

>

> function myHandler(e){

> if(e.row != null){

> var orderno = parseInt(dataTable.getValue(e.row,4));

> content = '<div style="width:200px; height:200px; background-color:green; font-weight:bold;">'+orderno+'</div>';

> $(".google-visualization-tooltip").html(content).css({width:"auto",height:"auto"});

> }

> }

>

> google.visualization.events.addListener(chart, 'onmouseover', myHandler);

>

> }

> });

> return true;

> } }); }); });

>

> </script>

When I run it in chrome it works fine, when I run it in firefox I get the following error

Dygraph.TICK_PLACEMENT[a] is undefined

any ideas as to why this would happen?

网友答案:

To avoid that error make sure the date time you're giving are correct. In some cases if new Date() params are not of type integer (in case of milliseconds) or date string, the function returns an invalid date and google timeline returns that error.

I suggest:

var colTime = parseInt(val.req_col_time); /* assuming that val.req_col_time is in milliseconds */
colTime = new Date(colTime);

var delTime = parseInt(val.req_del_time); /* assuming that val.req_del_time is in milliseconds */
delTime = new Date(delTime );

dataTable.addRow([val.vehicle,val.order_id,colTime,delTime),"Status: <br>some more stuff here!!!"]);
网友答案:

I've got the exact same error when the DIV element is not big enough to display the chart, having (date/time) values on the X axis.

The solution in this case is simply define a min-width over the DIV element.

网友答案:

I got three different errors including `Dygraph.TICK_PLACEMENT[a] is

undefined` because of google timeline width issue;

  • "Dygraph.TICK_PLACEMENT[a] is undefined" on Ipad Safari
  • "Cannot read property 'datefield' of undefined" on narrowed Chrome window
  • "Unable to get property 'datefield' of undefined or null reference" on

Narrowed IE window

I have found a workaround by setting minimum width of the timeline. Min 900 seems to be enough for my application.

My code:

   ...
   var options = {
            timeline: { showRowLabels: false },
            width: getTimelineWith()
        };

   chart.draw(dataTable, options);
}

function getTimelineWith() {
        var minTimelineWidth = 900;

        if (drawPanelWidth > minTimelineWidth) {
            return drawPanelWidth;
        }

        return minTimelineWidth;
    }
分享给朋友:
您可能感兴趣的文章:
随机阅读: