167 строки
4.6 KiB
PHP
167 строки
4.6 KiB
PHP
<script>
|
|
|
|
var chartobj,
|
|
count = 0,
|
|
chartData = null,
|
|
chartData1 = null,
|
|
value = 10;
|
|
generateData();
|
|
|
|
|
|
function onchartload(sender) {
|
|
chartobj = this;
|
|
sender.model.series[0].points = chartData;
|
|
sender.model.series[1].points = chartData1;
|
|
window.timer = window.setInterval(update, 40);
|
|
if (!ej.util.isNullOrUndefined(window.orientation) && sender) { //to modify chart properties for mobile view
|
|
var model = sender.model,
|
|
seriesLength = model.series.length;
|
|
model.title.enableTrim = true;
|
|
model.elementSpacing = 5;
|
|
model.legend.visible = false;
|
|
model.size.height = null;
|
|
model.size.width = null;
|
|
for (var i = 0; i < seriesLength; i++) {
|
|
if (!model.series[i].marker)
|
|
model.series[i].marker = {};
|
|
if (!model.series[i].marker.size)
|
|
model.series[i].marker.size = {};
|
|
model.series[i].marker.size.width = 6;
|
|
model.series[i].marker.size.height = 6;
|
|
}
|
|
model.primaryXAxis.labelIntersectAction = "rotate45";
|
|
if (model.primaryXAxis.title)
|
|
model.primaryXAxis.title.text = "";
|
|
model.primaryXAxis.edgeLabelPlacement = "hide";
|
|
model.primaryYAxis.labelIntersectAction = "rotate45";
|
|
if (model.primaryYAxis.title)
|
|
model.primaryYAxis.title.text = "";
|
|
model.primaryYAxis.edgeLabelPlacement = "hide";
|
|
if (model.axes) {
|
|
for (var j = 0; j < model.axes.length; j++) {
|
|
model.axes[j].labelIntersectAction = "rotate45";
|
|
if (model.axes[j].title)
|
|
model.axes[j].title.text = "";
|
|
model.axes[j].edgeLabelPlacement = "hide";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
function generateData() {
|
|
var num = 100, data = [], data1 = [];;
|
|
for (i = 0; i < num; i++) {
|
|
if (Math.random() > .5) {
|
|
if (value < 45)
|
|
value += Math.random() * 2.0;
|
|
else
|
|
value -= 2.0;
|
|
}
|
|
else {
|
|
if (value > 5)
|
|
value -= Math.random() * 2.0;
|
|
else
|
|
value += 2.0;
|
|
}
|
|
data[i] = {
|
|
x: i.toString(), y: value
|
|
};
|
|
data1[i] = {
|
|
x: i.toString(), y: value + 20
|
|
};
|
|
}
|
|
chartData = data;
|
|
chartData1 = data1;
|
|
};
|
|
|
|
|
|
function update() {
|
|
if (Math.random() > .5) {
|
|
if (value < 45)
|
|
value += Math.random() * 2.0;
|
|
else
|
|
value -= 2.0;
|
|
}
|
|
else {
|
|
if (value > 5)
|
|
value -= Math.random() * 2.0;
|
|
else
|
|
value += 2.0;
|
|
}
|
|
chartData.push({ x: i.toString(), y: value });
|
|
chartData1.push({ x: i.toString(), y: value + 20 });
|
|
i++;
|
|
chartData.shift();
|
|
chartData1.shift();
|
|
if( chartobj.model){
|
|
chartobj.model.series[0].points = chartData;
|
|
chartobj.model.series[1].points = chartData1;
|
|
$("#livechart").ejChart("redraw");
|
|
}
|
|
else
|
|
window.clearInterval(window.timer);
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
<div>
|
|
|
|
<?php
|
|
require_once '../EJ/AutoLoad.php';
|
|
?>
|
|
|
|
<?php
|
|
$chart=new EJ\Chart("livechart");
|
|
$xAxis = new EJ\Chart\PrimaryXAxis();
|
|
$xTitle = new EJ\Chart\Title();
|
|
$major = new EJ\Chart\MajorGridLine();
|
|
$major->visible(false);
|
|
$xAxis->majorGridLines($major);
|
|
|
|
|
|
$yAxis = new EJ\Chart\PrimaryYAxis();
|
|
$yTitle = new EJ\Chart\Title();
|
|
$range = new EJ\Chart\Range();
|
|
$range->min(0)->max(50)->interval(10);
|
|
$yAxis->range($range);
|
|
|
|
|
|
|
|
$chartSize = new EJ\Chart\Size();
|
|
$chartLegend = new EJ\Chart\Legend();
|
|
$chartLegend->visible(false);
|
|
|
|
|
|
|
|
$series1 = new EJ\Chart\Series();
|
|
$series2 = new EJ\Chart\Series();
|
|
|
|
$series1->type("line")->enableAnimation(false);
|
|
$series2->type("line")->enableAnimation(false);
|
|
|
|
$seriesCollection = array($series1,$series2);
|
|
|
|
|
|
echo $chart->primaryXAxis($xAxis)
|
|
->primaryYAxis($yAxis)
|
|
->isResponsive(true)
|
|
->load("onchartload")
|
|
->enableCanvasRendering(true)
|
|
->series($seriesCollection)
|
|
->size($chartSize)
|
|
->legend($chartLegend)
|
|
->render();
|
|
?>
|
|
</div>
|
|
|
|
<style>
|
|
.cols-sample-area
|
|
{
|
|
width: 300px;
|
|
margin: 0 auto;
|
|
float: none;
|
|
}
|
|
</style>
|