score:15
Accepted answer
you can use view's "render" method to initialize highcharts:
$(function () {
var datamodel = backbone.model.extend({});
var datacollection = backbone.collection.extend({
model: datamodel
});
var dataview = backbone.view.extend({
el: '#container',
initialize: function (options) {
this.data = options.data;
},
render: function () {
this.$el.highcharts({
title: {
text: 'monthly average temperature',
x: -20 //center
},
subtitle: {
text: 'source: worldclimate.com',
x: -20
},
xaxis: {
categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun',
'jul', 'aug', 'sep', 'oct', 'nov', 'dec']
},
yaxis: {
title: {
text: 'temperature (°c)'
},
plotlines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valuesuffix: '°c'
},
legend: {
layout: 'vertical',
align: 'right',
verticalalign: 'middle',
borderwidth: 0
},
series: this.data.tojson()
});
}
});
var items = new datacollection([{
name: 'tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'new york',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'london',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]);
var view = new dataview({ data: items });
view.render();
});
here is live example: jsfiddle
Source: stackoverflow.com
Related Query
- Using HighCharts with Backbone
- Type 'number[]' has no properties in common with type 'XrangePointOptionsObject' in Angular8 using Highcharts
- Using a fill pattern instead of colour with HighCharts
- getting error#17 from highcharts while using solid gauge from backbone rails
- Using highcharts with rails not displaying plotLines
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- Highcharts - Global configuration with common code and unique data & Headings
- creating a bar chart using Highcharts with React - getting an error that rendering div isn't found
- Timeline chart with highcharts using x-range with multiple stacks
- Using Trellis Chart with Stacked Columns in Highcharts
- Highcharts problem with xAxis using multiple series
- when printing page with highcharts using javascript this.print() width values in css in @media print seem to be ignored
- How to draw a bubble map with longitude and latitude using Highcharts in react
- Using wkhtmltopdf with highcharts shows blank chart
- Loading 'theme' and 'exporting' module with Highcharts using Requirejs
- Creating Highcharts with Angular using Highcharts >= 5.0.0 and highcharts-ng >= 1.0.0 using a ChartFactory
- Using Bootstrap Datepicker with Highcharts
- Jquery Highcharts is not loading when using with common function?
- Using Highcharts with mysql for Page Visits
- using library highcharts with asp.net mvc 3
- Drawing Bubble Chart by using npm highcharts with error #17
- Charts using Highcharts with multiple series from JSON
- Strange behavior with highcharts when using "column" type and multiple datetime series
- passing formatting JavaScript code to HighCharts with JSON
- highcharts example for using data from database with mvc
- Using Highcharts (and modules) with lit-element
- How can I make milestone lines with a GANTT chart using the highcharts library?
- dynamic highchart config in angular ui grid with angular js using pablojim's highcharts ng
- Rendering more than one chart with Highcharts using Angular js Directives
- How to specify a range of data when using HighCharts with <table>?
More Query from same tag
- High charts undefined value on customizing tool tip - Unable to get the ID from array
- Highchart Json Format for Highchart stock chart
- Rails ActiveRecord group_by & sum db results for use with Lazy HighCharts
- HighChart irrgular Mapping
- Highcharts Doesn't Refresh at Colorbox but Automatically Refreshes When Inspected at Firebug
- Create a heatmap using Yii2 highcharts widget
- highcharts with lots of data render blank in pdf use wicked_pdf
- Hidden duplicate legends in Charts
- In highcharts's stacked bar chart, how can I remove the white space between different
- How to show only the last 100 candlesticks or hide the first 50 candlesticks in Highcharts Stock Chart?
- Export chart image data locally in HIghchart
- How to show additional data in tooltip of PIE Chart-Highcharts
- Highcharts not displaying JSON data
- Highchart Date time interval in x-Axis
- Highmaps UK map data
- highcharts.js push line to the bottom of the charts when y values are all 0
- How can I embed the AJAX output of JS in Javascript function
- Aggregate Total with Highcharts Line Chart
- Format point value in hightcharts
- How to get series highlight on hover in highcharter?
- Labels are not rendering for plotLines highcharts
- Scrape data from dynamic Highcharts visualisation
- I want the three circles to overlap. (use highcharts)
- HighCharts Semi Circle dial that positions correctly
- Highcharts Single Data Label in middle of Area
- Highcharts reflow changes height
- using angular directive to draw highchart pie chart but when i am using it in success function it is not working
- I need a realtime intraday chart where x axis is pre defined interval of 30 minutes
- How to disable legend click to stop pie slice from disappearing in Highcharts?
- how to show PHP array in jQuery alert?