Chart

How to display charts?

Mainly there are two chart types.

1) Scatter chart
2) Pie chart

Scatter chart

To display a scatter chart, following code can be used.

Template File (chart.tpl)

<p>Scatter Chart</p>

<canvas id="chart1"></canvas>

Script file (script.js)

append_function_dialog(function(dialog_id){



    var fd = new FormData();

    var url = "app.php";

    fd.append("class","chart");

    fd.append("function","chart1");

    appcon(url,fd);

   

});

Class File

function chart1(Controller $ctl){



	//set chart type

	$ctl->chart_set_type("scatter");

       

	//first data set, set values (x, y)

	$ctl->chart_append_scatter_value(1, 5);

	$ctl->chart_append_scatter_value(2, 40);

	$ctl->chart_append_scatter_value(3, 45);

	$ctl->chart_append_scatter_value(4, 52);

	//group above values

	$ctl->chart_append_scatter_dataset("suzuki", "#729FCF");

       

	//second data set

       	$ctl->chart_append_scatter_value(1, 8);

       	$ctl->chart_append_scatter_value(2, 10);

       	$ctl->chart_append_scatter_value(3, 2);

       	$ctl->chart_append_scatter_value(4, 30);

       	$ctl->chart_append_scatter_dataset("tanaka", "#73D216",

               [

			"pointRadius"=>0,

			"tension"=>0.3,

			"fill"=>true //fill color between line and x axis

		]

	);



       $ctl->res_chart("chart1");

}    

Pie chart

To display a pie chart, following code can be used.

Template File (chart.tpl)

<p>Pie Chart</p>

<canvas id="chart2"></canvas>

Script file

append_function_dialog(function(dialog_id){



    var fd = new FormData();

    var url = "app.php";

    fd.append("class","employee");

    fd.append("function","chart2");

    appcon(url,fd);

   

});

Class File

function chart2(Controller $ctl){



       $ctl->chart_set_type("pie");

       $ctl->chart_append_pie_value("bad", 3, "#FBF5E3");

       $ctl->chart_append_pie_value("normal", 5, "#FFF0CB");

       $ctl->chart_append_pie_value("good", 2, "#FFE29B");

       $ctl->chart_append_pie_value("excellent", 8, "#FFC22F");

       $ctl->res_chart("chart2");



}