In this tutorial we will enhance our previous example in order to parse dates. This will allow us to obtain date-based graphs displaying their data points using relative distance to each other and not placing them at regular spaces.
Now we are ready. Let’s start!
HANDLING DATES IN OUR DATA SOURCE
The very first step we need to accomplish in this tutorial is to create a function that converts date strings into Date objects. This could be achieved with the following code, where we define a function which requires a string with YYYY-MM-DD date format as first parameter, and returns a Date object created from that date string:
Now the data provider contains Date objects instead of strings. Next step is to configure the category axis of the chart to properly manage Date objects: this is achieved setting the property parseDates of the axis to true:
These lines have to be added to the createChart function, just like this:
If we launch our HTML file in the browser, we should get the following result:
Hey, wait a moment! Our graph has changed! That's because our data has different size time gaps between data points, and now amCharts is able to understand dates in our data, rendering them in their relative position.
If we want to draw a graph like the previous one (using regular intervals between data points), we have to set to true the property equalSpacing of the category Axis:
And now the resulting graph looks more like the one we got in Part 2 of this tutorial series, but now the labels on the category axis are displayed using a date format, instead of using directly the string from our data:
MAKING-UP OUR CHART
First of all we will apply some general styles to the chart so we can set up margins, set a general color and add an initial animation:
Then we will style both axes. We will set our category axis to use bluish colors for the axis and grid lines:
To set up the value axis, we need an instance of ValueAxis, but we haven't created one until now, so our first step is to get a fresh instance. Then, in a similar way as before, we will set our value axis using also bluish colors but this time we don't want to show the grid lines, just the background colors. Finally, we add our new styled value axis to the chart:
Last step is to apply some styles to our graph line:
And the resulting chart should look like this one:
Here you have full source code as it should look like once all changes we have talked about in this tutorial have been applied: