It's about to get ugly...read on at your own risk !
Seriously, it's not a particularly elegant solution, but it might work for you (based on your specific requirements, which at the moment of writing are not very clear to me).
You could use a custom data-* attribute (let's call it data-chart-data
) in each <a>
element you want to display a chart and store there some serialized data.
(For my illustration I used a simple scheme: separating table rows with |
and separating cell-data with ,
).)
<a href="#data" class="chartLink"
data-chart-data='"Year","Sales","Expenses"|"2004",1000,400'>
Show Chart
</a>
Then, on the JS part, you need to pass the chart-data as parameter to the drawVisualization()
function.
Accessing the chart-data (using HTML5): aElem.dataset.chartData
Accessing the chart-data (no HTML5): aElem.getAttribute("data-chart-data")
Unfortunately, you will need some custom function to convert the chart-data from string representation to a JS array. Here is my sample function that expects values of type integer (anything not enclosed in "
) and string (anything enclosed in "
):
function strToArr(str) {
var arr = [];
var rows = str.split("|");
for (var i = 0; i < rows.length; i++) {
var row = [];
var regex = new RegExp("^\"(.*)\"$");
var values = rows[i].split(",");
for (var j = 0; j < values.length; j++) {
var value = values[j].trim();
row.push(regex.test(value)
? RegExp.$1
: parseInt(value, 10));
}
arr.push(row);
}
return arr;
}
Of course, you should modify this function to cover your needs.
In similar fashion, you could serialize the "options" and pass them as parameter to drawVisualization()
too.
See, also, this short demo.