如何将json值传递到highchart热图

时间:2019-06-12 11:15:04

标签: python json sql-server highcharts

我已经使用highcharts创建了一个热图,并且该数据的数据是硬编码的。如何通过python从SQL Server获取此数据?还是有其他流程吗?

我用以下代码创建了热图:

Highcharts.chart('container', {

chart: {
    type: 'heatmap',
    marginTop: 20,
    marginBottom: 50,
    plotBorderWidth: 1
},


title: {
    text: ''
},

xAxis: {
    title: {
    enabled: true,
    text: 'Effective Month'
},
    categories: [ 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

yAxis: {
    title: {
    enabled: true,
    text: 'Snapshot Date'
},
    categories: ['03/18/2019','03/25/2019','04/01/2019','04/08/2019','04/15/2019','04/22/2019','04/29/2019','05/06/2019','05/13/2019','05/20/2019','05/27/2019','06/03/2019']
},

colorAxis: {
    min: 0,
    //minColor: '#33AF6D',
    //maxColor: '#CA3D3D'
    //minColor: '#FFFFFF',
    //maxColor: Highcharts.getOptions().colors[0]

    stops: [
            [0, '#F0F3F3'],
           // [0.5, '#fffbbc'],
            [0.9, '#1ABB9C']
        ]
},

legend: {
    align: 'right',
    layout: 'vertical',
    margin: 0,
    verticalAlign: 'top',
    y: 25,
    symbolHeight: 380
},

tooltip: {
    formatter: function () {
        return ' Effective Month : <b>' + this.series.xAxis.categories[this.point.x] + 
        '</b><br> Snapshot Date : <b>' + this.series.yAxis.categories[this.point.y] + 
        '</b><br> Projects : <b>' +
            this.point.value;
    }
},
plotOptions: {
        series: {
            events: {
                click: function (event) {
                    //alert(this.name + ' clicked' + event.point);
                    var snapshot_dt = event.point.series.yAxis.categories[event.point.y] ;
                    var mnth = event.point.series.xAxis.categories[event.point.x];
                    var str = event.point.series.yAxis.categories[event.point.y] + ',' +
                        event.point.series.xAxis.categories[event.point.x]
                    //alert(str);
                    //drawChart(snapshot_dt, mnth);

                    //if(snapshot_dt != ' ' && mnth != ' ')
                    //{ 
                        $('.loading_bar').show(); 
                        $('.loading_pie').show();
                        drawBarChart(snapshot_dt, mnth);
                        drawPieChart(snapshot_dt, mnth);
                        document.getElementById('timeline').innerHTML = '';
                        document.getElementById('table_chart_div').innerHTML = '';
                    //}
                }
            }
        }
    },
series: [{
    name: 'Sales per employee',
    borderWidth: 1,
    data: [[0, 0, 39], [0, 1, 39], [0, 2, 39],[0, 3, 39], [0, 4, 39], [0, 5, 39],[0, 6, 39], [0, 7, 39], [0, 8, 39],[0, 9, 39], [0, 10, 39], [0, 11, 39],
    [1, 0, 74], [1, 1, 73], [1, 2, 73],[1, 3, 73], [1, 4, 73], [1, 5, 73],[1, 6, 72], [1, 7, 72], [1, 8, 71],[1, 9, 69], [1, 10, 69], [1, 11, 69], 
    [2, 0, 84], [2, 1, 83], [2, 2, 83],[2, 3, 84], [2, 4, 84], [2, 5, 84],[2, 6, 84], [2, 7, 84], [2, 8, 84],[2, 9, 84], [2, 10, 84], [2, 11, 84], 
    [3, 0, 63], [3, 1, 63], [3, 2, 64],[3, 3, 67], [3, 4, 70], [3, 5, 71],[3, 6, 72], [3, 7, 70], [3, 8, 69],[3, 9, 69], [3, 10, 69], [3, 11, 69], 
    [4, 0, 34], [4, 1, 36], [4, 2, 41],[4, 3, 49], [4, 4, 55], [4, 5, 56],[4, 6, 60], [4, 7, 61], [4, 8, 62],[4, 9, 62], [4, 10, 60], [4, 11, 60], 
    [5, 0, 10], [5, 1, 10], [5, 2, 14],[5, 3, 20], [5, 4, 21], [5, 5, 22],[5, 6, 33], [5, 7, 38], [5, 8, 40],[5, 9, 41], [5, 10, 45], [5, 11, 45],  
    [6, 0, 5], [6, 1, 6], [6, 2, 7],[6, 3, 7], [6, 4, 7], [6, 5, 8],[6, 6, 10], [6, 7, 10], [6, 8, 10],[6, 9, 15], [6, 10, 23], [6, 11, 26], 
    [7, 2, 2],[7, 3, 2], [7, 4, 2], [7, 5, 2],[7, 6, 3], [7, 7, 3], [7, 8, 3],[7, 9, 6], [7, 10, 6], [7, 11, 6],
    [8, 8, 1],[8, 9, 1], [8, 10, 1], [8, 11, 2], 
    [9, 0, 2], [9, 1, 3], [9, 2, 4],[9, 3, 4], [9, 4, 6], [9, 5, 6],[9, 6, 7], [9, 7, 7], [9, 8, 9],[9, 9, 9], [9, 10, 10], [9, 11, 11]],
    dataLabels: {
        enabled: true,
        color: '#000000'
    }
}]

 });
 }

如您所见,此处的数据是硬编码的。我已经编写了python函数,该函数返回具有相关数据的JSON。我如何解析它,然后将其传递给highcharts? Python代码如下:

  import pyodbc 
  import pandas as pd
  import json

   config = dict(server =   '*****', 
          port =      '****',                 
          database = '****',
          username = '****',
          password = '****')

   conn_str = ('SERVER={server},{port};'   
        'DATABASE={database};'      
        'UID={username};'           
        'PWD={password}')

   try:
    conn = pyodbc.connect(r'DRIVER={' + pyodbc.drivers()[0] + '};' + 
    conn_str.format(**config)) 
    cursor = conn.cursor()
   except:
     print "Could not connect to Database"

  query ="""
   Select Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec
   from 
   (
    Select CONVERT(date,Snapshot_Date) as Snapshot_Date, Jan, Feb, Mar,               Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec
   from 
   (
Select PPMC_ID, Category, Snapshot_Date, Effective_Date from [****].[dbo].[ProjectMovement]
   )a
   Pivot 
   (
      Count(PPMC_ID) for Effective_Date in (Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec)
   ) as PivotTable
   where Category = \'Corporate Action\')b
   """

   df = pd.read_sql(query, con=conn) 



   a=df.to_json(orient='records')

   print a

如何解析此JSON,以便可以通过html页面上的API调用获取此JSON?请帮助

0 个答案:

没有答案