ElasticUI Twitter Dashboard example

[njss]

Hi,

the elasticui.js works great. I will try to change some widgets. Can you provide me the example on your twitter dashboard example for the date histogram? Does it also allow to filter the date using the histogram chart?

thanks in advance. regards,

[YousefED]

It uses highcharts-ng, and the code is similar to below. If you use it it would be great if you could contribute to ElasticUI code + demo + docs

It would also be nice if this would be it's own directive or in another way fit it better to angular's style, the current code mixes some stuff and hacks around with eui-var to set a scope variable.

   <ul class="nav nav-list" eui-aggregation="ejs.DateHistogramAggregation('dates').field('tweet.created_at').timeZone(2).interval('1d').minDocCount(0)" eui-filter-self="false">
    <li class="nav-header">Date</li>
    <div eui-filter="ejs.RangeFilter('tweet.created_at').gte((dateSelectorChartConfig.xAxis.manualMin | euiRound))" eui-enabled="dateSelectorChartConfig.xAxis.manualMin"></div>
    <div eui-filter="ejs.RangeFilter('tweet.created_at').lte((dateSelectorChartConfig.xAxis.manualMax | euiRound))" eui-enabled="dateSelectorChartConfig.xAxis.manualMax"></div>
        <eui-var eui-key="dateSelectorChartConfig" eui-value='
{
   "series":[
      {
         "data":(aggResult.buckets | euiMap : "doc_count"),
         "id":"series-0"
      }
   ],
   "xAxis":{
      "type":"datetime",
      "currentMin":null,
      "currentMax":null,
      "manualMin":dateSelectorChartConfig.xAxis.manualMin,
      "manualMax":dateSelectorChartConfig.xAxis.manualMax,
      "minRange":"3600000"
   },
   "yAxis":{
      "gridLineWidth":0,
      "minorGridLineWidth":0,
      "labels":{
         "enabled":false
      },
      "title":null,
      "min":0,
      "lineWidth":0,
      "minorGridLineWidth":0,
      "lineColor":"transparent",
      "minorticklength":0,
      "ticklength":0
   },
   "options":{
      "chart":{
         "zoomType":"x",
         "backgroundColor":"#3A3A3A"
      },
      "plotOptions": {
                 "line": {
        "marker": {
            "enabled":false
        }
                 }
      },
      "title":null,
      "legend":{
         "enabled":false
      }
   }
}
                 ' />
    <highchart style="height:120px;width:250px;" config='dateSelectorChartConfig'></highchart>
</ul>

Hope it helps anyway

[njss]

Hi,

thank you so much for your reply. I was attempting to achieve this using d3.js, and now your example opened my mind for the way how it can be integrated with the elasticsearch.js api. I will have a try and let you know about it.

Thank you so much,

Nelson

[njss]

Just to let you know that our end result is now here: https://github.com/njss/faceted-opendata

[YousefED]

Cool. thanks for sharing. Any screenshots?

On Sat, Jan 30, 2016 at 1:45 PM, NELSON SILVA notifications@github.com wrote:

Just to let you know that our end result is now here: https://github.com/njss/faceted-opendata

— Reply to this email directly or view it on GitHub https://github.com/YousefED/ElasticUI/issues/68#issuecomment-177167291.

[njss]

Yes soon we will add everything fresh and screenshots we had to remove this to check for some licenses for the opendata

[njss]

Hello again,

the project is online now at:

http://faceted-debate.tt4.at/

[YousefED]

Very cool! Thanks for sharing!

Did other students use ElasticUI as well? How has your experience been?

[njss]

Well our team used elasticui and also elasticsearch. Js. I know that at least one new team will now re-use our work and continue...