How to create a line Graph with two lines

[pieter]

Hi everyone,

thanks to Bisek Singh for pointing out where to make a thread (I genuinely couldn’t find how to).

But I have a question. I am not an expert in php or coding in general, but have some basic knowledge. I used the template from this website for making graphs. I used the line graph, and it is perfect. But now I wanted a graph with two lines. I have a bunch of arrays (one for the x-axis, and several more for the y-axis, of whom the site user can choose which one to form a graph), so I tried the following code:

        <script type="text/javascript">
 
            $(function () {
                  
                var chart = new CanvasJS.Chart("chartContainer", {
                    theme: "theme2",
                    zoomEnabled: true,
                    animationEnabled: true,
                    title: {
                        text: "Historical Population Graph:" 
                    },
                    subtitles:[
                        {   text: "(Try Zooming & Panning)" }
                    ],
                    data: [
                    {
                        type: "line",                
                        <?php if ($var !="bd"){ ?>  
                        dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK);
                        };
                        if ($var=="bd"){ ?>
                        dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
                        dataPoints2: <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK);
                        }; ?>
                        
                    
                    }
                    ]
                });
                chart.render();
            });
        </script>

So I have a HTML Option menu, from where “bd” is the one where I want to show two lines in the graph (the others are just one line graphs).

So basically, what I wanted in this code (and which you can hopefully see), is that if “bd” is not selected then just make one line (only datapoints filled), but if it is selected, make two lines (datapoints2 having the other array, for y-axis, with it, then datapoints “1”).

But this doesnt show the graph with two lines. In fact, it doesnt show anything. But other options (for just one line graph) do work.

Thanks for answering. I would be happy to clarify some things, I might have been ambigious or unclear.

Pieter

[pieter]

I thought I add some code, which is above the code given above.

  $dataPoints = array();
        $y = 40;
        for($i = $sy; $i <= $ey; $i++){
            $y += rand(0, 10) - 5; 
            array_push($dataPoints, array("x" => $i, "y" => $_SESSION["{$var}"][$i-$sy]));
        }
        
    if ($var=="bd")
    {
      $dataPoints = array();
        $y = 40;
        for($i = $sy; $i <= $ey; $i++){
            $y += rand(0, 10) - 5; 
            array_push($dataPoints, array("x" => $i, "y" => $_SESSION["{$br}"][$i-$sy]));
        }
        
      $dataPoints2 = array();
              $y = 40;
        for($i = $sy; $i <= $ey; $i++){
            $y += rand(0, 10) - 5; 
            array_push($dataPoints2, array("x" => $i, "y" => $_SESSION["{$dr}"][$i-$sy]));
        }
    }
    ?>

Here I fill dataPoints2. As mentioned in the OP, the code works fine for one line graphs (so if var is NOT “bd”).

• This reply was modified 7 years, 4 months ago by pieter.

[Bivek Singh]

@pieter,

You seem to be inserting dataPoints and dataPoints2 into thte same object which should be 2 different objects. Please take a look at this page.

Bivek Singh,
Team CanvasJS

[pieter]

Hi Bivek,

Okay, I tried a bit:

        <script type="text/javascript">
 
            $(function () {
                  
                var chart = new CanvasJS.Chart("chartContainer", {
                    theme: "theme2",
                    zoomEnabled: true,
                    animationEnabled: true,
                    title: {
                        text: "Historical Population Graph:" 
                    },
                    subtitles:[
                        {   text: "(Try Zooming & Panning)" }
                    ],
                    data: [
                    {
                        type: "line",                
                          
                        dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK);?>
                        
                    
                    
                    },
                    
                    {       
                    type: "line",
                             dataPoints: <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK);?>
                             
                    }
                    ]
                    
                });
                chart.render();
            });
        </script>

This code doesnt work yet. It still works for graphs with one line. If I put the “[]” parentheses around each dataPoints (as done in the example), the code isnt working for one line graphs.

[Bivek Singh]

@pieter

dataPoints is an array of objects but you seem to be pushing arrays of dataPoints values. You need to format your data according to the format required by canvasJS.

—-
Bivek Singh,
Team CanvasJS