Sevario

Hello Martynasma,

Today is the last day of my internship here and I just wanted to thank you for all the help that you have given me, I appreciate it a lot and you really helped me out. I learned a lot and that was partially because of you.

Thank you very much, this worked ??

Thank you, you too ??

Nevermind, I figured it out.
I had this in the HTML code for all of them: <div id=”chartdiv” style=”width: 900px; height: 400px;”></div>

I simply had to change the div id of each individual one, my bad.

I currently have this:

chart = new AmCharts.AmSerialChart(); 

chart.dataProvider = chartData; 

chart.categoryField = "WBU_DATUM"; 

chart.categoryAxis.minPeriod = "hh";

chart.dataDateFormat = "DD-MM-YY"; 

  chart.categoryAxis.dateFormats = [ {
    "period": "fff",
    "format": "JJ:NN:SS"
  }, {
    "period": "ss",
    "format": "MMM DD JJ:NN:SS"
  }, {
    "period": "mm",
    "format": "MMM DD JJ:NN"
  }, {
    "period": "hh",
    "format": "MMM DD JJ:NN"
  }, {
    "period": "DD",
    "format": "MMM DD JJ:NN"
  }, {
    "period": "WW",
    "format": "MMM DD"
  }, {
    "period": "MM",
    "format": "MMM"
  }, {
    "period": "YYYY",
    "format": "YYYY"
  } ];

And it still doesn’t work, it only shows the date now.

Alright, but what do I pick for this part:
chart.categoryField =
The hourly values or the date values?

Yes ofcourse, my apologies for misunderstanding.

Here it is

Here is a sample of the graph for when I use the date:
Here
And here is one of the graph for when I use the hours:
Here

Hmm, I still don’t seem to understand exactly how this works.
I have this now:

chart.categoryField = "WBU_DATUM"; 

chart.dataDateFormat = "DD-MM-YY";

which returns a date to me, but this is a graph for temperature by the hour so I use this:

chart.categoryField = "WBU_TIJD"; 

chart.dataDateFormat = "HH";

But then obviously the axis only show the hours, so you can’t see the date that it’s happening on, and I want to see both of them, if possible.

Sorry for the late reply, but I have no idea where I would have to put this piece of code in the following code:

var chart;

// create chart 

AmCharts.ready(function() {

// load the data 

var chartData = AmCharts.loadJSON('https://localhost/QMS/wordpress/WANS_BXS.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;

  chart.chartScrollbar = new AmCharts.ChartScrollbar();

  chart.chartCursor = new AmCharts.ChartCursor();

  chart.mouseWheelZoomEnabled = true;

  chart.mouseWheelScrollEnabled = true;

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

// PRE-ZOOM THE CHART
	chart.addListener("rendered", function(event) {
	chart.zoomToIndexes(chart.dataProvider.length - 11, chart.dataProvider.length - 1);
});

// 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); 

};

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.

Yes, there is data for every single day from 02-01-2015 untill 28-11-2015

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

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?

Thank you very much martynasma, it is working perfectly now ??