Getting StartedPerformance !!!Chart DataBar and Column ChartsLine and Area ChartsPie and Funnel ChartsScatter and Bubble ChartsRadar and Polar ChartsFinancial ChartsGantt ChartsCombinational ChartsDynamic ChartsWorking with Chart AxesChart FeaturesCustomizing ChartClient-Side Events |
This sample demonstrates the Radar Spline chart type.
For detailed implementation, please take a look at the HTML code tab. <!DOCTYPE html> <html> <head> <title> Radar Spline Chart Example - JavaScript Chart by DataViz Charts </title> <link rel="stylesheet" type="text/css" href="../../css/dataviz.chart.css" /> <link rel="stylesheet" type="text/css" href="../../themes/le-frog/styles.css" /> <script src="../../js/dataviz.chart.min.js" type="text/javascript"></script> <script lang="javascript" type="text/javascript"> var background = { type: 'linearGradient', x0: 0, y0: 0, x1: 0, y1: 1, colorStops: [{ offset: 0, color: '#d2e6c9' }, { offset: 1, color: 'white'}] }; var chart = new DataViz.Chart({ title: { text: 'Radar Spline Chart' }, border: { strokeStyle: '#6ba851' }, background: background, axes: [ { type: 'categoryAngle', categories: ['France', 'Canada', 'Germany', 'USA', 'Italy', 'Spain', 'Russia', 'Sweden', 'Japan'] } ], series: [ { title: 'Series 1', type: 'radarSpline', data: [65.62, 75.54, 60.45, 34.73, 85.42, 55.9, 63.6, 55.1, 77.2] }, { title: 'Series 2', type: 'radarSpline', data: [46.45, 63.78, 86.45, 30.76, 23.79, 35.67, 89.56, 67.45, 38.98] } ] }); chart.write('container'); </script> </head> <body> <div> <div id="container" style="width: 500px; height: 300px;"> </div> </div> </body> </html> |