Search code examples
javascriptxmlchartshighchartsdrilldown

highchart with drilldown where data for main chart and drilled down chart are from different xml files


I am trying to build column highchart with drilldown, where data for main chart and drilled down chart are from different xml files. Is it possible? I couldn’t find any example. My code doesn’t work properly (I get main chart, but with click on column nothing happen). It seems to me that I am not able to pass drilldown options to highchart. Of course the problem can be much bigger than I think.

Any help would be grateful.

Code:

$(document).ready(function() {
//var drill = [];
var options = {
    credits: {
        enabled: false
    },
    xAxis: [{
        id: 0,
        startOnTick: false,
        labels: {
            y: 15,
            format: '{value:%e %b}',
            zIndex: 0
        },
        tickWidth: 0,
        title: {
            text: null
        },
        type: 'datetime',
        lineColor: '#BDBDBD'
    },{
        id: 1,
        startOnTick: false,
        labels: {
            y: 15,
            style: {
                color: '#A4A4A4'
            },
            zIndex: 0
        },
        tickWidth: 0,
        title: {
            text: null
        },
        type: 'category',
        lineWidth: 0,
        lineColor: '#BDBDBD'
    }],
    yAxis: {
        gridLineWidth: 0,
        gridLineColor: '#e0e0e0',
        labels: {
            y: 0,
            x: 0,
            overflow: 'justify',
            enabled: false,
            maxStaggerLines: 0,
            align: 'center'
        },
        title: {
            margin: 0,
            text: null
        },
        gridLineInterpolation: null,
        lineColor: '#BDBDBD'
    },
    tooltip: {
        enabled: false,
        shared: true,
        xDateFormat: '%e %b',
        valueSuffix: ' Lt',
        borderColor: 'null',
        borderRadius: 10
    },
    plotOptions: {
        areaspline: {
            lineColor: '#c0c0c0',
            marker: {
                enabled: false,
                fillColor: '#e0e0e0',
                radius: 3,
                lineWidth: 1,
                lineColor: '#c0c0c0'
            },
            lineWidth: 1,
            states: {
                hover: {
                    marker: {
                        radius: 3,
                        lineWidth: 1
                    }
                }
            }
        },
        column: {
            allowPointSelect: false,
            cursor: 'pointer',
            pointWidth: 35,
            dataLabels: {
                enabled: true,
                inside: false,
                crop: false,
                overflow: 'none',
                y: -10,
                x: 0,
                verticalAlign: 'middle',
                padding: 0,
            }
        },
        series: {
            animation: {
                duration: 700
            }
        }
    },
    chart: {
        animation: {
            duration: 700
        },
        renderTo: 'container_1_BP',
        events: {
            drilldown: function(e){
                UpdateTitle('BP s/f ('+Highcharts.dateFormat('%Y-%m-%d', e.point.x)+'): ', Highcharts.numberFormat(e.point.y, 0,'.', ',') + ' Lt')
                },
            drillup: function(){
                UpdateTitle('Bendrasis pelnas, s/f', null)
            }
        },
        spacingBottom: 20,
        type: 'column',
        borderRadius: 2,
        spacingTop: 0,
        width: 1012,
        marginLeft: 0,
        spacingRight: 0,
        marginBottom: 40,
        marginRight: 0,
        marginTop: 30,
        height: 180,
        spacingLeft: 0
    },
    title: {
        margin: 5,
        y: 15,
        text: 'Bendrasis pelnas, s/f',
        x: 20,
        align: 'left',
    },
    subtitle: {
        x: 220,
        y: 15,
        style: {'color': '#a4a4a4', 'fontSize': '15px', 'fontWeight': 'bold'},
        align: 'left'
    },
    Exporting: {
        scale: 1,
        buttons: {
            contextButton: {
                enabled: false
            }
        },
        enabled: false
    },
    legend: {
        enabled: false,
        symbolWidth: 12
    },
    series: [{
                index: 1,
                data: []




            },

            {
                index: 0,
                data: []
            }
    ],

    drilldown: {
        activeAxisLabelStyle: {
            textDecoration: 'none',
            fontWeight: 'regular',
            color: 'A4A4A4'
        },
        animation: {
            duration: 700
        },
        activeDataLabelStyle: {
            textDecoration: 'none',
            fontWeight: 'semi-bold',
            color: '4c4c4c'
        },
        drillUpButton: {
            relativeTo: 'spacingBox',
            position: {
                align: 'right',
                x: -5,
                y: 0,
                verticalAlign: 'top'
            }
        },
        series: []

    }
};

                    // Load the data from the XML file 
$.get('BP_plan.xml', function(xml) {

    // Split the lines
    var $xml = $(xml);
    var cats = [], //x-axis categories
        seriesDataMap = {},
        seriesDataMap1 = {}; //map of series name to data

   //combine all processing into a single each callback, this will be faster
    $xml.find('BP_plan').each(function () {
        var $row = $(this),
            category = $row.find('x').text(),
            seriesName = $row.find('').text(),
            dataValue = parseInt($row.find('y').text()),
            dataValue1 = parseInt($row.find('Planas').text());

        cats.push(category);

        if (seriesDataMap[seriesName] === undefined) {
        //if we haven't seen this series before, add an empty array to our map
        seriesDataMap[seriesName] = [];
        }
        if (seriesDataMap1[seriesName] === undefined) {
        //if we haven't seen this series before, add an empty array to our map
        seriesDataMap1[seriesName] = [];
        }
        //add this data point for this series to our map
        seriesDataMap[seriesName].push(dataValue);
        seriesDataMap1[seriesName].push(dataValue1);

    });

    //add categories
    options.xAxis[0].categories = cats;

    //add series data
    for(var seriesName in seriesDataMap) {
    options.series.push({
        xAxis: 0,
        index: 1,
        name: seriesName ,
        data: seriesDataMap[seriesName], 
        type: 'column',
        color: '#30bf09',
        point: {
            events: {
                click: function (e) {

                    $.ajax ({
                        type: 'GET',
                        url: 'detalizacija.xml',
                        dataType: "xml",
                        success: function(duom) {

                            $(duom).find('detalizacija').each(function(){
                                var Data = $(this).find('data').text(),
                                    Kategorija = $(this).find('kategorija').text(),
                                    BP_Lt = parseInt($(this).find('BP_Lt').text());

                                var dataOptions={
                                    y: e.point.category,    
                                    drilldown: {
                                        xAxis: 1,
                                        id: 'pirmas',
                                        categories: [],
                                        data: []
                                    }
                                };

                            if (Data == e.point.category){
                                dataOptions.drilldown.categories.push(Kategorija);
                                dataOptions.drilldown.data.push(BP_Lt);
                                };


                    });
                            //drill.push(dataOptions);
                            options.drilldown.push(dataOptions);
                            }


                    }); 

        }
            }       
                }


    })

    };

    //add series data
    for(var seriesName in seriesDataMap1) {
    options.series.push({
        xAxis: 0,
        index: 0,
        name: seriesName ,
        data: seriesDataMap1[seriesName],
        type: 'areaspline',
        color: '#e0e0e0'

    })

    }

var chart_1 = new Highcharts.Chart(options);


});
});

BP_plan.xml:

<?xml version="1.0" encoding="UTF-8"?>
<dataroot xmlns:od="urn:schemas-microsoft-com:officedata" generated="2014-07-14T10:24:21">
<BP_plan>
<ID>1</ID>
<x>1400187600000</x>
<y>7213</y>
<Planas>2930</Planas>
</BP_plan>
<BP_plan>
<ID>2</ID>
<x>1400274000000</x>
<y>711</y>
<Planas>0</Planas>
</BP_plan>
<BP_plan>
<ID>3</ID>
<x>1400360400000</x>
<y>1038</y>
<Planas>0</Planas>
</BP_plan>
<BP_plan>
<ID>4</ID>
<x>1400446800000</x>
<y>6612</y>
<Planas>2930</Planas>
</BP_plan>
<BP_plan>
<ID>5</ID>
<x>1400533200000</x>
<y>21303</y>
<Planas>2930</Planas>
</BP_plan>
<BP_plan>
<ID>6</ID>
<x>1400619600000</x>
<y>8565</y>
<Planas>2930</Planas>
</BP_plan>
<BP_plan>
<ID>7</ID>
<x>1400706000000</x>
<y>9496</y>
<Planas>2930</Planas>
</BP_plan>
<BP_plan>
<ID>8</ID>
<x>1400792400000</x>
<y>11016</y>
<Planas>2930</Planas>
</BP_plan>
<BP_plan>
<ID>9</ID>
<x>1400878800000</x>
<y>787</y>
<Planas>0</Planas>
</BP_plan>
<BP_plan>
<ID>10</ID>
<x>1400965200000</x>
<y>199</y>
<Planas>0</Planas>
</BP_plan>
<BP_plan>
<ID>11</ID>
<x>1401051600000</x>
<y>13775</y>
<Planas>2922</Planas>
</BP_plan>
<BP_plan>
<ID>12</ID>
<x>1401138000000</x>
<y>20474</y>
<Planas>2922</Planas>
</BP_plan>
<BP_plan>
<ID>13</ID>
<x>1401224400000</x>
<y>10136</y>
<Planas>2922</Planas>
</BP_plan>
<BP_plan>
<ID>14</ID>
<x>1401310800000</x>
<y>8436</y>
<Planas>2922</Planas>
</BP_plan>
</dataroot>

the part of detalizacija.xml:

<?xml version="1.0" encoding="UTF-8"?>
<dataroot xmlns:od="urn:schemas-microsoft-com:officedata" generated="2014-07-14T10:25:43">
<detalizacija>
<ID>16</ID>
<data>1400187600000</data>
<kategorija>ESET</kategorija>
<BP_Lt>5938</BP_Lt>
</detalizacija>
<detalizacija>
<ID>17</ID>
<data>1400187600000</data>
<kategorija>OERP</kategorija>
<BP_Lt>120</BP_Lt>
</detalizacija>
<detalizacija>
<ID>18</ID>
<data>1400187600000</data>
<kategorija>SoftMaker</kategorija>
<BP_Lt>65</BP_Lt>
</detalizacija>
<detalizacija>
<ID>19</ID>
<data>1400187600000</data>
<kategorija>Google</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>20</ID>
<data>1400187600000</data>
<kategorija>Blancco</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>21</ID>
<data>1400187600000</data>
<kategorija>Axence</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>22</ID>
<data>1400187600000</data>
<kategorija>Kiti</kategorija>
<BP_Lt>43</BP_Lt>
</detalizacija>
<detalizacija>
<ID>23</ID>
<data>1400187600000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>24</ID>
<data>1400187600000</data>
<kategorija>PrestaShop</kategorija>
<BP_Lt>1047</BP_Lt>
</detalizacija>
<detalizacija>
<ID>25</ID>
<data>1400187600000</data>
<kategorija>Eksportas</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>26</ID>
<data>1400187600000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>27</ID>
<data>1400187600000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>28</ID>
<data>1400187600000</data>
<kategorija>Box</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>29</ID>
<data>1400187600000</data>
<kategorija>Nuoma</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>30</ID>
<data>1400274000000</data>
<kategorija>ESET</kategorija>
<BP_Lt>276</BP_Lt>
</detalizacija>
<detalizacija>
<ID>31</ID>
<data>1400274000000</data>
<kategorija>OERP</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>32</ID>
<data>1400274000000</data>
<kategorija>SoftMaker</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>33</ID>
<data>1400274000000</data>
<kategorija>Google</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>34</ID>
<data>1400274000000</data>
<kategorija>Blancco</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>35</ID>
<data>1400274000000</data>
<kategorija>Axence</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>36</ID>
<data>1400274000000</data>
<kategorija>Kiti</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>37</ID>
<data>1400274000000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>38</ID>
<data>1400274000000</data>
<kategorija>PrestaShop</kategorija>
<BP_Lt>436</BP_Lt>
</detalizacija>
<detalizacija>
<ID>39</ID>
<data>1400274000000</data>
<kategorija>Eksportas</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>40</ID>
<data>1400274000000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>41</ID>
<data>1400274000000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>42</ID>
<data>1400274000000</data>
<kategorija>Box</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>43</ID>
<data>1400274000000</data>
<kategorija>Nuoma</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>44</ID>
<data>1400360400000</data>
<kategorija>ESET</kategorija>
<BP_Lt>56</BP_Lt>
</detalizacija>
<detalizacija>
<ID>45</ID>
<data>1400360400000</data>
<kategorija>OERP</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>46</ID>
<data>1400360400000</data>
<kategorija>SoftMaker</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>47</ID>
<data>1400360400000</data>
<kategorija>Google</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>48</ID>
<data>1400360400000</data>
<kategorija>Blancco</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>49</ID>
<data>1400360400000</data>
<kategorija>Axence</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>50</ID>
<data>1400360400000</data>
<kategorija>Kiti</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>51</ID>
<data>1400360400000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>52</ID>
<data>1400360400000</data>
<kategorija>PrestaShop</kategorija>
<BP_Lt>982</BP_Lt>
</detalizacija>
<detalizacija>
<ID>53</ID>
<data>1400360400000</data>
<kategorija>Eksportas</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>54</ID>
<data>1400360400000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>55</ID>
<data>1400360400000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>56</ID>
<data>1400360400000</data>
<kategorija>Box</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>57</ID>
<data>1400360400000</data>
<kategorija>Nuoma</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>58</ID>
<data>1400446800000</data>
<kategorija>ESET</kategorija>
<BP_Lt>5779</BP_Lt>
</detalizacija>
<detalizacija>
<ID>59</ID>
<data>1400446800000</data>
<kategorija>OERP</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>60</ID>
<data>1400446800000</data>
<kategorija>SoftMaker</kategorija>
<BP_Lt>59</BP_Lt>
</detalizacija>
<detalizacija>
<ID>61</ID>
<data>1400446800000</data>
<kategorija>Google</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>62</ID>
<data>1400446800000</data>
<kategorija>Blancco</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>63</ID>
<data>1400446800000</data>
<kategorija>Axence</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>64</ID>
<data>1400446800000</data>
<kategorija>Kiti</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>65</ID>
<data>1400446800000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>66</ID>
<data>1400446800000</data>
<kategorija>PrestaShop</kategorija>
<BP_Lt>774</BP_Lt>
</detalizacija>
<detalizacija>
<ID>67</ID>
<data>1400446800000</data>
<kategorija>Eksportas</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>68</ID>
<data>1400446800000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>69</ID>
<data>1400446800000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>70</ID>
<data>1400446800000</data>
<kategorija>Box</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>71</ID>
<data>1400446800000</data>
<kategorija>Nuoma</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>72</ID>
<data>1400533200000</data>
<kategorija>ESET</kategorija>
<BP_Lt>17729</BP_Lt>
</detalizacija>
<detalizacija>
<ID>73</ID>
<data>1400533200000</data>
<kategorija>OERP</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>74</ID>
<data>1400533200000</data>
<kategorija>SoftMaker</kategorija>
<BP_Lt>158</BP_Lt>
</detalizacija>
<detalizacija>
<ID>75</ID>
<data>1400533200000</data>
<kategorija>Google</kategorija>
<BP_Lt>668</BP_Lt>
</detalizacija>
<detalizacija>
<ID>76</ID>
<data>1400533200000</data>
<kategorija>Blancco</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>77</ID>
<data>1400533200000</data>
<kategorija>Axence</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>78</ID>
<data>1400533200000</data>
<kategorija>Kiti</kategorija>
<BP_Lt>1419</BP_Lt>
</detalizacija>
<detalizacija>
<ID>79</ID>
<data>1400533200000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>80</ID>
<data>1400533200000</data>
<kategorija>PrestaShop</kategorija>
<BP_Lt>1328</BP_Lt>
</detalizacija>
<detalizacija>
<ID>81</ID>
<data>1400533200000</data>
<kategorija>Eksportas</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>82</ID>
<data>1400533200000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>83</ID>
<data>1400533200000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>84</ID>
<data>1400533200000</data>
<kategorija>Box</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>85</ID>
<data>1400533200000</data>
<kategorija>Nuoma</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>86</ID>
<data>1400619600000</data>
<kategorija>ESET</kategorija>
<BP_Lt>7409</BP_Lt>
</detalizacija>
<detalizacija>
<ID>87</ID>
<data>1400619600000</data>
<kategorija>OERP</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>88</ID>
<data>1400619600000</data>
<kategorija>SoftMaker</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>89</ID>
<data>1400619600000</data>
<kategorija>Google</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>90</ID>
<data>1400619600000</data>
<kategorija>Blancco</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>91</ID>
<data>1400619600000</data>
<kategorija>Axence</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>92</ID>
<data>1400619600000</data>
<kategorija>Kiti</kategorija>
<BP_Lt>204</BP_Lt>
</detalizacija>
<detalizacija>
<ID>93</ID>
<data>1400619600000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>94</ID>
<data>1400619600000</data>
<kategorija>PrestaShop</kategorija>
<BP_Lt>952</BP_Lt>
</detalizacija>
<detalizacija>
<ID>95</ID>
<data>1400619600000</data>
<kategorija>Eksportas</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>96</ID>
<data>1400619600000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>97</ID>
<data>1400619600000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>98</ID>
<data>1400619600000</data>
<kategorija>Box</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>99</ID>
<data>1400619600000</data>
<kategorija>Nuoma</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>100</ID>
<data>1400706000000</data>
<kategorija>ESET</kategorija>
<BP_Lt>8187</BP_Lt>
</detalizacija>
<detalizacija>
<ID>101</ID>
<data>1400706000000</data>
<kategorija>OERP</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>102</ID>
<data>1400706000000</data>
<kategorija>SoftMaker</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>103</ID>
<data>1400706000000</data>
<kategorija>Google</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>104</ID>
<data>1400706000000</data>
<kategorija>Blancco</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>105</ID>
<data>1400706000000</data>
<kategorija>Axence</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>106</ID>
<data>1400706000000</data>
<kategorija>Kiti</kategorija>
<BP_Lt>174</BP_Lt>
</detalizacija>
<detalizacija>
<ID>107</ID>
<data>1400706000000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>108</ID>
<data>1400706000000</data>
<kategorija>PrestaShop</kategorija>
<BP_Lt>1135</BP_Lt>
</detalizacija>
<detalizacija>
<ID>109</ID>
<data>1400706000000</data>
<kategorija>Eksportas</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>110</ID>
<data>1400706000000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>111</ID>
<data>1400706000000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>112</ID>
<data>1400706000000</data>
<kategorija>Box</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>113</ID>
<data>1400706000000</data>
<kategorija>Nuoma</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>114</ID>
<data>1400792400000</data>
<kategorija>ESET</kategorija>
<BP_Lt>4366</BP_Lt>
</detalizacija>
<detalizacija>
<ID>115</ID>
<data>1400792400000</data>
<kategorija>OERP</kategorija>
<BP_Lt>5848</BP_Lt>
</detalizacija>
<detalizacija>
<ID>116</ID>
<data>1400792400000</data>
<kategorija>SoftMaker</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>117</ID>
<data>1400792400000</data>
<kategorija>Google</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>118</ID>
<data>1400792400000</data>
<kategorija>Blancco</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>119</ID>
<data>1400792400000</data>
<kategorija>Axence</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>120</ID>
<data>1400792400000</data>
<kategorija>Kiti</kategorija>
<BP_Lt>210</BP_Lt>
</detalizacija>
<detalizacija>
<ID>121</ID>
<data>1400792400000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>122</ID>
<data>1400792400000</data>
<kategorija>PrestaShop</kategorija>
<BP_Lt>592</BP_Lt>
</detalizacija>
<detalizacija>
<ID>123</ID>
<data>1400792400000</data>
<kategorija>Eksportas</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>124</ID>
<data>1400792400000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>125</ID>
<data>1400792400000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>126</ID>
<data>1400792400000</data>
<kategorija>Box</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>127</ID>
<data>1400792400000</data>
<kategorija>Nuoma</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>128</ID>
<data>1400878800000</data>
<kategorija>ESET</kategorija>
<BP_Lt>163</BP_Lt>
</detalizacija>
<detalizacija>
<ID>129</ID>
<data>1400878800000</data>
<kategorija>OERP</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>130</ID>
<data>1400878800000</data>
<kategorija>SoftMaker</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>131</ID>
<data>1400878800000</data>
<kategorija>Google</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>132</ID>
<data>1400878800000</data>
<kategorija>Blancco</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>133</ID>
<data>1400878800000</data>
<kategorija>Axence</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>134</ID>
<data>1400878800000</data>
<kategorija>Kiti</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>135</ID>
<data>1400878800000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>136</ID>
<data>1400878800000</data>
<kategorija>PrestaShop</kategorija>
<BP_Lt>624</BP_Lt>
</detalizacija>
<detalizacija>
<ID>137</ID>
<data>1400878800000</data>
<kategorija>Eksportas</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>138</ID>
<data>1400878800000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>139</ID>
<data>1400878800000</data>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>140</ID>
<data>1400878800000</data>
<kategorija>Box</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
<detalizacija>
<ID>141</ID>
<data>1400878800000</data>
<kategorija>Nuoma</kategorija>
<BP_Lt>0</BP_Lt>
</detalizacija>
</dataroot>

HTML:

    <script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide.js"></script>
    <script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide-full.min.js"></script>
    <script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide.config.js"></script>
    <script type="text/javascript"> hs.allowMultipleInstances = true; </script>
    <link rel="stylesheet" type="text/css" href="http://www.highslide.com/highslide/highslide.css" />
    <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/modules/drilldown.js"></script>

<div id="container_1_BP" style="min-width: 700px; height: 180px; margin: 0 auto"></div>

Solution

  • Here's what you're looking for

    Demo:http://jsfiddle.net/robschmuecker/dEG7r/1/

    $(document).ready(function () {
        Highcharts.setOptions({
            global: {
                useUTC: false,
                timeZoneOffset: -180
            },
            lang: {
                shortMonths: ['Sau', 'Vas', 'Kov', 'Bal', 'Geg', 'Bir', 'Lie', 'Rgp', 'Rgs', 'Spa', 'Lap', 'Grd'],
                loading: 'Krauna...',
                drillUpText: ' < Atgal '
            }
        });
        //var drill = [];
        var options = {
            credits: {
                enabled: false
            },
            xAxis: [{
                id: 0,
                startOnTick: false,
                labels: {
                    y: 15,
                    format: '{value:%e %b}',
                    zIndex: 0
                },
                tickWidth: 0,
                title: {
                    text: null
                },
                type: 'datetime',
                lineColor: '#BDBDBD'
            }, {
                id: 1,
                startOnTick: false,
                labels: {
                    y: 15,
                    style: {
                        color: '#A4A4A4'
                    },
                    zIndex: 0
                },
                tickWidth: 0,
                title: {
                    text: null
                },
                type: 'category',
                lineWidth: 0,
                lineColor: '#BDBDBD'
            }],
            yAxis: {
                gridLineWidth: 0,
                gridLineColor: '#e0e0e0',
                labels: {
                    y: 0,
                    x: 0,
                    overflow: 'justify',
                    enabled: false,
                    maxStaggerLines: 0,
                    align: 'center'
                },
                title: {
                    margin: 0,
                    text: null
                },
                gridLineInterpolation: null,
                lineColor: '#BDBDBD'
            },
            tooltip: {
                enabled: false,
                shared: true,
                xDateFormat: '%e %b',
                valueSuffix: ' Lt',
                borderColor: 'null',
                borderRadius: 10
            },
            plotOptions: {
                areaspline: {
                    lineColor: '#c0c0c0',
                    marker: {
                        enabled: false,
                        fillColor: '#e0e0e0',
                        radius: 3,
                        lineWidth: 1,
                        lineColor: '#c0c0c0'
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            marker: {
                                radius: 3,
                                lineWidth: 1
                            }
                        }
                    }
                },
                column: {
                    allowPointSelect: false,
                    cursor: 'pointer',
                    pointWidth: 35,
                    dataLabels: {
                        enabled: true,
                        inside: false,
                        crop: false,
                        overflow: 'none',
                        y: -10,
                        x: 0,
                        verticalAlign: 'middle',
                        padding: 0
                    }
                },
                series: {
                    animation: {
                        duration: 700
                    }
                }
            },
            chart: {
                animation: {
                    duration: 700
                },
                renderTo: 'container_1_BP',
                events: {
                    drilldown: function (e) {
                        UpdateTitle('BP s/f (' + Highcharts.dateFormat('%Y-%m-%d', e.point.category) + '): ', Highcharts.numberFormat(e.point.y, 0, '.', ',') + ' Lt');
                    },
                    drillup: function () {
                        UpdateTitle('Bendrasis pelnas, s/f', null);
                    }
                },
                spacingBottom: 20,
                type: 'column',
                borderRadius: 2,
                spacingTop: 0,
                width: 1012,
                marginLeft: 0,
                spacingRight: 0,
                marginBottom: 40,
                marginRight: 0,
                marginTop: 30,
                height: 180,
                spacingLeft: 0
            },
            title: {
                margin: 5,
                y: 15,
                text: 'Bendrasis pelnas, s/f',
                x: 20,
                align: 'left'
            },
            subtitle: {
                x: 220,
                y: 15,
                style: {
                    'color': '#a4a4a4',
                        'fontSize': '15px',
                        'fontWeight': 'bold'
                },
                align: 'left'
            },
            Exporting: {
                scale: 1,
                buttons: {
                    contextButton: {
                        enabled: false
                    }
                },
                enabled: false
            },
            legend: {
                enabled: false,
                symbolWidth: 12
            },
            series: [{
                index: 1,
                data: []
            }, {
                index: 0,
                data: []
            }],
    
            drilldown: {
                activeAxisLabelStyle: {
                    textDecoration: 'none',
                    fontWeight: 'regular',
                    color: 'A4A4A4'
                },
                animation: {
                    duration: 700
                },
                activeDataLabelStyle: {
                    textDecoration: 'none',
                    fontWeight: 'semi-bold',
                    color: '4c4c4c'
                },
                drillUpButton: {
                    relativeTo: 'spacingBox',
                    position: {
                        align: 'right',
                        x: -5,
                        y: 0,
                        verticalAlign: 'top'
                    }
                },
                series: []
            }
        };
    
        function getDrilldown(id, xml){
            matches = $(xml).find('detalizacija data:contains("' + id + '")');
            if(matches.length != 0){
                var drilldownObj = {id:id, xAxis: 1, data:[]};
                matches.each(function(){
                    var value = $(this).parent().find('BP_Lt').text();
                    var category = $(this).parent().find('kategorija').text();
                    drilldownObj.data.push([category, parseFloat(value, 10)]);
                });
                options.drilldown.series.push(drilldownObj);
                return id;
            } else {
                 return null;   
            }
        }
    
        function parseData(xml1, xml2) {
    
            // Split the lines
            var $xml = $(xml1);
            var cats = [], //x-axis categories
                seriesDataMap = {},
                seriesDataMap1 = {}; //map of series name to data
    
            //combine all processing into a single each callback, this will be faster
            $xml.find('BP_plan').each(function () {
                var $row = $(this),
                    category = $row.find('x').text(),
                    seriesName = $row.find('').text(),
                    dataValue = {'y':parseInt($row.find('y').text(), 10)},
                    dataValue1 = parseInt($row.find('Planas').text(), 10);
                    dataValue.drilldown = getDrilldown($row.find('x').text(), xml2);
                cats.push(category);
                dataValue1.drilldown = getDrilldown($row.find('kategorija').text(), xml2);
    
    
                if (seriesDataMap[seriesName] === undefined) {
                    //if we haven't seen this series before, add an empty array to our map
                    seriesDataMap[seriesName] = [];
                }
                if (seriesDataMap1[seriesName] === undefined) {
                    //if we haven't seen this series before, add an empty array to our map
                    seriesDataMap1[seriesName] = [];
                }
                //add this data point for this series to our map
                seriesDataMap[seriesName].push(dataValue);
                seriesDataMap1[seriesName].push(dataValue1);
    
            });
    
            //add categories
            options.xAxis[0].categories = cats;
    
            //add series data
            for (var seriesName in seriesDataMap) {
                options.series.push({
                    xAxis: 0,
                    index: 1,
                    name: seriesName,
                    data: seriesDataMap[seriesName],
                    type: 'column',
                    color: '#30bf09'
                });
            }
            //add series data
            for (var seriesName1 in seriesDataMap1) {
                options.series.push({
                    xAxis: 0,
                    index: 0,
                    name: seriesName1,
                    data: seriesDataMap1[seriesName1],
                    type: 'areaspline',
                    color: '#e0e0e0'
                });
            }
            chart_1 = new Highcharts.Chart(options);
            /*
         $(xml2).find('detalizacija').each(function () {
                    var Data = $(this).find('data').text(),
                        Kategorija = $(this).find('kategorija').text(),
                        BP_Lt = parseInt($(this).find('BP_Lt').text(), 10);
                    var dataOptions = {
                        y: e.point.category,
                        drilldown: {
                            xAxis: 1,
                            id: 'pirmas',
                            categories: [],
                            data: []
                        }
                    };
                    if (Data == e.point.category) {
                        dataOptions.drilldown.categories.push(Kategorija);
                        dataOptions.drilldown.data.push(BP_Lt);
                    }
                });
                //drill.push(dataOptions);
                options.drilldown.push(dataOptions);
                */
        }
    
        // Load the data from the XML file 
        $.get('BP_plan.xml', function (xml) {
            xml1 = xml;
            $.ajax({
                type: 'GET',
                url: 'detalizacija.xml',
                dataType: "xml",
                success: function (duom) {
                    xml2 = duom;
                    parseData(xml1, xml2);
                }
            });
        });
    });
    
    function UpdateTitle(argument1, argument2) {
        chart_1.setTitle({
            text: argument1
        }, {
            text: argument2
        });
    }