Помогите пожалуйста разобраться - почему-то не срабатывают кнопки
- при вызове функции group - выдает ошибку в консоли:
Type error: chart is undefined
не могу понять почему не определен тип ?
если вставить alert(p); в функцию group - он срабатывает и выдает то что надо - в зависисимости от нажатой кнопки :
Group to:
<input type="button" value="Hours" onclick="group('hh')"/>
<input type="button" value="Days" onclick="group('DD')"/>
<input type="button" value="Weeks" onclick="group('WW')"/>
Графики тоже рисуются нормально - проблема только с этими кнопками, точнее с переменной chart... Помогите плиз...
<script>
var chart;
var chartData1 = [some data];
var chartData2 = [some data];
var chartData3 = [some data];
AmCharts.ready(function() {
createStockChart();
});
function createStockChart() {
var chart = new AmCharts.AmStockChart();
chart.pathToImages = "/static/amstockchart/amcharts/images/";
chart.dataDateFormat = "YYYY-MM-DD HH:NN:SS";
chart.glueToTheEnd = true;
chart.parseDates = true;
chart.balloon.showBullet = true;
chart.categoryAxesSettings = {minPeriod:"mm"};
// DATASETS //////////////////////////////////////////
// create data sets first
var dataSet1 = new AmCharts.DataSet();
dataSet1.title = "PDSN IN";
dataSet1.color = "blue";
dataSet1.fieldMappings = [{
fromField: "value",
toField: "value"}];
dataSet1.dataProvider = chartData2;
dataSet1.categoryField = "date";
var dataSet2 = new AmCharts.DataSet();
dataSet2.title = "PDSN OUT";
dataSet2.color = "green";
dataSet2.fieldMappings = [{
fromField: "value",
toField: "value"}];
dataSet2.dataProvider = chartData3;
dataSet2.categoryField = "date";
var dataSet3 = new AmCharts.DataSet();
dataSet3.title = "ropEcpCount(x100)";
dataSet3.color = "orange";
dataSet3.lineThickness = 2;
dataSet3.fieldMappings = [{
fromField: "value",
toField: "value"}];
dataSet3.dataProvider = chartData1;
dataSet3.categoryField = "date";
var dataSet4 = new AmCharts.DataSet();
dataSet4.title = "------";
dataSet4.color = "blue";
// set data sets to the chart
chart.dataSets = [dataSet1, dataSet2,dataSet3,dataSet4];
// PANELS ///////////////////////////////////////////
// first stock panel
var stockPanel1 = new AmCharts.StockPanel();
stockPanel1.showCategoryAxis = true;
stockPanel1.title = "PDSN and ROP";
stockPanel1.fontSize = 16;
stockPanel1.borderAlpha = 1;
stockPanel1.borderColor = "black";
stockPanel1.recalculateToPercents = "never";
stockPanel1.percentHeight = 100;
// graph of first stock panel
var graph1 = new AmCharts.StockGraph();
graph1.valueField = "value";
graph1.comparable = true;
graph1.compareField = "value";
graph1.fillAlphas = 0.3;
graph1.lineThickness = 2;
graph1.showBalloon = true;
graph1.bullet = "round";
graph1.hideBulletsCount = 50;
graph1.balloonText = "[[title]]:<b>[[value]]</b>";
graph1.compareGraphBalloonText = "[[title]]:<b>[[value]]</b>";
graph1.compareGraphLineThickness = 1;
graph1.compareGraphType = "column";
graph1.compareGraphFillAlphas = 0.5;
stockPanel1.addStockGraph(graph1);
// create stock legend
stockLegend = new AmCharts.StockLegend();
stockLegend.periodValueTextComparing = "[[value]]";
stockLegend.valueTextRegular = "[[value]]";
stockLegend.markerBorderColor = "red";
stockLegend.markerSize = 15;
stockLegend.autoMargins =true;
//stockLegend.align = "left";
//stockLegend.equalWidths = false;
stockLegend.markerLabelGap = 10;
stockLegend.valueAlign = "left";
stockLegend.spacing = 100;
//stockLegend.position = "absolute";
//stockLegend.maxColumns = 4;
stockLegend.verticalGap = 10;
stockLegend.valueWidth = 70;
stockLegend.periodValueText = "Min: [[value.low]] Max: [[value.high]]";
stockPanel1.addLegend(stockLegend, "legenddiv");
// set panels to the chart
chart.panels = [stockPanel1];
// OTHER SETTINGS ////////////////////////////////////
var sbsettings = new AmCharts.ChartScrollbarSettings();
sbsettings.graph = graph1;
sbsettings.position = "top";
sbsettings.graphFillAlpha = 1;
sbsettings.color ="black";
sbsettings.fontSize = 18;
chart.chartScrollbarSettings = sbsettings;
var cursorSettings = new AmCharts.ChartCursorSettings();
cursorSettings.valueBalloonsEnabled = true;
cursorSettings.categoryBalloonEnabled = true;
chart.chartCursorSettings = cursorSettings;
// category axis /grouping
chart.categoryAxesSettings.maxSeries = 7;
chart.categoryAxesSettings.groupToPeriods = ["mm"];
// PERIOD SELECTOR ///////////////////////////////////
var periodSelector = new AmCharts.PeriodSelector();
periodSelector.position = "bottom";
periodSelector.periods = [{
period: "hh",
count: 1,
label: "1 hour",
}, {
period: "hh",
count: 2,
label: "2 hours"
}, {
period: "hh",
count: 5,
label: "5 hours"
}, {
period: "hh",
count: 12,
label: "12 hours",
selected: true
}, {
period: "hh",
count: 24,
label: "24 hours"
}, {
period: "DD",
count: 5,
label: "5 DAYS"
},{
period: "DD",
count: 7,
label: "WEEK"
},{
period: "MAX",
label: "MAX"
}];
chart.periodSelector = periodSelector;
// DATA SET SELECTOR
var dataSetSelector = new AmCharts.DataSetSelector();
dataSetSelector.position = "left";
//dataSetSelector.showInCompare = true;
//dataSetSelector.listHeight = 40;
dataSetSelector.width = 120;
chart.dataSetSelector = dataSetSelector;
chart.write('chartdiv');
function group(p) {
chart.categoryAxesSettings.groupToPeriods = [p];
chart.validateData();
}
// set up the chart to update every second
setInterval(function () {
// normally you would load new datapoints here,
// but we will just generate some random values
// and remove the value from the beginning so that
// we get nice sliding graph feeling
// мой запрос
function loadDataPoints(callback) {
var request = new XMLHttpRequest();
request.open('GET', '/ITN/ROP/test_real_data/');
request.onreadystatechange = function() {
if (this.readyState !== (this.DONE || 4))
return;
if (this.status !== 200)
return alert('Request error: ' + this.status);
callback(JSON.parse(this.responseText));
};
request.send(null);
}
loadDataPoints(function(dataPoints){
//alert(dataPoints[0]);
// add new datapoint at the end
var newDate = new Date(chartData1[chartData1.length - 1].date);
newDate.setDate(newDate.getDate() + 1);
var i = chartData1.length;
chart.dataSets[0].dataProvider.push({
date: dataPoints[0],
value: dataPoints[1]
});
chart.dataSets[1].dataProvider.push({
date: dataPoints[2],
value: dataPoints[3]
});
chart.dataSets[2].dataProvider.push({
date: dataPoints[4],
value: dataPoints[5]
});
chartData1.shift();
chartData2.shift();
chartData3.shift();
});
chart.validateData();
}, 60000);
}
function group(p) {
chart.categoryAxesSettings.groupToPeriods = [p];
chart.validateData();
}
</script>
</head>
<div id="legenddiv" style="border:2px; border-color:black; width:100%; height:20%;"> </div>
<div id="chartdiv" style="background-color:#eeeeee; width: 100%; height: 55%;"></div>
Group to:
<input type="button" value="Hours" onclick="group('hh')"/>
<input type="button" value="Days" onclick="group('DD')"/>
<input type="button" value="Weeks" onclick="group('WW')"/>
