I'm getting an error trying to use a spline chart in different colors

Share RGraph:   Share or Like RGraph on Facebook!

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by fotosettore on 29th January 2017
hi
there is a problem about a different line colors graph.

in this example all works fine but SPLINE on THREE COLORS GRAPH is false.
i need SPLINE = true, but if i do it the graph gives errors lines.

Many thanks for your help
--------------------

<html>
<head>
     <link rel='stylesheet' href='demos.css' type='text/css' media='screen' />
     <script src="../libraries/RGraph.common.core.js" ></script>
     <script src="../libraries/RGraph.line.js" ></script>
     <script src="../libraries/RGraph.common.dynamic.js"></script>
     <script src="../libraries/RGraph.common.tooltips.js"></script>
     <script src="../libraries/RGraph.common.effects.js"></script>
     <script src="../libraries/RGraph.common.key.js"></script>
     <script src="../libraries/RGraph.drawing.yaxis.js"></script>
        <title> TIPO DI CARICO - Oggi </title>
     <meta name='robots' content='noindex,nofollow' />
     <meta name='description' content='Lucibus - Qmod giornaliero' />
</head>

<body bgcolor='#E5E5FA'>
     <div align='center'>
         <table border='0' width='95%' id='table1'>
             <tr>
                 <td>
                 <h1 style='margin-top: 0; margin-bottom: 0' align='center'>
                 <font size='2' face='Verdana'>LUCIBUS - TIPO DI CARICO - Oggi</font></h1></td>
             </tr>
             <tr>
                 <td>
                 <p align='center' style='margin-top: 0; margin-bottom: 0'>
     <font size='1' face='Verdana'>29/01/2017      12:19</td>
             </tr>
         </table>
     </div>
     <h1 style='margin-top: 0px; margin-bottom: 0px' align='center'>
      </h1>

  <!--
<div style='position: relative'>
     <canvas id='axes' width='141' height='550' style=' position: absolute; top: 0; left: 0; z-index: 3'></canvas>
     <div style='width: 100%; overflow: auto'>
         <canvas id='cvs' width='3200' height='550'></canvas>
     </div>
</div>
  -->
<div style='position: relative'>
     <canvas id='axes' width='220' height='550' style=' position: absolute; top: 0; left: 0; z-index: 3'></canvas>
     <div style='width: 100%; overflow: auto'>
         <canvas id='cvs' width='3200' height='550'></canvas>
     </div>
</div>
     <script>
  window.onload = function ()
  {
  var Posizione = 1000
  var gutterTop = 25
  var gutterLeft = 220 // deve essere uguale o superiore al width del canvas axes ---- vedi su
  var gutterRight = 235
  var WattFondoScala = 5000
    
          
     // BARRE GRADUATE A SINISTRA ***************************************************
    
     // NERA SX - WATT CONSUMO
           var yaxis = new RGraph.Drawing.YAxis(
     {
           id:'axes',
           x: 70,
           options: {
              max: WattFondoScala / 1000 , //line.max,
              colors: ['black'],
              textSize: 12,
              textFont: 'Verdana',
              gutterTop: gutterTop,
     //scaleThousand : '.',
     unitsPost: " KW",
           }
           }).draw();
    
    
     // VERDE SX - BATTERIA
     yaxis3 = new RGraph.Drawing.YAxis(
     { //ordinata verde per batteria
           id: 'axes',
           x: 130,
           options: {
             colors: 'green',
             textColor: 'green',
    unitsPost: " V",
    textSize: 12,
             min: 42,
    max: 62,
            // title: 'BATT',
            gutterTop: gutterTop,
            gutterLeft: gutterLeft,
            gutterRight: gutterRight,
            textFont: 'Verdana',
            textAccessible: true
           }
           }).draw()
    
          
     // BLUE SX - PANNELLI
     yaxis12 = new RGraph.Drawing.YAxis(
     {
           id: 'axes',
           x: 210,
           options: {
             colors: 'blue',
             textColor: 'blue',
    unitsPost: " KW",
    textSize: 12,
             //min: 0,
    max: 4, // sarebbero 4 KW
    scaleDecimals: 1,
            // title: ' ',
            textFont: 'Verdana',
             textAccessible: true
           }
           }).draw()
    
    
   
    
     
     
     
     // GRAFICI *****************************************************************
    
    
     // CONSUMO IN WATT - 3 COLORI
           var line = new RGraph.Line(
     {
           id:'cvs',
           data: [
     [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 1822, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
     [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 0086, 1822, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
     [0086, 0080, 0081, 0086, 0081, 0083, 0084, 0077, 0078, 0081, 0087, 0101, 0082, 0103, 0080, 0142, 0148, 0139, 0149, 0144, 0141, 0085, 0087, 0074, 0086, 0075, 0079, 0080, 0087, 0076, 0084, 0086, 0079, 0075, 0080, 0076, 0081, 0079, 0081, 0080, 0079, 0079, 0080, 0148, 0152, 0148, 0144, 0152, 0144, 0077, 0084, 0083, 0086, 0085, 0088, 0084, 0085, 0082, 0088, 0088, 0086, 0080, 0083, 0075, 0081, 0093, 0084, 0086, 0085, 0081, 0081, 0152, 0145, 0150, 0148, 0147, 0147, 0080, 0078, 0092, 0081, 0079, 0084, 0084, 0084, 0080, 0083, 0073, 0080, 0084, 0085, 0081, 0084, 0080, 0074, 0080, 0080, 0086, 1822, 0154, 0143, 0150, 0213, 0200, 0205, 0139, 0137, 0137, 0139, 0135, 0139, 0135, 0140],
           ],
           options: {
                     labels:
      ['', '', '', '', '', '', '10:30', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '11:00', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '11:30', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '12:00', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
                     colors: ['red','#26ff00','#ffff33'], //#e9e94e //#E9B34E
                     //backgroundGridColor:'#c4c4c4',
                     //spline: true, // IF YOU PUT TRUE HERE GIVES ERROR LINES !!!!!
                     ymax: WattFondoScala,
                     textSize: 10, // testo delle ore
                     gutterTop: gutterTop, // distanza dall'alto
                     gutterLeft: gutterLeft,
      gutterRight: gutterRight,
                     backgroundGridAutofitNumhlines: 10, // numero linee orizzontali
                     ylabelsCount: 10, // numero dei valori label y
                     //unitsPre: 'kW ',
                     backgroundGridAutofitNumvlines: 1.8833333333333 ,
      //tooltips: ['0086', '0080', '0081', '0086', '0081', '0083', '0084', '0077', '0078', '0081', '0087', '0101', '0082', '0103', '0080', '0142', '0148', '0139', '0149', '0144', '0141', '0085', '0087', '0074', '0086', '0075', '0079', '0080', '0087', '0076', '0084', '0086', '0079', '0075', '0080', '0076', '0081', '0079', '0081', '0080', '0079', '0079', '0080', '0148', '0152', '0148', '0144', '0152', '0144', '0077', '0084', '0083', '0086', '0085', '0088', '0084', '0085', '0082', '0088', '0088', '0086', '0080', '0083', '0075', '0081', '0093', '0084', '0086', '0085', '0081', '0081', '0152', '0145', '0150', '0148', '0147', '0147', '0080', '0078', '0092', '0081', '0079', '0084', '0084', '0084', '0080', '0083', '0073', '0080', '0084', '0085', '0081', '0084', '0080', '0074', '0080', '0080', '0086', '1822', '0154', '0143', '0150', '0213', '0200', '0205', '0139', '0137', '0137', '0139', '0135', '0139', '0135', '0140'],
                     textFont: 'Verdana',
                     scaleZerostart: true,
                     backgroundGridVlines: true, // linee verticali
                     linewidth: 3,
                     shadow: true,
                     backgroundGridBorder: true,
                     //noaxes: true,
                     noxaxis: true,
                     noyaxis: true,
                     ylabels: false,
                     scaleThousand : '.',

                 key: ['RETE ','BATTERIA ','SOLE'],
                 keyColors: ['red','#26ff00','yellow'],
                 keyPosition: 'gutter',
                 keyPositionX:1000,
     keyTextSize : 11,
                     }
             }).draw();
   
   
   
    // BATTERIA VERDE
    var line = new RGraph.Line(
    {
    id: 'cvs',
    data: [54.4, 54.3, 54.3, 54.3, 54.5, 54.8, 54.9, 55.3, 55.7, 56.1, 56.9, 57.3, 57.7, 57.7, 57.7, 55.7, 55.7, 56.2, 56.5, 56.5, 56.8, 58.4, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.8, 57.7, 57.7, 57.8, 57.7, 57.7, 57.7, 57.7, 57.8, 57.8, 57.7, 57.8, 57.7, 58.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.8, 57.7, 57.8, 57.7, 57.7, 57.7, 57.7, 57.7, 57.8, 57.7, 57.7, 57.7, 57.7, 57.8, 57.7, 57.7, 57.7, 57.7, 57.8, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.8, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.8, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 56.9, 57.7, 57.8, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.7, 57.8, 57.7, 57.6], // grafico verde volt batteria
    options: {
     ymin: 42,
     ymax: 62,
     hmargin: 5,
     textSize: 12,
     gutterRight: gutterRight,
     gutterLeft: gutterLeft,
     gutterTop: gutterTop,
     //labels: ['', '', '', '', '', '', '10:30', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '11:00', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '11:30', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '12:00', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
     //tooltips: ['54.4', '54.3', '54.3', '54.3', '54.5', '54.8', '54.9', '55.3', '55.7', '56.1', '56.9', '57.3', '57.7', '57.7', '57.7', '55.7', '55.7', '56.2', '56.5', '56.5', '56.8', '58.4', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.8', '57.7', '57.7', '57.8', '57.7', '57.7', '57.7', '57.7', '57.8', '57.8', '57.7', '57.8', '57.7', '58.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.8', '57.7', '57.8', '57.7', '57.7', '57.7', '57.7', '57.7', '57.8', '57.7', '57.7', '57.7', '57.7', '57.8', '57.7', '57.7', '57.7', '57.7', '57.8', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.8', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.8', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '56.9', '57.7', '57.8', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.7', '57.8', '57.7', '57.6'],
     colors: ['green','black','blue'],
     key: ['BATTERIA (Volt) ', 'CONSUMO (Watt) ', 'PANNELLI (Watt) '],
     keyPosition: 'gutter',
     keyPositionGutterBoxed: false,
     keyPositionX: 275,
     noaxes: true,
     ylabels: false,
     shadow: true,
     linewidth: 3,
     backgroundGridVlines: false,
                 spline: true,
     textAccessible: true
     }
     }).draw()
      

      
             // PANNELLI - BLUE
    var line = new RGraph.Line(
    {
    id: 'cvs',
    data: [00971, 00935, 00924, 00919, 00945, 00996, 00996, 00996, 01027, 01034, 01043, 01050, 01058, 01047, 01035, 01047, 01022, 01041, 01030, 01030, 01030, 01023, 00977, 00966, 00959, 00960, 00948, 00942, 00937, 00925, 00925, 00914, 00908, 00908, 00902, 00890, 00885, 00878, 00873, 00873, 00861, 00856, 00856, 01061, 00908, 00908, 00896, 00890, 00885, 00815, 00809, 00809, 00798, 00792, 00792, 00786, 00780, 00780, 00775, 00769, 00763, 00763, 00757, 00752, 00746, 00740, 00740, 00734, 00728, 00728, 00723, 00786, 00786, 00780, 00769, 00769, 00763, 00694, 00688, 00688, 00682, 00682, 00676, 00676, 00665, 00665, 00659, 00659, 00647, 00647, 00647, 00647, 00642, 00636, 00630, 00630, 00624, 00618, 00618, 00694, 00694, 00676, 00710, 00734, 00728, 00659, 00653, 00647, 00647, 00642, 00636, 00636, 00624],
    options: {
     colors : ['blue'],
     textAccessible: true,
     //unitsPost: " W",
     ymin: 0,
     ymax: 4000, // KW di produzione
     linewidth: 3,
     //labels: ['', '', '', '', '', '', '10:30', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '11:00', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '11:30', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '12:00', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
     //tooltips: ['00971', '00935', '00924', '00919', '00945', '00996', '00996', '00996', '01027', '01034', '01043', '01050', '01058', '01047', '01035', '01047', '01022', '01041', '01030', '01030', '01030', '01023', '00977', '00966', '00959', '00960', '00948', '00942', '00937', '00925', '00925', '00914', '00908', '00908', '00902', '00890', '00885', '00878', '00873', '00873', '00861', '00856', '00856', '01061', '00908', '00908', '00896', '00890', '00885', '00815', '00809', '00809', '00798', '00792', '00792', '00786', '00780', '00780', '00775', '00769', '00763', '00763', '00757', '00752', '00746', '00740', '00740', '00734', '00728', '00728', '00723', '00786', '00786', '00780', '00769', '00769', '00763', '00694', '00688', '00688', '00682', '00682', '00676', '00676', '00665', '00665', '00659', '00659', '00647', '00647', '00647', '00647', '00642', '00636', '00630', '00630', '00624', '00618', '00618', '00694', '00694', '00676', '00710', '00734', '00728', '00659', '00653', '00647', '00647', '00642', '00636', '00636', '00624'],
     //ylabelsCount: 10,
     xlabelsInside: false,
     numyticks: 10,
     numxticks: 0,
     backgroundGridAutofitNumhlines: 10,
     gutterRight: gutterRight,
     gutterLeft: gutterLeft,
     gutterTop: gutterTop,
     shadow: true,
     textSize: 12,
     backgroundGridVlines: false,
     //backgroundGridBorder: false,
     textAccessible: true,
     ylabels: false,
                 spline: true,
     noaxes: true,
    }
             }).draw();

      
      


           // BARRE GRADUATE A DESTRA ***************************************************

     // BLUE SX - PANNELLI
     yaxis12 = new RGraph.Drawing.YAxis(
     {
           id: 'cvs',
           x: 2970,
           options: {
              colors: 'blue',
              textColor: 'blue',
      unitsPost: " KW",
              textSize: 12,
              //min: 0,
      max: 4, //sarebbero 4 KW
      scaleDecimals: 1,
              // title: ' ',
              textFont: 'Verdana',
              align: 'right',
              textAccessible: true
           }
           }).draw()
        
    
     // VERDE DX - BATTERIA
           yaxis8 = new RGraph.Drawing.YAxis(
     {
     id: 'cvs',
           x: 3055,
           options: {
             colors: 'green',
             textColor: 'green',
    unitsPost: " V",
    textSize: 12,
             min: 42,
    max: 62,
             align: 'right',
            // title: ' ',
            textFont: 'Verdana',
             textAccessible: true
           }
           }).draw()


     // NERO WATT CONSUMO
           var yaxis2 = new RGraph.Drawing.YAxis(
     {
           id:'cvs',
           x: 3120,
           options: {
              max: WattFondoScala / 1000 , //line.max,
              colors: ['black'],
              textSize: 12,
              textFont: 'Verdana',
              gutterTop: gutterTop,
     //scaleThousand : '.',
              align: 'right',
     unitsPost: " KW",
           }
           }).draw();
    
    

    
    
                 // ascisse (ore in rosso)
                 var xaxis = new RGraph.Drawing.XAxis({
                 id:'cvs',
                 y: line.canvas.height -30,
                 options: {
                    min: 0,
                    max: 24,
                    yaxispos: 'right',
                    xaxispos: 'center',
                    gutterLeft: 50,
                    textSize: 12,
                    colors: ['red'],
                    numlabels: 24,
                    noxaxis: true,
                    }
                 }).draw();
    
   

    
    
      };
     </script>


</body>
<p align='center'>
<a href='/'>
      <img border='0' src='/home.gif' width='88' height='88'></a>
</p>
</html>

Posted by Richard on 29th January 2017
Hi there,

1. The spline chart does not support null values.
2. If you're using decimal values you should strip the leading zeros from your values. The following for example does not show what you might expect. The leading zero indicates an ictal value - not decimal:

alert(0137); // Shows 95 - not 0137 or 137

3. Instead of just copying and pasting a your whole page in to the message (which I'm probably only going to skim) setup a contrived example that shows the issue.



Richard
Posted by fotosettore on 29th January 2017
hi
sorry for long code, but it is generated by php page connected to my server.

here the examples in real time (please note about 12.05 time) :

WITHOUT SPLINE TRUE (only in 3colors graph)
www.homoandroidus.com/arduino3/lucibus/colore_oggi_pann.php

WITH SPLINE TRUE (only in 3colors graph)
www.homoandroidus.com/arduino3/lucibus/colore_oggi_pann_spline.php

it is before to delete the beginning zero. i will delete asap.
i'm afraid that putting 0 instead of null there will shown 3 overlapped lines.

many thanks for your patiente
Posted by Richard on 29th January 2017
Hi there,

> i'm afraid that putting 0 instead of null there will shown 3 overlapped lines.

At the bottom of the chart - yes. If the spline option is false then there won't be anything displayed, but with the spline option then there will.

I think your best option would be just to not use the spline option - the two charts don't look vastly different given that there's a lot of data.

Also, when you overlay charts on top of each other (which is fine BTW) you might want to turn the background grid off on all the line charts except for the first one, otherwise subsequent background grids will appear on top of charts that are drawn before it. You can do that like this:

/// ...
backgroundGrid: false,
// ...




Richard

Add a reply




« Back to message list