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 Stacked Spline chart type.
For detailed implementation, please take a look at the HTML code tab. <!DOCTYPE html> <html> <head> <title> Stacked 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 chart = new DataViz.Chart({ title: { text: 'Stacked Spline Chart' }, animation: { duration: 1 }, shadows: { enabled: true }, axes: [ { type: 'category', location: 'bottom', categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'] } ], series: [ { type: 'stackedSpline', title: 'Stacked 1', data: [62, 70, 68, 58, 52, 60, 48], labels: { font: '12px sans-serif' } }, { type: 'stackedSpline', title: 'Stacked 2', data: [56, 30, 62, 65, 40, 36, 70], labels: { font: '12px sans-serif' } }, { type: 'stackedSpline', title: 'Stacked 3', data: [33, 42, 54, 23, 54, 47, 61], labels: { font: '12px sans-serif' } } ] }); chart.write('container'); </script> </head> <body> <div> <div id="container" style="width: 500px; height: 300px;"></div> </div> </body> </html> |