gochart/template_spline_html.go

package main

// see the resource of : http://www.freecdn.cn/libs/highcharts/

// spline,line,column,area,bar
var TemplateSplineHtml = `{{define "T"}}
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Gochart - {{.ChartType}} | CodeG.cn</title>

        <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
        $(function () {
            $('#container').highcharts({
                chart: {
                    // type: 'spline'
                    type: '{{.ChartType}}'
                                        // 默认是折线图(line)。type取值如下：
                                        // line:折线图
                                        // spline:曲线图，线条圆滑一些
                                        // column:竖向柱状图
                                        // area:面积图
                                        // bar:横向柱状图
                                        // 更多选项请参考：http://api.highcharts.com/highcharts#plotOptions
                },
                title: {
                    // text: 'Monthly Average Temperature',
                    text: '{{.Title}}',
                },
                subtitle: {
                    // text: 'Source: WorldClimate.com',
                    text: '{{.SubTitle}}',
                },
                xAxis: {
                    // categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
                    categories: [{{.XAxisNumbers}}] // JSONArray格式，数字，与x轴上点数的个数一致，
                },
                yAxis: {
                    title: {
                        // text: 'Temperature (°C)'
                        text: '{{.YAxisText}}'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    shared: true,
                    // valueSuffix: '°C'
                    valueSuffix: '{{.ValueSuffix}}'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: {{.DataArray}}
                /*
                [
	                // sample data is bellow
	                {
	                    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]
	                }
                ]
                */
            });
        });    
        </script>
    </head>
    <body>
    By <a id="copyright" class="anchor" href="http://blog.codeg.cn/2014/12/13/Hello-CodeG/" >zieckey@gmail.com</a>
    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/highcharts.js"></script>
    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/modules/exporting.js"></script>

    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    </body>
</html>
{{end}}
`
-												Add server.go and other js code, the chart is showing now. But has one problem, the showing charset has problem

											
										
										
											2014-12-25 21:09:41 +08:00
+								package main
-												rename point_line_html.go -> spline_html.go

											
										
										
											2014-12-26 14:23:18 +08:00
+								// see the resource of : http://www.freecdn.cn/libs/highcharts/
-												delete some useless file. and add more chart type

											
										
										
											2014-12-27 11:09:52 +08:00
+								// spline,line,column,area,bar
-												add column plot chart

											
										
										
											2014-12-26 17:42:51 +08:00
+								var TemplateSplineHtml = `{{define "T"}}
-												Add server.go and other js code, the chart is showing now. But has one problem, the showing charset has problem

											
										
										
											2014-12-25 21:09:41 +08:00
+								<!DOCTYPE HTML>
 								<html>
 								    <head>
 								        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-												modify the title. and add the chart type to the title

											
										
										
											2014-12-28 11:04:09 +08:00
+								        <title>Gochart - {{.ChartType}} | CodeG.cn</title>
-												Add server.go and other js code, the chart is showing now. But has one problem, the showing charset has problem

											
										
										
											2014-12-25 21:09:41 +08:00
-												use the js from http://cdn.hcharts.cn/highcharts/4.0.1. and fix the showing charset problem

											
										
										
											2014-12-25 21:22:09 +08:00
+								        <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
-												Add server.go and other js code, the chart is showing now. But has one problem, the showing charset has problem

											
										
										
											2014-12-25 21:09:41 +08:00
+								        <script type="text/javascript">
 								        $(function () {
 								            $('#container').highcharts({
 								                chart: {
 								                    // type: 'spline'
-												add pie plot chart

											
										
										
											2014-12-26 17:37:11 +08:00
+								                    type: '{{.ChartType}}'
-												Add server.go and other js code, the chart is showing now. But has one problem, the showing charset has problem

											
										
										
											2014-12-25 21:09:41 +08:00
+								                                        // 默认是折线图(line)。type取值如下：
 								                                        // line:折线图
 								                                        // spline:曲线图，线条圆滑一些
 								                                        // column:竖向柱状图
 								                                        // area:面积图
 								                                        // bar:横向柱状图
 								                                        // 更多选项请参考：http://api.highcharts.com/highcharts#plotOptions
 								                },
 								                title: {
 								                    // text: 'Monthly Average Temperature',
 								                    text: '{{.Title}}',
 								                },
 								                subtitle: {
 								                    // text: 'Source: WorldClimate.com',
 								                    text: '{{.SubTitle}}',
 								                },
 								                xAxis: {
 								                    // categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
-												spline plot OK

											
										
										
											2014-12-26 20:25:03 +08:00
+								                    categories: [{{.XAxisNumbers}}] // JSONArray格式，数字，与x轴上点数的个数一致，
-												Add server.go and other js code, the chart is showing now. But has one problem, the showing charset has problem

											
										
										
											2014-12-25 21:09:41 +08:00
+								                },
 								                yAxis: {
 								                    title: {
 								                        // text: 'Temperature (°C)'
-												rename point_line_html.go -> spline_html.go

											
										
										
											2014-12-26 14:23:18 +08:00
+								                        text: '{{.YAxisText}}'
-												Add server.go and other js code, the chart is showing now. But has one problem, the showing charset has problem

											
										
										
											2014-12-25 21:09:41 +08:00
+								                    },
 								                    plotLines: [{
 								                        value: 0,
 								                        width: 1,
 								                        color: '#808080'
 								                    }]
 								                },
 								                tooltip: {
-												modify the title. and add the chart type to the title

											
										
										
											2014-12-28 11:04:09 +08:00
+								                    shared: true,
-												Add server.go and other js code, the chart is showing now. But has one problem, the showing charset has problem

											
										
										
											2014-12-25 21:09:41 +08:00
+								                    // valueSuffix: '°C'
 								                    valueSuffix: '{{.ValueSuffix}}'
 								                },
 								                legend: {
 								                    layout: 'vertical',
 								                    align: 'right',
 								                    verticalAlign: 'middle',
 								                    borderWidth: 0
 								                },
-												add pie plot chart

											
										
										
											2014-12-26 17:37:11 +08:00
+								                series: {{.DataArray}}
-												Add server.go and other js code, the chart is showing now. But has one problem, the showing charset has problem

											
										
										
											2014-12-25 21:09:41 +08:00
+								                /*
-												add pie plot chart

											
										
										
											2014-12-26 17:37:11 +08:00
+								                [
 									                // sample data is bellow
 									                {
 									                    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]
 									                }
-												Add server.go and other js code, the chart is showing now. But has one problem, the showing charset has problem

											
										
										
											2014-12-25 21:09:41 +08:00
+								                ]
-												add pie plot chart

											
										
										
											2014-12-26 17:37:11 +08:00
+								                */
-												Add server.go and other js code, the chart is showing now. But has one problem, the showing charset has problem

											
										
										
											2014-12-25 21:09:41 +08:00
+								            });
 								        });
 								        </script>
 								    </head>
 								    <body>
-												Update email address

											
										
										
											2017-03-12 10:31:56 +08:00
+								    By <a id="copyright" class="anchor" href="http://blog.codeg.cn/2014/12/13/Hello-CodeG/" >zieckey@gmail.com</a>
-												use the js from http://cdn.hcharts.cn/highcharts/4.0.1. and fix the showing charset problem

											
										
										
											2014-12-25 21:22:09 +08:00
+								    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/highcharts.js"></script>
 								    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/modules/exporting.js"></script>
-												Add server.go and other js code, the chart is showing now. But has one problem, the showing charset has problem

											
										
										
											2014-12-25 21:09:41 +08:00
+								    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
 								    </body>
 								</html>
 								{{end}}
 								`