CanvasJS

Maintained and developed by Helfull This package is a helper library for laravel to easyly create canvasjs charts.

Dependencies

PHP >= 5.4
Laravel >= 5.0
canvasjs library

Installation

modify composer.json:

    "repositories": [
        {
            "url": "https://github.com/treerootboy/CanvasJS.git",
            "type": "git"
        }
    ],
    "require": {
        ...
        'helfull/canvasjs': 'dev-master'
    }

run composer update or composer install

add to your config/app.php ['providers']

    Helfull\CanvasJS\Laravel\Provider\CanvasJSServiceProvider::class

Usage

    use Helfull\CanvasJS\Chart;
    use Helfull\CanvasJS\Chart\ChartData;
    use Helfull\CanvasJS\Chart\DataPoint;

    $chart = new Chart;
    $data = new ChartData;
    $data
        ->addPoint(new DataPoint(['label'=>"banana", 'y'=>18]))
        ->addPoint(new DataPoint(['label'=>"orange", 'y'=>29]))
        ->addPoint(new DataPoint(['label'=>"apple", 'y'=>40]))
        ->addPoint(new DataPoint(['label'=>"mango", 'y'=>34]))
        ->addPoint(new DataPoint(['label'=>"grape", 'y'=>24]));
    $chart->addData($data);

In your view you just do

    {{ $chart->render() }}

Documentation

Chart constructor

you can pass every parameter to the chart like you would do with plain JS as json or as a array.

    //with json
    $chart = new Chart("{
        theme: "theme2",//theme1
        title:{
            text: "Basic Column Chart - CanvasJS"              
        },
        animationEnabled: false,   // change to true
        data: [              
        {
            // Change type to "bar", "splineArea", "area", "spline", "pie",etc.
            type: "column",
            dataPoints: [
                { label: "apple",  y: 10  },
                { label: "orange", y: 15  },
                { label: "banana", y: 25  },
                { label: "mango",  y: 30  },
                { label: "grape",  y: 28  }
            ]
        }
        ]
    }");

    //as a array
    $chart = new Chart([
        "theme"=> "theme2",
        "title"=>[
            "text"=> "Basic Column Chart - CanvasJS"              
        ],
        "animationEnabled"=> false,   // change to true
        "data"=> [              
        [
            // Change type to "bar", "splineArea", "area", "spline", "pie",etc.
            "type"=> "column",
            "dataPoints"=> [
                [ "label"=> "apple",  "y"=> 10  ],
                [ "label"=> "orange", "y"=> 15  ],
                [ "label"=> "banana", "y"=> 25  ],
                [ "label"=> "mango",  "y"=> 30  ],
                [ "label"=> "grape",  "y"=> 28  ]
            ]
        }
        ]
    ]);