Open ramnathv opened 11 years ago
Here is one way I can rewrite this.
<script>
var chartParams = {{{ chartParams }}}, chartId={{{ chartId }}}, yAxis = {{{ yAxis }}}
function drawChart(chartParams, chartId, yAxis){
chartParams.element = document.querySelector('#' + chartId)
var graph = new Rickshaw.Graph(chartParams);
graph.render();
var x_axis = new Rickshaw.Graph.Axis.Time( {
graph: graph
} );
var yAxis = new Rickshaw.Graph.Axis.Y( {
graph: graph,
orientation: yAxis.orientation,
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('yAxis' + chartId),
});
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
graph: graph
});
var legend = new Rickshaw.Graph.Legend( {
graph: graph,
element: document.getElementById('legend' + chartId)
});
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
graph: graph,
legend: legend
});
}
</script>
Here is the function from Rickshaw. I like to use
chartId
to identify elements of the chart so that multiple charts can be included on the same page. However, this is leading to a really ugly template. One way to resolve this is to encapsulate everything into a function and just call it with the right parameters.