CODEWITHSUNDEEP
javascriptchartsjqplot
Raolin
Raolin

Reputation: 379

jqPlot: possible to dynamically add a new series?

Is it possible to dynamically add a new series to an existing jqPlot object?

I have a jqPlot object that uses the AJAX data renderer to retrieve 2 series. This part works works fine.

Based on user input (and several parameters), I would like to be able to dynamically add or remove additional series to the chart (while keeping the two original).

Is this possible? Is it possible without having to retrieve the unchanged data for the original two lines again?

Alternatively, if this is not possible, are there any recommendations for a different charting library that can do this?

Upvotes: 0

Views: 2312

Answers (1)

user2561852
user2561852

Reputation: 97

Yes it is, I just found out how to do this, and I found your question, and there was no answer, so I will provide mine. Now, this is probably not the most elegant way to do it, but it works.

$(document).ready( function () {

    DataSeriesToPlot = [[[x1_1,y1_1],[x1_2,y1_2]],[[x2_1,y2_1],[x2_2,y2_2]],
    [[x3_1,y3_1], [x3_2,y3_2]]];
    AxesOptions = {
        xaxis: {min: xmin, max: xmax},
        yaxis: {min: ymin}
    };
    PlotTitle = 'PlotTitle',
    PlotSeriesDefaults = {
        showMarker: false,
        shadow: false,
        rendererOptions: {
            smooth: true
        }
    };
    PlotLegend = {
        show: true,
        labels: ['label1','label2','label3']
    };
    PlotSeriesOptions = [
        {
            linePattern: 'dashed',
            color: '#f80202',
        },
        {
            linePattern: 'dashed',
            color: '#f80202',
        },
        {
            color: '#f80202',
        }
    ];

    PlotVar = $.jqplot('Plotdiv', DataSeriesToPlot,
    {
        axes: AxesOptions,
        title: PlotTitle,
        seriesDefaults: PlotSeriesDefaults,
        series: PlotSeriesOptions,
        legend: PlotLegend  
    });

AddToPlot();

});

function AddToPlot(){

    $("Plotdiv").empty();
    DataSeriesToPlot.push([[x4_1,y4_1],[x4_2,y4_2]]);
    PlotLegend.labels.push('label4');
    PlotSeriesOptions.push({
        linePattern: 'dashed',
        color: '#ff6600',
    });

    PlotVar = $.jqplot('Plotdiv', DataSeriesToPlot,
    {
        axes: AxesOptions,
        title: PlotTitle,
        seriesDefaults: PlotSeriesDefaults,
        series: PlotSeriesOptions,
        legend: PlotLegend  
    });
}

Upvotes: 2

Related Questions