How to make the date scrollbar start at a certain date

Resolved Sevario
(@sevario)

8 years, 5 months ago

Hello, I currently have a graph with one of those sliders on the top which you can change the date you are looking at with.

Here is a picture of it.

The range of the graph is from the start of this year untill yesterday.
This all works properly and as intended.

However, when I load the page it always starts with the entire range.
I would like the graph to load with the starting date being today -10 days untill today. But I would like the entire slider to still be from this entire year.

Is this possible?

Here is my code if you need it:

var chart;

// create chart

AmCharts.ready(function() {

// load the data

var chartData = AmCharts.loadJSON(‘http://localhost/QMS/wordpress/data.php’);

// SERIAL CHART

chart = new AmCharts.AmSerialChart();

chart.dataProvider = chartData;

chart.categoryField = “WBD_DATUM”;

chart.dataDateFormat = “DD-MM-YY”;

// GRAPHS

var graph1 = new AmCharts.AmGraph();

graph1.valueField = “WBD_BEREKENDE_WAARDE”;

graph1.bulletBorderThickness = 2;

graph1.lineThickness = 2;

graph1.lineAlpha = 0.5;

graph1.type = “line”;

graph1.columnWidth = “0”;

graph1.lineColor = “#4b1966”;

graph1.balloonText = “”;

graph1.gridColor = “#4b1966”;

chart.addGraph(graph1);

//ONDERGRENS

var graph2 = new AmCharts.AmGraph();

graph2.valueField = “MDL_ONDERGRENS”;

graph2.bulletBorderThickness = 2;

graph2.lineThickness = 2;

graph2.lineAlpha = 0.5;

graph2.type = “line”;

graph2.columnWidth = “0”;

graph2.lineColor = “#DB6767”;

graph2.balloonText = “”;

graph2.gridColor = “#4b1966”;

chart.addGraph(graph2);

// CATEGORY AXIS

chart.categoryAxis.parseDates = false;

//chart.categoryAxis.ignoreAxisWidth = false;

var valueAxis = new AmCharts.ValueAxis();
valueAxis.labelsEnabled = false;
chart.addValueAxis(valueAxis);

chart.chartScrollbar = new AmCharts.ChartScrollbar();

chart.chartCursor = new AmCharts.ChartCursor();

chart.mouseWheelZoomEnabled = true;

chart.mouseWheelScrollEnabled = true;

// WRITE

chart.write(“chartdiv”);

});

AmCharts.loadJSON = function(url) {

// create the request

if (window.XMLHttpRequest) {

// IE7+, Firefox, Chrome, Opera, Safari

var request = new XMLHttpRequest();

} else {

// code for IE6, IE5

var request = new ActiveXObject(‘Microsoft.XMLHTTP’);;

}

// load it

// the last “false” parameter ensures that our code will wait before the

// data is loaded

request.open(‘GET’, url, false);

request.send();

// parse adn return the output

return eval(request.responseText);

};

https://wordpress.org/plugins/amcharts-charts-and-maps/

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Author martynasma
(@martynasma)

8 years, 4 months ago
You can use “rendered” event to call “zoomToDates” method of the chart.
```
// PRE-ZOOM THE CHART
chart.addListener("rendered", function(event) {
  var end = new Date(); // today
  var start new Date(end);
  start.setDate(end.getDate() - 10);
  chart.zoomToDates(start, end);
});

// WRITE
chart.write("chartdiv");
```
Thread Starter Sevario
(@sevario)

8 years, 4 months ago

When I add this piece of code right before my chart.write it stops working.

I placed it right here:

// CATEGORY AXIS

chart.categoryAxis.parseDates = false;

//chart.categoryAxis.ignoreAxisWidth = false;

chart.chartScrollbar = new AmCharts.ChartScrollbar();

chart.chartCursor = new AmCharts.ChartCursor();

chart.mouseWheelZoomEnabled = true;

chart.mouseWheelScrollEnabled = true;

// PRE-ZOOM THE CHART
chart.addListener(“rendered”, function(event) {
var end = new Date(); // today
var start new Date(end);
start.setDate(end.getDate() – 10);
chart.zoomToDates(start, end);
});

// WRITE

chart.write(“chartdiv”);

});

What am I doing wrong?
Plugin Author martynasma
(@martynasma)

8 years, 4 months ago
I’m terribly sorry, I made a typo in the code. Here’s how it should be:
```
// PRE-ZOOM THE CHART
chart.addListener("rendered", function(event) {
  var end = new Date(); // today
  var start = new Date(end);
  start.setDate(end.getDate() - 10);
  chart.zoomToDates(start, end);
});

// WRITE
chart.write("chartdiv");
```
(left out a = sign in previous code)
Thread Starter Sevario
(@sevario)

8 years, 4 months ago

That’s okay, thanks for the really fast reply.
It works now but it’s just zoomed in on the last day (28-11-2015).

I’m sorry for all the questions, I’m not very experienced with this yet

Plugin Author martynasma
(@martynasma)

8 years, 4 months ago

No worries.

Are there any other data points in the last 10 days in your data?

Thread Starter Sevario
(@sevario)

8 years, 4 months ago

Yes, there is data for every single day from 02-01-2015 untill 28-11-2015
Plugin Author martynasma
(@martynasma)

8 years, 4 months ago
Try this instead:
```
// PRE-ZOOM THE CHART
chart.addListener("rendered", function(event) {
  chart.zoomToIndexes(chart.dataProvider.length - 10, chart.dataProvider.length - 1);
});

// WRITE
chart.write("chartdiv");
```
Thread Starter Sevario
(@sevario)

8 years, 4 months ago

Thank you very much, it works now.

Although it made the graph go from 19-11-2015 to 28-11-2015.

but by changing the 10 to 11 it seemed to fix it.

Plugin Author martynasma
(@martynasma)

8 years, 4 months ago

Excellent. Glad I could help.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘How to make the date scrollbar start at a certain date’ is closed to new replies.

Tags