Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

For same values of y-axis graph line moves up and down #622

Open
isfando opened this issue Mar 25, 2019 · 0 comments
Open

For same values of y-axis graph line moves up and down #622

isfando opened this issue Mar 25, 2019 · 0 comments

Comments

@isfando
Copy link

isfando commented Mar 25, 2019

One part of input data which i visualize is below
"average_total_waste": "[0,0,0,0,0,0,0,0,0,0,0,0,0,41,41,41,41,132,132,132,132,331,331,331,331,469,469,469,469,572]",

I use the code below to visualize it

        function generateTimeSeriesVisualization(jsonResults,visualzationArray,
                                                 chartID, x_axis_ID, y_axis_ID, legend_ID) {

            //results = dataset['results'];
            results = jsonResults;
            chartName = chartID;


            
            var palette = new Rickshaw.Color.Palette();
            var seriesData = [];

            for (var i in visualzationArray){

                seriesData.push({
                    "color" : palette.color(),
                    "data" : convert_float_array_to_rickshaw_timeseries_format(results[visualzationArray[i]]),
                    "name" : visualzationArray[i]

                });

            }

            
            // instantiate our graph!
            var graph = new Rickshaw.Graph({
                //element: document.getElementById("chart"),
                element: document.getElementById(chartName),
                width: 400,
                height: 350,
                renderer: 'line',
                padding: {top: 0.02, left: 0.02, right: 0.02, bottom: 0.02},
                min: 'auto',
                series: seriesData
            });
            var xaxis_formater = function (n) {
                return Math.round(n);
            }


            var hoverDetail = new Rickshaw.Graph.HoverDetail({
                graph: graph,
                xFormatter: xaxis_formater
            });
            var legend = new Rickshaw.Graph.Legend({
                graph: graph,
                element: document.getElementById(legend_ID)
            });
            var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
                graph: graph,
                legend: legend
            });

            var x_ticks = new Rickshaw.Graph.Axis.X({
                graph: graph,
                orientation: 'bottom',
                element: document.getElementById(x_axis_ID),
                pixelsPerTick: 50,
                tickFormat: xaxis_formater
            });

            var y_ticks = new Rickshaw.Graph.Axis.Y({
                graph: graph,
                orientation: 'left',
                tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
                element: document.getElementById(y_axis_ID),
                pixelsPerTick: 30

            });

            graph.render();

        }

        function convert_float_array_to_rickshaw_timeseries_format(params) {
            //console.log(params)
            var timeseries_array = [];
            for (i = 0; i < params.length; i++) {
                var dict = {x: i, y: Math.round(params[i])};
                timeseries_array.push(dict);
            }
            return timeseries_array
        }

The problem is y-axis value remains same for different values of x-axis. Now if the y-axis remains constant while x-axis moves forward, the line will dangle up and down This is shown in the sample picture also.

github sample

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant