CODEWITHSUNDEEP
javascriptchartslinechartgoogle-visualization
user3317540
user3317540

Reputation: 15

How to make dashed line in google line chart

Please help me how to make it a dashed line of the other line in google line chart? I'm new in making graph. Thank you

Script:

  function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
['x', 'Cats', 'Blanket 1', 'Blanket 2'],
['A',   1,       1,           0.5],
['B',   2,       0.5,         1],
['C',   4,       1,           0.5],
['D',   8,       0.5,         1],
['E',   7,       1,           0.5],
['F',   7,       0.5,         1],
['G',   8,       1,           0.5],
['H',   4,       0.5,         1],
['I',   2,       1,           0.5],
['J',   3.5,     0.5,         1],
['K',   3,       1,           0.5],
['L',   3.5,     0.5,         1],
['M',   1,       1,           0.5],
['N',   1,       0.5,         1]
 ]);

new google.visualization.LineChart(document.getElementById('visualization')).
  draw(data, {curveType: "function",
              width: 500, height: 400,
              vAxis: {maxValue: 10}}
      );
   }

​

Upvotes: 0

Views: 1567

Answers (1)

asgallant
asgallant

Reputation: 26330

You can make a line dashed by using a "certainty" role column, with the values set to false:

var data = google.visualization.arrayToDataTable([
    // use "certainty" role columns to make the lines dashed
    ['x', 'Cats', {role: 'certainty'}, 'Blanket 1', {role: 'certainty'}, 'Blanket 2', {role: 'certainty'}],
    ['A', 1, false, 1, false, 0.5, false],
    ['B', 2, false, 0.5, false, 1, false],
    ['C', 4, false, 1, false, 0.5, false],
    ['D', 8, false, 0.5, false, 1, false],
    ['E', 7, false, 1, false, 0.5, false],
    ['F', 7, false, 0.5, false, 1, false],
    ['G', 8, false, 1, false, 0.5, false],
    ['H', 4, false, 0.5, false, 1, false],
    ['I', 2, false, 1, false, 0.5, false],
    ['J', 3.5, false, 0.5, false, 1, false],
    ['K', 3, false, 1, false, 0.5, false],
    ['L', 3.5, false, 0.5, false, 1, false],
    ['M', 1, false, 1, false, 0.5, false],
    ['N', 1, false, 0.5, false, 1, false]
]);

new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {
    curveType: "function",
    width: 500, height: 400,
    vAxis: {maxValue: 10}
});

Upvotes: 1

Related Questions