CODEWITHSUNDEEP
javascripthtmlchartsvue.js
kidz55
kidz55

Reputation: 315

Digital timing diagram with google chart using vuejs

I'm trying to render some digital timing diagram using the vuejs framework :
something like this :

Digital timing diagram

The problem is , i've looked at every chart but I can't find a good one to render this.
If someone is familiar with google chart, i'd like to discuss with him

For the moment, i get this :
enter image description here

I would like to know if is there any way not to draw simple line between two points ? Is there a option like curveType that can help me doing what I want ?

Upvotes: 2

Views: 916

Answers (1)

WhiteHat
WhiteHat

Reputation: 61265

it's all in the data

to keep the chart from connecting the points directly,

you need to repeat values for each change in x or y

this will force all lines to either be drawn vertically or horizontally

repeating the x-axis will result in a vertical line 

[2, 0],  
[2, 1],  // <-- repeat x-axis to get vertical line (2)

repeat y-axis for horizontal 

[2, 1],  
[4, 1],  // <-- repeat y-axis to get horizontal line (1)

see following working snippet... 

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    [2, 0],  // <-- set start postion
    [2, 1],  // <-- repeat x-axis to get vertical line
    [4, 1],  // <-- repeat y-axis to get horizontal line
    [4, 2],  // <-- vertical
    [5, 2],  // <-- horizontal
    [5, 1],  // <-- vertical
    [6, 1],  // <-- horizontal
    [7, 1],  // <-- horizontal
    [8, 1],
    [8, .5],
    [9, .5],
    [10, .5]
  ]);

  var options = {
    chartArea: {
      top: 12,
      right: 12,
      bottom: 24,
      left: 24,
      height: '100%',
      width: '100%'
    },
    legend: {
      position: 'none'
    },
    hAxis: {
      viewWindow: {
        min: 0,
        max: 12
      }
    },
    vAxis: {
      viewWindow: {
        min: 0,
        max: 3
      }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 2

Related Questions