I am in the process of creating a dynamic SVG Chart that gets temperature values from a database.
I was wondering if it was possible to use only CSS to animate the chart points.
The chart I created can be seen here and does not use JavaScript.
I would like the chart to animate similar to this example.
CSS animation is something I have yet to explore, I suppose I have not found any use for it yet. So I’m not saying anything specific, more theoretical.
Your back-end scripting will be able to plot the points on the chart to draw the svg line.
A simple way to get the reveal effect of the line may be to have some kind of animated rectangular mask, to block out the lines initially and reveal as it moves/shrinks horizontally.
What a difference a little sleep can make.
When I looked at this last night I thought you meant the hover tooltips and thought, animated?? .
But now I get what you mean.
The Y reference lines don’t have any X reference ticks so I think SamA74’s mask idea could work.
If you can create an identical chart “fragment” with only the reference lines I think it could be placed over the real chart, and position slid, over-flow hidden somehow?
If not that, narrowing width, align right?
Hi,
I think if you wanted to animate properly you would need to automate it with js otherwise you would have to set up keyframe animations for every point in that svg with delays and timings to match. I am not familiar with svg animations but I;m guessing that if you are drawing each segment then you would need to have the animation on each segment and therefore really needs to be automated via js even if using css for the animation.
You could do what Sam suggested and just blank out the whole chart and then reveal it with a keyframe rule. This would be quite simple and the basic code would be this.
.w88{position:relative}
.w88.bd1:after{
content:"";
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background:#fff;
animation:show-chart 3s ease 1s forwards;
}
@keyframes show-chart{
from{left:0%}
to {left:100%}
}
Many thanks Paul, @Mittineague and @SamA74.
Your suggestions and script does a splendid job. It is absolutely excellent, not only does it work but discovered no need to display the SVG along with umpteen individual lines, points, circles, titles, etc. The server now reads from the database, creates both a SVG file and a single image. Image is downloaded and displayed with the browser. And also the page size has shrunk tremendously. Making it ideal for mobiles!!!
Now only to debug and find out why it works in FireFox but the animation goes on forever with Chrome. It is now late here so will have another go tomorrow.
Many thanks once again, I had an 'Orrible feeling I would have to use pages of JavaScript to create the same effect.
Update:
I have made most of the changes, tested on the live server and discovered there was a clash with the third-party Cloud Server. Animation did not work no doubt due to caching 
I updated the above site with a link to another site not using a CDN.
If the original link is not redirecting correctly then here is a site link (with no CDN):
latest version with no Cloud Service
I am delighted to say it tests OK using FireFox, Chrome, Opera and Vivaldi, iPad 2…
…I have no idea about other Mobiles, Windows or Macs…
Sample output:
Sorry, I don;t know anything about servers but are you sure the animation is not just running before the page has loaded?
In my example I put in an animation delay of 1s just to give it a chance but you could increase that delay to allow the page to load. I don’t know if it will solve that server issue though 
@SamA74, @Mittineague, @PaulOB
Delighted to say it is possible to animate a SVG file without using JavaScript. It was not easy to find the relevant documentation it seems JavaScript Libraries are far more popular for some unknown reason.
If anyone looks at the HTML, SVG or Style-sheet, please excuse the code as I am now busy with the last 5% before optisation
Latest Version without JavaScript
PNG file from sample SVG:
http://john-betong.tk/img-svg-chart/1467800818_Wednesday_Jul_06th__17-26-58.png
The SVG learning curve is long and steep but well worth the effort. If time is short then there are numerous JavaScript libraries available which can easily be copied and pasted. Result will be slower so not as good for mobile viewing.
[off-topic]
Why is Pingdom showing a zero file size for the SVG logo? Is it because the file is embedded and will it not be cached?
Pingom Results - 459 ms load time
[/off-topic]
I think so, the inline image data is included as part of the html, with that in mind though, I’m not sure why it counts as a request.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
