How can I plot a time series (using highcharts) without filling the area below the line?

[Gonzalo Espinoza Davalos]

I'm trying to ceate a plot using the TimeSeries Gizmo object. My problem is that I just want to create the line and avoid filling the area from the line to the axis with color (see attached picture). What can I do?

[swainn]

Can you please attach the code that you are use to create the plot?

[Jiří Kadlec]

Hi,

We had many similar problems with the gizmo. The solution that worked for us was stop using the gizmo, and instead use Highcharts directly:

1) In templates/home.html add <div id="ts-chart" class="highcharts-plot"></div> in the place where we want to show the chart

2) In templates/home.html under {% block scripts %} add <script src="/static/tethys_gizmos/vendor/highcharts/js/highcharts.js"></script>

3) In public/js/main.js add the configuration of the chart, for example:

var chart_options = {

plotOptions: {

line: {

color: Highcharts.getOptions().colors[0],

marker: {

radius: 2

},

            size:'100%',

lineWidth: 1,

states: {

hover: {

lineWidth: 1

}

},

threshold: null

}

}

};

// this command will initialize the chart

$(document).ready(function () {

    $('#ts-chart').highcharts(chart_options);

})

For adding data to the chart we make a new controller (for example chart_data) that returns the data array in json format,

and then in main.js we can use a command like

     $('#ts-chart').highcharts().addSeries(data)

--
You received this message because you are subscribed to the Google Groups "Tethys Platform" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tethysplatfor...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tethysplatform/54903ea4-9596-4507-8dfe-584b0bde8745%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Jiří Kadlec
Research Assistant
Brigham Young University
Provo, UT, USA

+1 435-315-5263

[Gonzalo Espinoza Davalos]

I'm attaching the code

[Gonzalo Espinoza Davalos]

Thanks for the answer but I want to try to work it out within Gizmos if possible

[swainn]

Try adding the 'type' properties to the series and set it to 'line' or 'spline':

timeseries_plot = TimeSeries(

    height='250px',

    ...

    series=[{

        'name': pointLonLat,

        'data': datarod_ts,

        'type': 'spline',

    }]

)

As a side note, the plots should allow for you to pass in most of the paramaters from the Highcharts API options: http://api.highcharts.com/highcharts#series<spline>