Home forums Using CanvasJS How to create a line Graph with two lines

This topic contains 4 replies, has 2 voices, and was last updated by  Bivek Singh 1 week, 6 days ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #15496

    pieter
    Member

    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

    #15497

    pieter
    Member

    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 2 weeks, 3 days ago by  pieter.
    #15513

    Bivek Singh
    Moderator

    @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

    #15516

    pieter
    Member

    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.

    #15520

    Bivek Singh
    Moderator

    @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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.