Hi there, I hope I post my question in the right forum. I'm looking for a solution to have a simple bar graph that can be monthly updated by some data file. The graph consists of 4-5 bars that display a single value. What varies is - of course - the bars length, name inside the bar and the value in numbers within the bar. Underneath each bar comes a logo which has to be changed every now and then. See my example underneath.
At the moment the graphs are static in an e-pub document (Indesign CC17) and are manually updated each month. After mutations, the e-pub is exported as html pages using IN5. What would be the best solution/workflow for this setup? Thanks in advance!
1 Correct answer
16
Replies
Nice. But I thought you hated animation 
.
You have started me off Nancy, so if anyone complains about me ranting I am going to blame you .
You are correct in that Animate does not support the creation of animated svg's. What annoys me though is that Dw itself has one of the best svg code editors available, but mixing javascript or css with svg is more trouble than it is worth, (code hinting is terrible when one tries). The other problem with Dw is that one cannot draw svg's when using Dw, it is a code or nothing environment.
Illustrator on the other hand is fantastic for drawing svg's, but the javascript must be added at creation time as once the svg is saved the svg code becomes almost unreadable in Dw, and it does not support adding css. These limitations of no css, having to add the js in illustrator and code that is difficult to change in Dw, makes it unusable for most users for anything beyond static svg 'images' being created in illustrator.
svg was created by Adobe in answer to the problems/limitations of vml from microsoft, but the usual problems of having to use two different types of code, and browser compatability meant that both were never popular. Now though all modern browsers and devices support svg, and vml has been dropped by Microsoft.
What we really require is some way to discuss what those developing web sites/apps, and the content, to 'talk' with those at Adobe who can make the decisions regarding future improvements across multiple products. As relying or thinking that the current CAB/pre-release (or even user forums) method for each individual product, simply does not work when something would be best supported using more than one product.
The problem with the above though, (trying not to sound like a certain shopping web site ex-user) is that those chosen would almost certainly have no idea what they were talking about when it came to the features required across each individual product, and would almost certainly not represent what is required in the future, (most cannot get the html/css/javascript requirerments correct in one product) making anything Adobe would do, out-dated before it was included.
You could do this very quickly with HTML5 + Canvas.js. Simply change values in the dataPoints array shown below in red. Canvas.js is quite flexible and there's good documentation for it on their website.
Paste this code into a new, blank document.
<!DOCTYPE HTML>
<html lang="en">
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "Fruits sold in First Quarter"
},
data: [//array of dataSeries
{ //dataSeries object
/*** Change type "column" to "bar", "area", "line" or "pie"***/
type: "column",
dataPoints: [
{ label: "banana", y: 24 },
{ label: "orange", y: 29 },
{ label: "apple", y: 40 },
{ label: "mango", y: 34 },
{ label: "grape", y: 24 }
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"> </div>
</body>
</html>
AdChoices