Data.join() gives a 3 lines grapg with non continuous lines

[Erez V.]

Here is the code: 

 var data12 = google.visualization.data.join(data1,data2,'full', [[0,0]], [1], [1]);


   var data123 = google.visualization.data.join(data12,data3,'full', [[0,0]], [1,2], [1]);






      var options = {
       
          title:'<?php echo "Accumulated Profit of currencies traded against ".$coin; ?>',
          subtitle: '   in  [USD]',
   curveType: 'function',
       hAxis: { showTextEvery: 10, minTextSpacing: 30},
   interpolateNulls: true
        };


      var chart = new google.charts.Line(document.getElementById('chart_div'));
   
      chart.draw(data123, google.charts.Line.convertOptions(options));

Each line separately appears fine, but the 3 lines together gives a mess

Here is a print screen: 

http://prntscr.com/mx19bs

I read that I have to add  

interpolateNulls: true

I tries every option suggested in various forums. No solution.

What can I do to solve the display problem ?

[Daniel LaLiberte]

The interpolateNulls option only works with the classic, non-material charts.  You are using the material Line chart, but you should try google.visualization.LineChart instead.  If you want the material fonts and colors, you can try the 'theme': 'material' option with the classic charts.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/13005605-c823-4bf0-9b94-c4c2b7ae41c4%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   Cambridge MA

[Erez V.]

Thanks for the answer,

The attached files data1, data2,data3 show a line graph of each data set separately.

After changing the material to classic I get a wierd graph of data123

Here is the edited code:

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

      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

///////////      Data of all trades line    ////////////////

      var data1 = new google.visualization.DataTable();

      data1.addColumn('string', ' ');

      data1.addColumn('number', 'All__profit');

      for(var i = 0; i < datum.length; i++){

  var obj = datum[i];

data1.addRow([obj.time, obj.acc_profit]);

}

///////////      Data of long trades line    ////////////////

var data2 = new google.visualization.DataTable();

      data2.addColumn('string', ' ');

      data2.addColumn('number', 'Long_profit');

      for(var i = 0; i < datum_l.length; i++){

  var obj_l = datum_l[i];

data2.addRow([obj_l.time, obj_l.acc_profit]);

}

///////////      Data of short trades line    ////////////////

var data3 = new google.visualization.DataTable();

      data3.addColumn('string', ' ');

      data3.addColumn('number', 'Short_profit');

      for(var i = 0; i < datum_s.length; i++){

  var obj_s = datum_s[i];

data3.addRow([obj_s.time, obj_s.acc_profit]);

}

  var data12 = google.visualization.data.join(data1,data2,'full', [[0,0]], [1], [1]);

  var data123 = google.visualization.data.join(data12,data3,'full', [[0,0]], [1,2], [1]);

      var options = {

          

          title:'<?php echo "Accumulated Profit of currencies traded against ".$coin; ?>',

          subtitle: '   in  [USD]',

  curveType: 'function',

  interpolateNulls: true,

      hAxis: { showTextEvery: 15, minTextSpacing: 10},

};

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  

      chart.draw(data123, options);

How cab I get the 3 lines together on the same graph ?

Thanks

On Wednesday, March 13, 2019 at 12:56:12 AM UTC+2, Daniel LaLiberte wrote:

The interpolateNulls option only works with the classic, non-material charts.  You are using the material Line chart, but you should try google.visualization.LineChart instead.  If you want the material fonts and colors, you can try the 'theme': 'material' option with the classic charts.

On Tue, Mar 12, 2019 at 6:10 PM Erez V. <erez...@gmail.com> wrote:

Here is the code: 

 var data12 = google.visualization.data.join(data1,data2,'full', [[0,0]], [1], [1]);


   var data123 = google.visualization.data.join(data12,data3,'full', [[0,0]], [1,2], [1]);






      var options = {
       
          title:'<?php echo "Accumulated Profit of currencies traded against ".$coin; ?>',
          subtitle: '   in  [USD]',
   curveType: 'function',
       hAxis: { showTextEvery: 10, minTextSpacing: 30},
   interpolateNulls: true
        };


      var chart = new google.charts.Line(document.getElementById('chart_div'));
   
      chart.draw(data123, google.charts.Line.convertOptions(options));

Each line separately appears fine, but the 3 lines together gives a mess

Here is a print screen: 

http://prntscr.com/mx19bs

I read that I have to add  

interpolateNulls: true

I tries every option suggested in various forums. No solution.

What can I do to solve the display problem ?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/13005605-c823-4bf0-9b94-c4c2b7ae41c4%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlali...@Google.com   Cambridge MA